@progress/kendo-theme-core 13.1.1 → 13.2.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.
- package/dist/all.css +1 -1
- package/dist/meta/sassdoc-data.json +815 -1797
- package/dist/meta/sassdoc-raw-data.json +275 -535
- package/dist/meta/variables.json +418 -739
- package/package.json +2 -2
- package/scss/border-radii/index.scss +16 -12
- package/scss/color-system/_functions.scss +1 -100
- package/scss/color-system/_swatch.scss +174 -149
- package/scss/color-system/index.scss +0 -1
- package/scss/components/button/_variables.scss +12 -0
- package/scss/components/chat/_layout.scss +2 -2
- package/scss/components/chip/_layout.scss +1 -1
- package/scss/components/color-preview/_variables.scss +1 -1
- package/scss/components/dataviz/_layout.scss +5 -5
- package/scss/components/forms/_layout.scss +6 -6
- package/scss/components/gantt/_layout.scss +2 -2
- package/scss/components/grid/_layout.scss +21 -8
- package/scss/components/smart-box/_layout.scss +1 -1
- package/scss/components/table/_variables.scss +6 -6
- package/scss/components/tabstrip/_layout.scss +12 -5
- package/scss/components/timeline/_layout.scss +0 -1
- package/scss/components/typography/_layout.scss +5 -5
- package/scss/elevation/index.scss +29 -1
- package/scss/mixins/_border-radius.scss +8 -0
- package/scss/motion/index.scss +2 -2
- package/scss/spacing/index.scss +40 -74
- package/scss/color-system/_palettes.scss +0 -282
|
@@ -389,8 +389,8 @@
|
|
|
389
389
|
"name": "k-generate-color-variations",
|
|
390
390
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
391
391
|
"line": {
|
|
392
|
-
"start":
|
|
393
|
-
"end":
|
|
392
|
+
"start": 94,
|
|
393
|
+
"end": 208
|
|
394
394
|
}
|
|
395
395
|
}
|
|
396
396
|
}
|
|
@@ -574,8 +574,8 @@
|
|
|
574
574
|
{
|
|
575
575
|
"description": "The theme colors map of the Button.\n",
|
|
576
576
|
"commentRange": {
|
|
577
|
-
"start":
|
|
578
|
-
"end":
|
|
577
|
+
"start": 114,
|
|
578
|
+
"end": 115
|
|
579
579
|
},
|
|
580
580
|
"context": {
|
|
581
581
|
"type": "variable",
|
|
@@ -583,8 +583,8 @@
|
|
|
583
583
|
"value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\", \"dark\", \"light\", \"inverse\")",
|
|
584
584
|
"scope": "default",
|
|
585
585
|
"line": {
|
|
586
|
-
"start":
|
|
587
|
-
"end":
|
|
586
|
+
"start": 116,
|
|
587
|
+
"end": 116
|
|
588
588
|
}
|
|
589
589
|
},
|
|
590
590
|
"group": [
|
|
@@ -599,17 +599,17 @@
|
|
|
599
599
|
{
|
|
600
600
|
"description": "The sizes map of the Button.\n",
|
|
601
601
|
"commentRange": {
|
|
602
|
-
"start":
|
|
603
|
-
"end":
|
|
602
|
+
"start": 118,
|
|
603
|
+
"end": 119
|
|
604
604
|
},
|
|
605
605
|
"context": {
|
|
606
606
|
"type": "variable",
|
|
607
607
|
"name": "kendo-button-sizes",
|
|
608
|
-
"value": "(\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
|
|
608
|
+
"value": "(\n xs: (\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
|
|
609
609
|
"scope": "default",
|
|
610
610
|
"line": {
|
|
611
|
-
"start":
|
|
612
|
-
"end":
|
|
611
|
+
"start": 120,
|
|
612
|
+
"end": 145
|
|
613
613
|
}
|
|
614
614
|
},
|
|
615
615
|
"group": [
|
|
@@ -1057,16 +1057,16 @@
|
|
|
1057
1057
|
{
|
|
1058
1058
|
"description": "Generates all color variations of a given main color\n",
|
|
1059
1059
|
"commentRange": {
|
|
1060
|
-
"start":
|
|
1061
|
-
"end":
|
|
1060
|
+
"start": 87,
|
|
1061
|
+
"end": 93
|
|
1062
1062
|
},
|
|
1063
1063
|
"context": {
|
|
1064
1064
|
"type": "function",
|
|
1065
1065
|
"name": "k-generate-color-variations",
|
|
1066
1066
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
1067
1067
|
"line": {
|
|
1068
|
-
"start":
|
|
1069
|
-
"end":
|
|
1068
|
+
"start": 94,
|
|
1069
|
+
"end": 208
|
|
1070
1070
|
}
|
|
1071
1071
|
},
|
|
1072
1072
|
"parameter": [
|
|
@@ -1404,16 +1404,16 @@
|
|
|
1404
1404
|
{
|
|
1405
1405
|
"description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
|
|
1406
1406
|
"commentRange": {
|
|
1407
|
-
"start":
|
|
1408
|
-
"end":
|
|
1407
|
+
"start": 210,
|
|
1408
|
+
"end": 215
|
|
1409
1409
|
},
|
|
1410
1410
|
"context": {
|
|
1411
1411
|
"type": "function",
|
|
1412
1412
|
"name": "k-color",
|
|
1413
|
-
"code": "\n
|
|
1413
|
+
"code": "\n @return var(--kendo-color-#{$key});\n",
|
|
1414
1414
|
"line": {
|
|
1415
|
-
"start":
|
|
1416
|
-
"end":
|
|
1415
|
+
"start": 216,
|
|
1416
|
+
"end": 218
|
|
1417
1417
|
}
|
|
1418
1418
|
},
|
|
1419
1419
|
"parameter": [
|
|
@@ -1431,15 +1431,7 @@
|
|
|
1431
1431
|
"color-system"
|
|
1432
1432
|
],
|
|
1433
1433
|
"access": "public",
|
|
1434
|
-
"require": [
|
|
1435
|
-
{
|
|
1436
|
-
"type": "variable",
|
|
1437
|
-
"name": "kendo-colors"
|
|
1438
|
-
}
|
|
1439
|
-
],
|
|
1440
|
-
"throw": [
|
|
1441
|
-
"Color Variable \\`#{$key}\\` does not exists in the color collection."
|
|
1442
|
-
],
|
|
1434
|
+
"require": [],
|
|
1443
1435
|
"file": {
|
|
1444
1436
|
"path": "color-system/_functions.scss",
|
|
1445
1437
|
"name": "_functions.scss"
|
|
@@ -1448,8 +1440,8 @@
|
|
|
1448
1440
|
{
|
|
1449
1441
|
"description": "The global default Colors map.\n",
|
|
1450
1442
|
"commentRange": {
|
|
1451
|
-
"start":
|
|
1452
|
-
"end":
|
|
1443
|
+
"start": 193,
|
|
1444
|
+
"end": 447
|
|
1453
1445
|
},
|
|
1454
1446
|
"context": {
|
|
1455
1447
|
"type": "variable",
|
|
@@ -1457,8 +1449,8 @@
|
|
|
1457
1449
|
"value": "$default-colors",
|
|
1458
1450
|
"scope": "default",
|
|
1459
1451
|
"line": {
|
|
1460
|
-
"start":
|
|
1461
|
-
"end":
|
|
1452
|
+
"start": 448,
|
|
1453
|
+
"end": 448
|
|
1462
1454
|
}
|
|
1463
1455
|
},
|
|
1464
1456
|
"group": [
|
|
@@ -1654,6 +1646,13 @@
|
|
|
1654
1646
|
],
|
|
1655
1647
|
"description": "The Inverse variable group."
|
|
1656
1648
|
},
|
|
1649
|
+
{
|
|
1650
|
+
"name": "series",
|
|
1651
|
+
"value": [
|
|
1652
|
+
"series"
|
|
1653
|
+
],
|
|
1654
|
+
"description": "The Series base variable group."
|
|
1655
|
+
},
|
|
1657
1656
|
{
|
|
1658
1657
|
"name": "series-a",
|
|
1659
1658
|
"value": [
|
|
@@ -2307,6 +2306,11 @@
|
|
|
2307
2306
|
"name": "inverse-on-surface",
|
|
2308
2307
|
"description": "The text color variable for content on surface."
|
|
2309
2308
|
},
|
|
2309
|
+
{
|
|
2310
|
+
"type": "Color",
|
|
2311
|
+
"name": "series",
|
|
2312
|
+
"description": "The base series color variable."
|
|
2313
|
+
},
|
|
2310
2314
|
{
|
|
2311
2315
|
"type": "Color",
|
|
2312
2316
|
"name": "series-a",
|
|
@@ -2462,21 +2466,7 @@
|
|
|
2462
2466
|
"file": {
|
|
2463
2467
|
"path": "color-system/_swatch.scss",
|
|
2464
2468
|
"name": "_swatch.scss"
|
|
2465
|
-
}
|
|
2466
|
-
"usedBy": [
|
|
2467
|
-
{
|
|
2468
|
-
"description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
|
|
2469
|
-
"context": {
|
|
2470
|
-
"type": "function",
|
|
2471
|
-
"name": "k-color",
|
|
2472
|
-
"code": "\n $_color: map.get($kendo-colors, $key);\n\n @if ($_color) {\n @return var(--kendo-color-#{$key}, $_color);\n } @else {\n @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n }\n",
|
|
2473
|
-
"line": {
|
|
2474
|
-
"start": 309,
|
|
2475
|
-
"end": 317
|
|
2476
|
-
}
|
|
2477
|
-
}
|
|
2478
|
-
}
|
|
2479
|
-
]
|
|
2469
|
+
}
|
|
2480
2470
|
},
|
|
2481
2471
|
{
|
|
2482
2472
|
"description": "Makes a color lighter by mixing it with white\n",
|
|
@@ -2683,8 +2673,8 @@
|
|
|
2683
2673
|
"name": "k-generate-color-variations",
|
|
2684
2674
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2685
2675
|
"line": {
|
|
2686
|
-
"start":
|
|
2687
|
-
"end":
|
|
2676
|
+
"start": 94,
|
|
2677
|
+
"end": 208
|
|
2688
2678
|
}
|
|
2689
2679
|
}
|
|
2690
2680
|
},
|
|
@@ -2695,8 +2685,8 @@
|
|
|
2695
2685
|
"name": "k-generate-color-variations",
|
|
2696
2686
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2697
2687
|
"line": {
|
|
2698
|
-
"start":
|
|
2699
|
-
"end":
|
|
2688
|
+
"start": 94,
|
|
2689
|
+
"end": 208
|
|
2700
2690
|
}
|
|
2701
2691
|
}
|
|
2702
2692
|
},
|
|
@@ -2707,8 +2697,8 @@
|
|
|
2707
2697
|
"name": "k-generate-color-variations",
|
|
2708
2698
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2709
2699
|
"line": {
|
|
2710
|
-
"start":
|
|
2711
|
-
"end":
|
|
2700
|
+
"start": 94,
|
|
2701
|
+
"end": 208
|
|
2712
2702
|
}
|
|
2713
2703
|
}
|
|
2714
2704
|
},
|
|
@@ -2719,8 +2709,8 @@
|
|
|
2719
2709
|
"name": "k-generate-color-variations",
|
|
2720
2710
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2721
2711
|
"line": {
|
|
2722
|
-
"start":
|
|
2723
|
-
"end":
|
|
2712
|
+
"start": 94,
|
|
2713
|
+
"end": 208
|
|
2724
2714
|
}
|
|
2725
2715
|
}
|
|
2726
2716
|
},
|
|
@@ -2731,8 +2721,8 @@
|
|
|
2731
2721
|
"name": "k-generate-color-variations",
|
|
2732
2722
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2733
2723
|
"line": {
|
|
2734
|
-
"start":
|
|
2735
|
-
"end":
|
|
2724
|
+
"start": 94,
|
|
2725
|
+
"end": 208
|
|
2736
2726
|
}
|
|
2737
2727
|
}
|
|
2738
2728
|
},
|
|
@@ -2743,8 +2733,8 @@
|
|
|
2743
2733
|
"name": "k-generate-color-variations",
|
|
2744
2734
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2745
2735
|
"line": {
|
|
2746
|
-
"start":
|
|
2747
|
-
"end":
|
|
2736
|
+
"start": 94,
|
|
2737
|
+
"end": 208
|
|
2748
2738
|
}
|
|
2749
2739
|
}
|
|
2750
2740
|
},
|
|
@@ -2755,8 +2745,8 @@
|
|
|
2755
2745
|
"name": "k-generate-color-variations",
|
|
2756
2746
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2757
2747
|
"line": {
|
|
2758
|
-
"start":
|
|
2759
|
-
"end":
|
|
2748
|
+
"start": 94,
|
|
2749
|
+
"end": 208
|
|
2760
2750
|
}
|
|
2761
2751
|
}
|
|
2762
2752
|
},
|
|
@@ -2767,8 +2757,8 @@
|
|
|
2767
2757
|
"name": "k-generate-color-variations",
|
|
2768
2758
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2769
2759
|
"line": {
|
|
2770
|
-
"start":
|
|
2771
|
-
"end":
|
|
2760
|
+
"start": 94,
|
|
2761
|
+
"end": 208
|
|
2772
2762
|
}
|
|
2773
2763
|
}
|
|
2774
2764
|
},
|
|
@@ -2779,8 +2769,8 @@
|
|
|
2779
2769
|
"name": "k-generate-color-variations",
|
|
2780
2770
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2781
2771
|
"line": {
|
|
2782
|
-
"start":
|
|
2783
|
-
"end":
|
|
2772
|
+
"start": 94,
|
|
2773
|
+
"end": 208
|
|
2784
2774
|
}
|
|
2785
2775
|
}
|
|
2786
2776
|
},
|
|
@@ -2791,8 +2781,8 @@
|
|
|
2791
2781
|
"name": "k-generate-color-variations",
|
|
2792
2782
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2793
2783
|
"line": {
|
|
2794
|
-
"start":
|
|
2795
|
-
"end":
|
|
2784
|
+
"start": 94,
|
|
2785
|
+
"end": 208
|
|
2796
2786
|
}
|
|
2797
2787
|
}
|
|
2798
2788
|
},
|
|
@@ -2803,8 +2793,8 @@
|
|
|
2803
2793
|
"name": "k-generate-color-variations",
|
|
2804
2794
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2805
2795
|
"line": {
|
|
2806
|
-
"start":
|
|
2807
|
-
"end":
|
|
2796
|
+
"start": 94,
|
|
2797
|
+
"end": 208
|
|
2808
2798
|
}
|
|
2809
2799
|
}
|
|
2810
2800
|
},
|
|
@@ -2815,8 +2805,8 @@
|
|
|
2815
2805
|
"name": "k-generate-color-variations",
|
|
2816
2806
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2817
2807
|
"line": {
|
|
2818
|
-
"start":
|
|
2819
|
-
"end":
|
|
2808
|
+
"start": 94,
|
|
2809
|
+
"end": 208
|
|
2820
2810
|
}
|
|
2821
2811
|
}
|
|
2822
2812
|
},
|
|
@@ -2827,8 +2817,8 @@
|
|
|
2827
2817
|
"name": "k-generate-color-variations",
|
|
2828
2818
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2829
2819
|
"line": {
|
|
2830
|
-
"start":
|
|
2831
|
-
"end":
|
|
2820
|
+
"start": 94,
|
|
2821
|
+
"end": 208
|
|
2832
2822
|
}
|
|
2833
2823
|
}
|
|
2834
2824
|
},
|
|
@@ -2839,8 +2829,8 @@
|
|
|
2839
2829
|
"name": "k-generate-color-variations",
|
|
2840
2830
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2841
2831
|
"line": {
|
|
2842
|
-
"start":
|
|
2843
|
-
"end":
|
|
2832
|
+
"start": 94,
|
|
2833
|
+
"end": 208
|
|
2844
2834
|
}
|
|
2845
2835
|
}
|
|
2846
2836
|
},
|
|
@@ -2851,8 +2841,8 @@
|
|
|
2851
2841
|
"name": "k-generate-color-variations",
|
|
2852
2842
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2853
2843
|
"line": {
|
|
2854
|
-
"start":
|
|
2855
|
-
"end":
|
|
2844
|
+
"start": 94,
|
|
2845
|
+
"end": 208
|
|
2856
2846
|
}
|
|
2857
2847
|
}
|
|
2858
2848
|
},
|
|
@@ -2863,8 +2853,8 @@
|
|
|
2863
2853
|
"name": "k-generate-color-variations",
|
|
2864
2854
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2865
2855
|
"line": {
|
|
2866
|
-
"start":
|
|
2867
|
-
"end":
|
|
2856
|
+
"start": 94,
|
|
2857
|
+
"end": 208
|
|
2868
2858
|
}
|
|
2869
2859
|
}
|
|
2870
2860
|
},
|
|
@@ -2875,8 +2865,8 @@
|
|
|
2875
2865
|
"name": "k-generate-color-variations",
|
|
2876
2866
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2877
2867
|
"line": {
|
|
2878
|
-
"start":
|
|
2879
|
-
"end":
|
|
2868
|
+
"start": 94,
|
|
2869
|
+
"end": 208
|
|
2880
2870
|
}
|
|
2881
2871
|
}
|
|
2882
2872
|
},
|
|
@@ -2887,8 +2877,8 @@
|
|
|
2887
2877
|
"name": "k-generate-color-variations",
|
|
2888
2878
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2889
2879
|
"line": {
|
|
2890
|
-
"start":
|
|
2891
|
-
"end":
|
|
2880
|
+
"start": 94,
|
|
2881
|
+
"end": 208
|
|
2892
2882
|
}
|
|
2893
2883
|
}
|
|
2894
2884
|
},
|
|
@@ -2899,8 +2889,8 @@
|
|
|
2899
2889
|
"name": "k-generate-color-variations",
|
|
2900
2890
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2901
2891
|
"line": {
|
|
2902
|
-
"start":
|
|
2903
|
-
"end":
|
|
2892
|
+
"start": 94,
|
|
2893
|
+
"end": 208
|
|
2904
2894
|
}
|
|
2905
2895
|
}
|
|
2906
2896
|
},
|
|
@@ -2911,8 +2901,8 @@
|
|
|
2911
2901
|
"name": "k-generate-color-variations",
|
|
2912
2902
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2913
2903
|
"line": {
|
|
2914
|
-
"start":
|
|
2915
|
-
"end":
|
|
2904
|
+
"start": 94,
|
|
2905
|
+
"end": 208
|
|
2916
2906
|
}
|
|
2917
2907
|
}
|
|
2918
2908
|
},
|
|
@@ -2923,8 +2913,8 @@
|
|
|
2923
2913
|
"name": "k-generate-color-variations",
|
|
2924
2914
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2925
2915
|
"line": {
|
|
2926
|
-
"start":
|
|
2927
|
-
"end":
|
|
2916
|
+
"start": 94,
|
|
2917
|
+
"end": 208
|
|
2928
2918
|
}
|
|
2929
2919
|
}
|
|
2930
2920
|
},
|
|
@@ -2935,8 +2925,8 @@
|
|
|
2935
2925
|
"name": "k-generate-color-variations",
|
|
2936
2926
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2937
2927
|
"line": {
|
|
2938
|
-
"start":
|
|
2939
|
-
"end":
|
|
2928
|
+
"start": 94,
|
|
2929
|
+
"end": 208
|
|
2940
2930
|
}
|
|
2941
2931
|
}
|
|
2942
2932
|
},
|
|
@@ -2947,8 +2937,8 @@
|
|
|
2947
2937
|
"name": "k-generate-color-variations",
|
|
2948
2938
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2949
2939
|
"line": {
|
|
2950
|
-
"start":
|
|
2951
|
-
"end":
|
|
2940
|
+
"start": 94,
|
|
2941
|
+
"end": 208
|
|
2952
2942
|
}
|
|
2953
2943
|
}
|
|
2954
2944
|
},
|
|
@@ -2959,8 +2949,8 @@
|
|
|
2959
2949
|
"name": "k-generate-color-variations",
|
|
2960
2950
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2961
2951
|
"line": {
|
|
2962
|
-
"start":
|
|
2963
|
-
"end":
|
|
2952
|
+
"start": 94,
|
|
2953
|
+
"end": 208
|
|
2964
2954
|
}
|
|
2965
2955
|
}
|
|
2966
2956
|
},
|
|
@@ -2971,8 +2961,8 @@
|
|
|
2971
2961
|
"name": "k-generate-color-variations",
|
|
2972
2962
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2973
2963
|
"line": {
|
|
2974
|
-
"start":
|
|
2975
|
-
"end":
|
|
2964
|
+
"start": 94,
|
|
2965
|
+
"end": 208
|
|
2976
2966
|
}
|
|
2977
2967
|
}
|
|
2978
2968
|
},
|
|
@@ -2983,8 +2973,8 @@
|
|
|
2983
2973
|
"name": "k-generate-color-variations",
|
|
2984
2974
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2985
2975
|
"line": {
|
|
2986
|
-
"start":
|
|
2987
|
-
"end":
|
|
2976
|
+
"start": 94,
|
|
2977
|
+
"end": 208
|
|
2988
2978
|
}
|
|
2989
2979
|
}
|
|
2990
2980
|
},
|
|
@@ -2995,8 +2985,8 @@
|
|
|
2995
2985
|
"name": "k-generate-color-variations",
|
|
2996
2986
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
2997
2987
|
"line": {
|
|
2998
|
-
"start":
|
|
2999
|
-
"end":
|
|
2988
|
+
"start": 94,
|
|
2989
|
+
"end": 208
|
|
3000
2990
|
}
|
|
3001
2991
|
}
|
|
3002
2992
|
},
|
|
@@ -3007,8 +2997,8 @@
|
|
|
3007
2997
|
"name": "k-generate-color-variations",
|
|
3008
2998
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3009
2999
|
"line": {
|
|
3010
|
-
"start":
|
|
3011
|
-
"end":
|
|
3000
|
+
"start": 94,
|
|
3001
|
+
"end": 208
|
|
3012
3002
|
}
|
|
3013
3003
|
}
|
|
3014
3004
|
},
|
|
@@ -3019,8 +3009,8 @@
|
|
|
3019
3009
|
"name": "k-generate-color-variations",
|
|
3020
3010
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3021
3011
|
"line": {
|
|
3022
|
-
"start":
|
|
3023
|
-
"end":
|
|
3012
|
+
"start": 94,
|
|
3013
|
+
"end": 208
|
|
3024
3014
|
}
|
|
3025
3015
|
}
|
|
3026
3016
|
},
|
|
@@ -3031,8 +3021,8 @@
|
|
|
3031
3021
|
"name": "k-generate-color-variations",
|
|
3032
3022
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3033
3023
|
"line": {
|
|
3034
|
-
"start":
|
|
3035
|
-
"end":
|
|
3024
|
+
"start": 94,
|
|
3025
|
+
"end": 208
|
|
3036
3026
|
}
|
|
3037
3027
|
}
|
|
3038
3028
|
},
|
|
@@ -3043,8 +3033,8 @@
|
|
|
3043
3033
|
"name": "k-generate-color-variations",
|
|
3044
3034
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3045
3035
|
"line": {
|
|
3046
|
-
"start":
|
|
3047
|
-
"end":
|
|
3036
|
+
"start": 94,
|
|
3037
|
+
"end": 208
|
|
3048
3038
|
}
|
|
3049
3039
|
}
|
|
3050
3040
|
},
|
|
@@ -3055,8 +3045,8 @@
|
|
|
3055
3045
|
"name": "k-generate-color-variations",
|
|
3056
3046
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3057
3047
|
"line": {
|
|
3058
|
-
"start":
|
|
3059
|
-
"end":
|
|
3048
|
+
"start": 94,
|
|
3049
|
+
"end": 208
|
|
3060
3050
|
}
|
|
3061
3051
|
}
|
|
3062
3052
|
},
|
|
@@ -3067,8 +3057,8 @@
|
|
|
3067
3057
|
"name": "k-generate-color-variations",
|
|
3068
3058
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3069
3059
|
"line": {
|
|
3070
|
-
"start":
|
|
3071
|
-
"end":
|
|
3060
|
+
"start": 94,
|
|
3061
|
+
"end": 208
|
|
3072
3062
|
}
|
|
3073
3063
|
}
|
|
3074
3064
|
},
|
|
@@ -3079,8 +3069,8 @@
|
|
|
3079
3069
|
"name": "k-generate-color-variations",
|
|
3080
3070
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3081
3071
|
"line": {
|
|
3082
|
-
"start":
|
|
3083
|
-
"end":
|
|
3072
|
+
"start": 94,
|
|
3073
|
+
"end": 208
|
|
3084
3074
|
}
|
|
3085
3075
|
}
|
|
3086
3076
|
},
|
|
@@ -3091,8 +3081,8 @@
|
|
|
3091
3081
|
"name": "k-generate-color-variations",
|
|
3092
3082
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3093
3083
|
"line": {
|
|
3094
|
-
"start":
|
|
3095
|
-
"end":
|
|
3084
|
+
"start": 94,
|
|
3085
|
+
"end": 208
|
|
3096
3086
|
}
|
|
3097
3087
|
}
|
|
3098
3088
|
},
|
|
@@ -3103,8 +3093,8 @@
|
|
|
3103
3093
|
"name": "k-generate-color-variations",
|
|
3104
3094
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3105
3095
|
"line": {
|
|
3106
|
-
"start":
|
|
3107
|
-
"end":
|
|
3096
|
+
"start": 94,
|
|
3097
|
+
"end": 208
|
|
3108
3098
|
}
|
|
3109
3099
|
}
|
|
3110
3100
|
},
|
|
@@ -3115,8 +3105,8 @@
|
|
|
3115
3105
|
"name": "k-generate-color-variations",
|
|
3116
3106
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3117
3107
|
"line": {
|
|
3118
|
-
"start":
|
|
3119
|
-
"end":
|
|
3108
|
+
"start": 94,
|
|
3109
|
+
"end": 208
|
|
3120
3110
|
}
|
|
3121
3111
|
}
|
|
3122
3112
|
},
|
|
@@ -3127,8 +3117,8 @@
|
|
|
3127
3117
|
"name": "k-generate-color-variations",
|
|
3128
3118
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3129
3119
|
"line": {
|
|
3130
|
-
"start":
|
|
3131
|
-
"end":
|
|
3120
|
+
"start": 94,
|
|
3121
|
+
"end": 208
|
|
3132
3122
|
}
|
|
3133
3123
|
}
|
|
3134
3124
|
},
|
|
@@ -3139,8 +3129,8 @@
|
|
|
3139
3129
|
"name": "k-generate-color-variations",
|
|
3140
3130
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3141
3131
|
"line": {
|
|
3142
|
-
"start":
|
|
3143
|
-
"end":
|
|
3132
|
+
"start": 94,
|
|
3133
|
+
"end": 208
|
|
3144
3134
|
}
|
|
3145
3135
|
}
|
|
3146
3136
|
},
|
|
@@ -3151,8 +3141,8 @@
|
|
|
3151
3141
|
"name": "k-generate-color-variations",
|
|
3152
3142
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3153
3143
|
"line": {
|
|
3154
|
-
"start":
|
|
3155
|
-
"end":
|
|
3144
|
+
"start": 94,
|
|
3145
|
+
"end": 208
|
|
3156
3146
|
}
|
|
3157
3147
|
}
|
|
3158
3148
|
},
|
|
@@ -3163,8 +3153,8 @@
|
|
|
3163
3153
|
"name": "k-generate-color-variations",
|
|
3164
3154
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3165
3155
|
"line": {
|
|
3166
|
-
"start":
|
|
3167
|
-
"end":
|
|
3156
|
+
"start": 94,
|
|
3157
|
+
"end": 208
|
|
3168
3158
|
}
|
|
3169
3159
|
}
|
|
3170
3160
|
},
|
|
@@ -3175,8 +3165,8 @@
|
|
|
3175
3165
|
"name": "k-generate-color-variations",
|
|
3176
3166
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3177
3167
|
"line": {
|
|
3178
|
-
"start":
|
|
3179
|
-
"end":
|
|
3168
|
+
"start": 94,
|
|
3169
|
+
"end": 208
|
|
3180
3170
|
}
|
|
3181
3171
|
}
|
|
3182
3172
|
},
|
|
@@ -3187,8 +3177,8 @@
|
|
|
3187
3177
|
"name": "k-generate-color-variations",
|
|
3188
3178
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3189
3179
|
"line": {
|
|
3190
|
-
"start":
|
|
3191
|
-
"end":
|
|
3180
|
+
"start": 94,
|
|
3181
|
+
"end": 208
|
|
3192
3182
|
}
|
|
3193
3183
|
}
|
|
3194
3184
|
},
|
|
@@ -3199,8 +3189,8 @@
|
|
|
3199
3189
|
"name": "k-generate-color-variations",
|
|
3200
3190
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3201
3191
|
"line": {
|
|
3202
|
-
"start":
|
|
3203
|
-
"end":
|
|
3192
|
+
"start": 94,
|
|
3193
|
+
"end": 208
|
|
3204
3194
|
}
|
|
3205
3195
|
}
|
|
3206
3196
|
},
|
|
@@ -3211,8 +3201,8 @@
|
|
|
3211
3201
|
"name": "k-generate-color-variations",
|
|
3212
3202
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3213
3203
|
"line": {
|
|
3214
|
-
"start":
|
|
3215
|
-
"end":
|
|
3204
|
+
"start": 94,
|
|
3205
|
+
"end": 208
|
|
3216
3206
|
}
|
|
3217
3207
|
}
|
|
3218
3208
|
},
|
|
@@ -3223,8 +3213,8 @@
|
|
|
3223
3213
|
"name": "k-generate-color-variations",
|
|
3224
3214
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3225
3215
|
"line": {
|
|
3226
|
-
"start":
|
|
3227
|
-
"end":
|
|
3216
|
+
"start": 94,
|
|
3217
|
+
"end": 208
|
|
3228
3218
|
}
|
|
3229
3219
|
}
|
|
3230
3220
|
},
|
|
@@ -3235,8 +3225,8 @@
|
|
|
3235
3225
|
"name": "k-generate-color-variations",
|
|
3236
3226
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3237
3227
|
"line": {
|
|
3238
|
-
"start":
|
|
3239
|
-
"end":
|
|
3228
|
+
"start": 94,
|
|
3229
|
+
"end": 208
|
|
3240
3230
|
}
|
|
3241
3231
|
}
|
|
3242
3232
|
},
|
|
@@ -3247,8 +3237,8 @@
|
|
|
3247
3237
|
"name": "k-generate-color-variations",
|
|
3248
3238
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3249
3239
|
"line": {
|
|
3250
|
-
"start":
|
|
3251
|
-
"end":
|
|
3240
|
+
"start": 94,
|
|
3241
|
+
"end": 208
|
|
3252
3242
|
}
|
|
3253
3243
|
}
|
|
3254
3244
|
},
|
|
@@ -3259,8 +3249,8 @@
|
|
|
3259
3249
|
"name": "k-generate-color-variations",
|
|
3260
3250
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3261
3251
|
"line": {
|
|
3262
|
-
"start":
|
|
3263
|
-
"end":
|
|
3252
|
+
"start": 94,
|
|
3253
|
+
"end": 208
|
|
3264
3254
|
}
|
|
3265
3255
|
}
|
|
3266
3256
|
}
|
|
@@ -3323,8 +3313,8 @@
|
|
|
3323
3313
|
"name": "k-generate-color-variations",
|
|
3324
3314
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3325
3315
|
"line": {
|
|
3326
|
-
"start":
|
|
3327
|
-
"end":
|
|
3316
|
+
"start": 94,
|
|
3317
|
+
"end": 208
|
|
3328
3318
|
}
|
|
3329
3319
|
}
|
|
3330
3320
|
},
|
|
@@ -3335,8 +3325,8 @@
|
|
|
3335
3325
|
"name": "k-generate-color-variations",
|
|
3336
3326
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3337
3327
|
"line": {
|
|
3338
|
-
"start":
|
|
3339
|
-
"end":
|
|
3328
|
+
"start": 94,
|
|
3329
|
+
"end": 208
|
|
3340
3330
|
}
|
|
3341
3331
|
}
|
|
3342
3332
|
},
|
|
@@ -3347,8 +3337,8 @@
|
|
|
3347
3337
|
"name": "k-generate-color-variations",
|
|
3348
3338
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3349
3339
|
"line": {
|
|
3350
|
-
"start":
|
|
3351
|
-
"end":
|
|
3340
|
+
"start": 94,
|
|
3341
|
+
"end": 208
|
|
3352
3342
|
}
|
|
3353
3343
|
}
|
|
3354
3344
|
},
|
|
@@ -3359,8 +3349,8 @@
|
|
|
3359
3349
|
"name": "k-generate-color-variations",
|
|
3360
3350
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3361
3351
|
"line": {
|
|
3362
|
-
"start":
|
|
3363
|
-
"end":
|
|
3352
|
+
"start": 94,
|
|
3353
|
+
"end": 208
|
|
3364
3354
|
}
|
|
3365
3355
|
}
|
|
3366
3356
|
},
|
|
@@ -3371,8 +3361,8 @@
|
|
|
3371
3361
|
"name": "k-generate-color-variations",
|
|
3372
3362
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3373
3363
|
"line": {
|
|
3374
|
-
"start":
|
|
3375
|
-
"end":
|
|
3364
|
+
"start": 94,
|
|
3365
|
+
"end": 208
|
|
3376
3366
|
}
|
|
3377
3367
|
}
|
|
3378
3368
|
},
|
|
@@ -3383,8 +3373,8 @@
|
|
|
3383
3373
|
"name": "k-generate-color-variations",
|
|
3384
3374
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3385
3375
|
"line": {
|
|
3386
|
-
"start":
|
|
3387
|
-
"end":
|
|
3376
|
+
"start": 94,
|
|
3377
|
+
"end": 208
|
|
3388
3378
|
}
|
|
3389
3379
|
}
|
|
3390
3380
|
},
|
|
@@ -3395,8 +3385,8 @@
|
|
|
3395
3385
|
"name": "k-generate-color-variations",
|
|
3396
3386
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3397
3387
|
"line": {
|
|
3398
|
-
"start":
|
|
3399
|
-
"end":
|
|
3388
|
+
"start": 94,
|
|
3389
|
+
"end": 208
|
|
3400
3390
|
}
|
|
3401
3391
|
}
|
|
3402
3392
|
},
|
|
@@ -3407,8 +3397,8 @@
|
|
|
3407
3397
|
"name": "k-generate-color-variations",
|
|
3408
3398
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3409
3399
|
"line": {
|
|
3410
|
-
"start":
|
|
3411
|
-
"end":
|
|
3400
|
+
"start": 94,
|
|
3401
|
+
"end": 208
|
|
3412
3402
|
}
|
|
3413
3403
|
}
|
|
3414
3404
|
},
|
|
@@ -3419,8 +3409,8 @@
|
|
|
3419
3409
|
"name": "k-generate-color-variations",
|
|
3420
3410
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3421
3411
|
"line": {
|
|
3422
|
-
"start":
|
|
3423
|
-
"end":
|
|
3412
|
+
"start": 94,
|
|
3413
|
+
"end": 208
|
|
3424
3414
|
}
|
|
3425
3415
|
}
|
|
3426
3416
|
},
|
|
@@ -3431,8 +3421,8 @@
|
|
|
3431
3421
|
"name": "k-generate-color-variations",
|
|
3432
3422
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3433
3423
|
"line": {
|
|
3434
|
-
"start":
|
|
3435
|
-
"end":
|
|
3424
|
+
"start": 94,
|
|
3425
|
+
"end": 208
|
|
3436
3426
|
}
|
|
3437
3427
|
}
|
|
3438
3428
|
},
|
|
@@ -3443,8 +3433,8 @@
|
|
|
3443
3433
|
"name": "k-generate-color-variations",
|
|
3444
3434
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3445
3435
|
"line": {
|
|
3446
|
-
"start":
|
|
3447
|
-
"end":
|
|
3436
|
+
"start": 94,
|
|
3437
|
+
"end": 208
|
|
3448
3438
|
}
|
|
3449
3439
|
}
|
|
3450
3440
|
},
|
|
@@ -3455,8 +3445,8 @@
|
|
|
3455
3445
|
"name": "k-generate-color-variations",
|
|
3456
3446
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3457
3447
|
"line": {
|
|
3458
|
-
"start":
|
|
3459
|
-
"end":
|
|
3448
|
+
"start": 94,
|
|
3449
|
+
"end": 208
|
|
3460
3450
|
}
|
|
3461
3451
|
}
|
|
3462
3452
|
},
|
|
@@ -3467,8 +3457,8 @@
|
|
|
3467
3457
|
"name": "k-generate-color-variations",
|
|
3468
3458
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3469
3459
|
"line": {
|
|
3470
|
-
"start":
|
|
3471
|
-
"end":
|
|
3460
|
+
"start": 94,
|
|
3461
|
+
"end": 208
|
|
3472
3462
|
}
|
|
3473
3463
|
}
|
|
3474
3464
|
},
|
|
@@ -3479,8 +3469,8 @@
|
|
|
3479
3469
|
"name": "k-generate-color-variations",
|
|
3480
3470
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3481
3471
|
"line": {
|
|
3482
|
-
"start":
|
|
3483
|
-
"end":
|
|
3472
|
+
"start": 94,
|
|
3473
|
+
"end": 208
|
|
3484
3474
|
}
|
|
3485
3475
|
}
|
|
3486
3476
|
},
|
|
@@ -3491,8 +3481,8 @@
|
|
|
3491
3481
|
"name": "k-generate-color-variations",
|
|
3492
3482
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3493
3483
|
"line": {
|
|
3494
|
-
"start":
|
|
3495
|
-
"end":
|
|
3484
|
+
"start": 94,
|
|
3485
|
+
"end": 208
|
|
3496
3486
|
}
|
|
3497
3487
|
}
|
|
3498
3488
|
},
|
|
@@ -3503,8 +3493,8 @@
|
|
|
3503
3493
|
"name": "k-generate-color-variations",
|
|
3504
3494
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3505
3495
|
"line": {
|
|
3506
|
-
"start":
|
|
3507
|
-
"end":
|
|
3496
|
+
"start": 94,
|
|
3497
|
+
"end": 208
|
|
3508
3498
|
}
|
|
3509
3499
|
}
|
|
3510
3500
|
},
|
|
@@ -3515,8 +3505,8 @@
|
|
|
3515
3505
|
"name": "k-generate-color-variations",
|
|
3516
3506
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3517
3507
|
"line": {
|
|
3518
|
-
"start":
|
|
3519
|
-
"end":
|
|
3508
|
+
"start": 94,
|
|
3509
|
+
"end": 208
|
|
3520
3510
|
}
|
|
3521
3511
|
}
|
|
3522
3512
|
},
|
|
@@ -3527,8 +3517,8 @@
|
|
|
3527
3517
|
"name": "k-generate-color-variations",
|
|
3528
3518
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3529
3519
|
"line": {
|
|
3530
|
-
"start":
|
|
3531
|
-
"end":
|
|
3520
|
+
"start": 94,
|
|
3521
|
+
"end": 208
|
|
3532
3522
|
}
|
|
3533
3523
|
}
|
|
3534
3524
|
},
|
|
@@ -3539,8 +3529,8 @@
|
|
|
3539
3529
|
"name": "k-generate-color-variations",
|
|
3540
3530
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3541
3531
|
"line": {
|
|
3542
|
-
"start":
|
|
3543
|
-
"end":
|
|
3532
|
+
"start": 94,
|
|
3533
|
+
"end": 208
|
|
3544
3534
|
}
|
|
3545
3535
|
}
|
|
3546
3536
|
},
|
|
@@ -3551,8 +3541,8 @@
|
|
|
3551
3541
|
"name": "k-generate-color-variations",
|
|
3552
3542
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3553
3543
|
"line": {
|
|
3554
|
-
"start":
|
|
3555
|
-
"end":
|
|
3544
|
+
"start": 94,
|
|
3545
|
+
"end": 208
|
|
3556
3546
|
}
|
|
3557
3547
|
}
|
|
3558
3548
|
},
|
|
@@ -3563,8 +3553,8 @@
|
|
|
3563
3553
|
"name": "k-generate-color-variations",
|
|
3564
3554
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3565
3555
|
"line": {
|
|
3566
|
-
"start":
|
|
3567
|
-
"end":
|
|
3556
|
+
"start": 94,
|
|
3557
|
+
"end": 208
|
|
3568
3558
|
}
|
|
3569
3559
|
}
|
|
3570
3560
|
},
|
|
@@ -3575,8 +3565,8 @@
|
|
|
3575
3565
|
"name": "k-generate-color-variations",
|
|
3576
3566
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3577
3567
|
"line": {
|
|
3578
|
-
"start":
|
|
3579
|
-
"end":
|
|
3568
|
+
"start": 94,
|
|
3569
|
+
"end": 208
|
|
3580
3570
|
}
|
|
3581
3571
|
}
|
|
3582
3572
|
},
|
|
@@ -3587,8 +3577,8 @@
|
|
|
3587
3577
|
"name": "k-generate-color-variations",
|
|
3588
3578
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
3589
3579
|
"line": {
|
|
3590
|
-
"start":
|
|
3591
|
-
"end":
|
|
3580
|
+
"start": 94,
|
|
3581
|
+
"end": 208
|
|
3592
3582
|
}
|
|
3593
3583
|
}
|
|
3594
3584
|
}
|
|
@@ -4281,319 +4271,44 @@
|
|
|
4281
4271
|
}
|
|
4282
4272
|
},
|
|
4283
4273
|
{
|
|
4284
|
-
"description": "The
|
|
4285
|
-
"commentRange": {
|
|
4286
|
-
"start": 223,
|
|
4287
|
-
"end": 224
|
|
4288
|
-
},
|
|
4289
|
-
"context": {
|
|
4290
|
-
"type": "variable",
|
|
4291
|
-
"name": "kendo-palette-gray",
|
|
4292
|
-
"value": "$_default-palette-gray",
|
|
4293
|
-
"scope": "default",
|
|
4294
|
-
"line": {
|
|
4295
|
-
"start": 225,
|
|
4296
|
-
"end": 225
|
|
4297
|
-
}
|
|
4298
|
-
},
|
|
4299
|
-
"group": [
|
|
4300
|
-
"palette"
|
|
4301
|
-
],
|
|
4302
|
-
"access": "public",
|
|
4303
|
-
"file": {
|
|
4304
|
-
"path": "color-system/_palettes.scss",
|
|
4305
|
-
"name": "_palettes.scss"
|
|
4306
|
-
}
|
|
4307
|
-
},
|
|
4308
|
-
{
|
|
4309
|
-
"description": "The Coral Palette provides colors to the Primary and Series A variable groups.\n",
|
|
4310
|
-
"commentRange": {
|
|
4311
|
-
"start": 228,
|
|
4312
|
-
"end": 229
|
|
4313
|
-
},
|
|
4314
|
-
"context": {
|
|
4315
|
-
"type": "variable",
|
|
4316
|
-
"name": "kendo-palette-coral",
|
|
4317
|
-
"value": "$_default-palette-coral",
|
|
4318
|
-
"scope": "default",
|
|
4319
|
-
"line": {
|
|
4320
|
-
"start": 230,
|
|
4321
|
-
"end": 230
|
|
4322
|
-
}
|
|
4323
|
-
},
|
|
4324
|
-
"group": [
|
|
4325
|
-
"palette"
|
|
4326
|
-
],
|
|
4327
|
-
"access": "public",
|
|
4328
|
-
"file": {
|
|
4329
|
-
"path": "color-system/_palettes.scss",
|
|
4330
|
-
"name": "_palettes.scss"
|
|
4331
|
-
}
|
|
4332
|
-
},
|
|
4333
|
-
{
|
|
4334
|
-
"description": "The Sky Blue Palette provides colors to the Tertiary variable group.\n",
|
|
4335
|
-
"commentRange": {
|
|
4336
|
-
"start": 233,
|
|
4337
|
-
"end": 234
|
|
4338
|
-
},
|
|
4339
|
-
"context": {
|
|
4340
|
-
"type": "variable",
|
|
4341
|
-
"name": "kendo-palette-sky-blue",
|
|
4342
|
-
"value": "$_default-palette-sky-blue",
|
|
4343
|
-
"scope": "default",
|
|
4344
|
-
"line": {
|
|
4345
|
-
"start": 235,
|
|
4346
|
-
"end": 235
|
|
4347
|
-
}
|
|
4348
|
-
},
|
|
4349
|
-
"group": [
|
|
4350
|
-
"palette"
|
|
4351
|
-
],
|
|
4352
|
-
"access": "public",
|
|
4353
|
-
"file": {
|
|
4354
|
-
"path": "color-system/_palettes.scss",
|
|
4355
|
-
"name": "_palettes.scss"
|
|
4356
|
-
}
|
|
4357
|
-
},
|
|
4358
|
-
{
|
|
4359
|
-
"description": "The Green Palette provides colors to the Success variable group.\n",
|
|
4360
|
-
"commentRange": {
|
|
4361
|
-
"start": 238,
|
|
4362
|
-
"end": 239
|
|
4363
|
-
},
|
|
4364
|
-
"context": {
|
|
4365
|
-
"type": "variable",
|
|
4366
|
-
"name": "kendo-palette-green",
|
|
4367
|
-
"value": "$_default-palette-green",
|
|
4368
|
-
"scope": "default",
|
|
4369
|
-
"line": {
|
|
4370
|
-
"start": 240,
|
|
4371
|
-
"end": 240
|
|
4372
|
-
}
|
|
4373
|
-
},
|
|
4374
|
-
"group": [
|
|
4375
|
-
"palette"
|
|
4376
|
-
],
|
|
4377
|
-
"access": "public",
|
|
4378
|
-
"file": {
|
|
4379
|
-
"path": "color-system/_palettes.scss",
|
|
4380
|
-
"name": "_palettes.scss"
|
|
4381
|
-
}
|
|
4382
|
-
},
|
|
4383
|
-
{
|
|
4384
|
-
"description": "The Blue Palette provides colors to the Info variable group.\n",
|
|
4385
|
-
"commentRange": {
|
|
4386
|
-
"start": 243,
|
|
4387
|
-
"end": 244
|
|
4388
|
-
},
|
|
4389
|
-
"context": {
|
|
4390
|
-
"type": "variable",
|
|
4391
|
-
"name": "kendo-palette-blue",
|
|
4392
|
-
"value": "$_default-palette-blue",
|
|
4393
|
-
"scope": "default",
|
|
4394
|
-
"line": {
|
|
4395
|
-
"start": 245,
|
|
4396
|
-
"end": 245
|
|
4397
|
-
}
|
|
4398
|
-
},
|
|
4399
|
-
"group": [
|
|
4400
|
-
"palette"
|
|
4401
|
-
],
|
|
4402
|
-
"access": "public",
|
|
4403
|
-
"file": {
|
|
4404
|
-
"path": "color-system/_palettes.scss",
|
|
4405
|
-
"name": "_palettes.scss"
|
|
4406
|
-
}
|
|
4407
|
-
},
|
|
4408
|
-
{
|
|
4409
|
-
"description": "The Yellow Palette provides colors to the Warning variable group.\n",
|
|
4410
|
-
"commentRange": {
|
|
4411
|
-
"start": 248,
|
|
4412
|
-
"end": 249
|
|
4413
|
-
},
|
|
4414
|
-
"context": {
|
|
4415
|
-
"type": "variable",
|
|
4416
|
-
"name": "kendo-palette-yellow",
|
|
4417
|
-
"value": "$_default-palette-yellow",
|
|
4418
|
-
"scope": "default",
|
|
4419
|
-
"line": {
|
|
4420
|
-
"start": 250,
|
|
4421
|
-
"end": 250
|
|
4422
|
-
}
|
|
4423
|
-
},
|
|
4424
|
-
"group": [
|
|
4425
|
-
"palette"
|
|
4426
|
-
],
|
|
4427
|
-
"access": "public",
|
|
4428
|
-
"file": {
|
|
4429
|
-
"path": "color-system/_palettes.scss",
|
|
4430
|
-
"name": "_palettes.scss"
|
|
4431
|
-
}
|
|
4432
|
-
},
|
|
4433
|
-
{
|
|
4434
|
-
"description": "The Red Palette provides colors to the Error variable group.\n",
|
|
4435
|
-
"commentRange": {
|
|
4436
|
-
"start": 253,
|
|
4437
|
-
"end": 254
|
|
4438
|
-
},
|
|
4439
|
-
"context": {
|
|
4440
|
-
"type": "variable",
|
|
4441
|
-
"name": "kendo-palette-red",
|
|
4442
|
-
"value": "$_default-palette-red",
|
|
4443
|
-
"scope": "default",
|
|
4444
|
-
"line": {
|
|
4445
|
-
"start": 255,
|
|
4446
|
-
"end": 255
|
|
4447
|
-
}
|
|
4448
|
-
},
|
|
4449
|
-
"group": [
|
|
4450
|
-
"palette"
|
|
4451
|
-
],
|
|
4452
|
-
"access": "public",
|
|
4453
|
-
"file": {
|
|
4454
|
-
"path": "color-system/_palettes.scss",
|
|
4455
|
-
"name": "_palettes.scss"
|
|
4456
|
-
}
|
|
4457
|
-
},
|
|
4458
|
-
{
|
|
4459
|
-
"description": "The Lemon Yellow Palette provides colors to the Series B variable group.\n",
|
|
4460
|
-
"commentRange": {
|
|
4461
|
-
"start": 258,
|
|
4462
|
-
"end": 259
|
|
4463
|
-
},
|
|
4464
|
-
"context": {
|
|
4465
|
-
"type": "variable",
|
|
4466
|
-
"name": "kendo-palette-lemon-yellow",
|
|
4467
|
-
"value": "$_default-palette-lemon-yellow",
|
|
4468
|
-
"scope": "default",
|
|
4469
|
-
"line": {
|
|
4470
|
-
"start": 260,
|
|
4471
|
-
"end": 260
|
|
4472
|
-
}
|
|
4473
|
-
},
|
|
4474
|
-
"group": [
|
|
4475
|
-
"palette"
|
|
4476
|
-
],
|
|
4477
|
-
"access": "public",
|
|
4478
|
-
"file": {
|
|
4479
|
-
"path": "color-system/_palettes.scss",
|
|
4480
|
-
"name": "_palettes.scss"
|
|
4481
|
-
}
|
|
4482
|
-
},
|
|
4483
|
-
{
|
|
4484
|
-
"description": "The Spring Green Palette provides colors to the Series C variable group.\n",
|
|
4485
|
-
"commentRange": {
|
|
4486
|
-
"start": 263,
|
|
4487
|
-
"end": 264
|
|
4488
|
-
},
|
|
4489
|
-
"context": {
|
|
4490
|
-
"type": "variable",
|
|
4491
|
-
"name": "kendo-palette-spring-green",
|
|
4492
|
-
"value": "$_default-palette-spring-green",
|
|
4493
|
-
"scope": "default",
|
|
4494
|
-
"line": {
|
|
4495
|
-
"start": 265,
|
|
4496
|
-
"end": 265
|
|
4497
|
-
}
|
|
4498
|
-
},
|
|
4499
|
-
"group": [
|
|
4500
|
-
"palette"
|
|
4501
|
-
],
|
|
4502
|
-
"access": "public",
|
|
4503
|
-
"file": {
|
|
4504
|
-
"path": "color-system/_palettes.scss",
|
|
4505
|
-
"name": "_palettes.scss"
|
|
4506
|
-
}
|
|
4507
|
-
},
|
|
4508
|
-
{
|
|
4509
|
-
"description": "The Royal Blue Palette provides colors to the Series D variable group.\n",
|
|
4510
|
-
"commentRange": {
|
|
4511
|
-
"start": 268,
|
|
4512
|
-
"end": 269
|
|
4513
|
-
},
|
|
4514
|
-
"context": {
|
|
4515
|
-
"type": "variable",
|
|
4516
|
-
"name": "kendo-palette-royal-blue",
|
|
4517
|
-
"value": "$_default-palette-royal-blue",
|
|
4518
|
-
"scope": "default",
|
|
4519
|
-
"line": {
|
|
4520
|
-
"start": 270,
|
|
4521
|
-
"end": 270
|
|
4522
|
-
}
|
|
4523
|
-
},
|
|
4524
|
-
"group": [
|
|
4525
|
-
"palette"
|
|
4526
|
-
],
|
|
4527
|
-
"access": "public",
|
|
4528
|
-
"file": {
|
|
4529
|
-
"path": "color-system/_palettes.scss",
|
|
4530
|
-
"name": "_palettes.scss"
|
|
4531
|
-
}
|
|
4532
|
-
},
|
|
4533
|
-
{
|
|
4534
|
-
"description": "The Lavender Purple Palette provides colors to the Series E variable group.\n",
|
|
4535
|
-
"commentRange": {
|
|
4536
|
-
"start": 273,
|
|
4537
|
-
"end": 274
|
|
4538
|
-
},
|
|
4539
|
-
"context": {
|
|
4540
|
-
"type": "variable",
|
|
4541
|
-
"name": "kendo-palette-lavender-purple",
|
|
4542
|
-
"value": "$_default-palette-lavender-purple",
|
|
4543
|
-
"scope": "default",
|
|
4544
|
-
"line": {
|
|
4545
|
-
"start": 275,
|
|
4546
|
-
"end": 275
|
|
4547
|
-
}
|
|
4548
|
-
},
|
|
4549
|
-
"group": [
|
|
4550
|
-
"palette"
|
|
4551
|
-
],
|
|
4552
|
-
"access": "public",
|
|
4553
|
-
"file": {
|
|
4554
|
-
"path": "color-system/_palettes.scss",
|
|
4555
|
-
"name": "_palettes.scss"
|
|
4556
|
-
}
|
|
4557
|
-
},
|
|
4558
|
-
{
|
|
4559
|
-
"description": "The Flamingo Pink Palette provides colors to the Series F variable group.\n",
|
|
4274
|
+
"description": "The base border radius used across the Components.\n",
|
|
4560
4275
|
"commentRange": {
|
|
4561
|
-
"start":
|
|
4562
|
-
"end":
|
|
4276
|
+
"start": 3,
|
|
4277
|
+
"end": 4
|
|
4563
4278
|
},
|
|
4564
4279
|
"context": {
|
|
4565
4280
|
"type": "variable",
|
|
4566
|
-
"name": "kendo-
|
|
4567
|
-
"value": "
|
|
4281
|
+
"name": "kendo-border-radius-base",
|
|
4282
|
+
"value": ".25rem",
|
|
4568
4283
|
"scope": "default",
|
|
4569
4284
|
"line": {
|
|
4570
|
-
"start":
|
|
4571
|
-
"end":
|
|
4285
|
+
"start": 5,
|
|
4286
|
+
"end": 5
|
|
4572
4287
|
}
|
|
4573
4288
|
},
|
|
4574
4289
|
"group": [
|
|
4575
|
-
"
|
|
4290
|
+
"radii"
|
|
4576
4291
|
],
|
|
4577
4292
|
"access": "public",
|
|
4578
4293
|
"file": {
|
|
4579
|
-
"path": "
|
|
4580
|
-
"name": "
|
|
4294
|
+
"path": "border-radii/index.scss",
|
|
4295
|
+
"name": "index.scss"
|
|
4581
4296
|
}
|
|
4582
4297
|
},
|
|
4583
4298
|
{
|
|
4584
4299
|
"description": "The none border radius used across the Components.\n",
|
|
4585
4300
|
"commentRange": {
|
|
4586
|
-
"start":
|
|
4587
|
-
"end":
|
|
4301
|
+
"start": 7,
|
|
4302
|
+
"end": 8
|
|
4588
4303
|
},
|
|
4589
4304
|
"context": {
|
|
4590
4305
|
"type": "variable",
|
|
4591
4306
|
"name": "kendo-border-radius-none",
|
|
4592
|
-
"value": "
|
|
4307
|
+
"value": "0px",
|
|
4593
4308
|
"scope": "default",
|
|
4594
4309
|
"line": {
|
|
4595
|
-
"start":
|
|
4596
|
-
"end":
|
|
4310
|
+
"start": 9,
|
|
4311
|
+
"end": 9
|
|
4597
4312
|
}
|
|
4598
4313
|
},
|
|
4599
4314
|
"group": [
|
|
@@ -4608,17 +4323,17 @@
|
|
|
4608
4323
|
{
|
|
4609
4324
|
"description": "The extra small border radius used across the Components.\n",
|
|
4610
4325
|
"commentRange": {
|
|
4611
|
-
"start":
|
|
4612
|
-
"end":
|
|
4326
|
+
"start": 10,
|
|
4327
|
+
"end": 11
|
|
4613
4328
|
},
|
|
4614
4329
|
"context": {
|
|
4615
4330
|
"type": "variable",
|
|
4616
4331
|
"name": "kendo-border-radius-xs",
|
|
4617
|
-
"value": "
|
|
4332
|
+
"value": "calc(var(--kendo-border-radius-base) * .25)",
|
|
4618
4333
|
"scope": "default",
|
|
4619
4334
|
"line": {
|
|
4620
|
-
"start":
|
|
4621
|
-
"end":
|
|
4335
|
+
"start": 12,
|
|
4336
|
+
"end": 12
|
|
4622
4337
|
}
|
|
4623
4338
|
},
|
|
4624
4339
|
"group": [
|
|
@@ -4633,17 +4348,17 @@
|
|
|
4633
4348
|
{
|
|
4634
4349
|
"description": "The small border radius used across the Components.\n",
|
|
4635
4350
|
"commentRange": {
|
|
4636
|
-
"start":
|
|
4637
|
-
"end":
|
|
4351
|
+
"start": 13,
|
|
4352
|
+
"end": 14
|
|
4638
4353
|
},
|
|
4639
4354
|
"context": {
|
|
4640
4355
|
"type": "variable",
|
|
4641
4356
|
"name": "kendo-border-radius-sm",
|
|
4642
|
-
"value": "
|
|
4357
|
+
"value": "calc(var(--kendo-border-radius-base) * .5)",
|
|
4643
4358
|
"scope": "default",
|
|
4644
4359
|
"line": {
|
|
4645
|
-
"start":
|
|
4646
|
-
"end":
|
|
4360
|
+
"start": 15,
|
|
4361
|
+
"end": 15
|
|
4647
4362
|
}
|
|
4648
4363
|
},
|
|
4649
4364
|
"group": [
|
|
@@ -4658,17 +4373,17 @@
|
|
|
4658
4373
|
{
|
|
4659
4374
|
"description": "The medium border radius used across the Components.\n",
|
|
4660
4375
|
"commentRange": {
|
|
4661
|
-
"start":
|
|
4662
|
-
"end":
|
|
4376
|
+
"start": 16,
|
|
4377
|
+
"end": 17
|
|
4663
4378
|
},
|
|
4664
4379
|
"context": {
|
|
4665
4380
|
"type": "variable",
|
|
4666
4381
|
"name": "kendo-border-radius-md",
|
|
4667
|
-
"value": "
|
|
4382
|
+
"value": "var(--kendo-border-radius-base)",
|
|
4668
4383
|
"scope": "default",
|
|
4669
4384
|
"line": {
|
|
4670
|
-
"start":
|
|
4671
|
-
"end":
|
|
4385
|
+
"start": 18,
|
|
4386
|
+
"end": 18
|
|
4672
4387
|
}
|
|
4673
4388
|
},
|
|
4674
4389
|
"group": [
|
|
@@ -4683,17 +4398,17 @@
|
|
|
4683
4398
|
{
|
|
4684
4399
|
"description": "The large border radius used across the Components.\n",
|
|
4685
4400
|
"commentRange": {
|
|
4686
|
-
"start":
|
|
4687
|
-
"end":
|
|
4401
|
+
"start": 19,
|
|
4402
|
+
"end": 20
|
|
4688
4403
|
},
|
|
4689
4404
|
"context": {
|
|
4690
4405
|
"type": "variable",
|
|
4691
4406
|
"name": "kendo-border-radius-lg",
|
|
4692
|
-
"value": "
|
|
4407
|
+
"value": "calc(var(--kendo-border-radius-base) * 1.5)",
|
|
4693
4408
|
"scope": "default",
|
|
4694
4409
|
"line": {
|
|
4695
|
-
"start":
|
|
4696
|
-
"end":
|
|
4410
|
+
"start": 21,
|
|
4411
|
+
"end": 21
|
|
4697
4412
|
}
|
|
4698
4413
|
},
|
|
4699
4414
|
"group": [
|
|
@@ -4708,17 +4423,17 @@
|
|
|
4708
4423
|
{
|
|
4709
4424
|
"description": "The extra large border radius used across the Components.\n",
|
|
4710
4425
|
"commentRange": {
|
|
4711
|
-
"start":
|
|
4712
|
-
"end":
|
|
4426
|
+
"start": 22,
|
|
4427
|
+
"end": 23
|
|
4713
4428
|
},
|
|
4714
4429
|
"context": {
|
|
4715
4430
|
"type": "variable",
|
|
4716
4431
|
"name": "kendo-border-radius-xl",
|
|
4717
|
-
"value": "
|
|
4432
|
+
"value": "calc(var(--kendo-border-radius-base) * 2)",
|
|
4718
4433
|
"scope": "default",
|
|
4719
4434
|
"line": {
|
|
4720
|
-
"start":
|
|
4721
|
-
"end":
|
|
4435
|
+
"start": 24,
|
|
4436
|
+
"end": 24
|
|
4722
4437
|
}
|
|
4723
4438
|
},
|
|
4724
4439
|
"group": [
|
|
@@ -4733,17 +4448,17 @@
|
|
|
4733
4448
|
{
|
|
4734
4449
|
"description": "The third largest border radius used across the Components.\n",
|
|
4735
4450
|
"commentRange": {
|
|
4736
|
-
"start":
|
|
4737
|
-
"end":
|
|
4451
|
+
"start": 25,
|
|
4452
|
+
"end": 26
|
|
4738
4453
|
},
|
|
4739
4454
|
"context": {
|
|
4740
4455
|
"type": "variable",
|
|
4741
4456
|
"name": "kendo-border-radius-xxl",
|
|
4742
|
-
"value": "
|
|
4457
|
+
"value": "calc(var(--kendo-border-radius-base) * 3)",
|
|
4743
4458
|
"scope": "default",
|
|
4744
4459
|
"line": {
|
|
4745
|
-
"start":
|
|
4746
|
-
"end":
|
|
4460
|
+
"start": 27,
|
|
4461
|
+
"end": 27
|
|
4747
4462
|
}
|
|
4748
4463
|
},
|
|
4749
4464
|
"group": [
|
|
@@ -4758,17 +4473,17 @@
|
|
|
4758
4473
|
{
|
|
4759
4474
|
"description": "The second largest border radius used across the Components.\n",
|
|
4760
4475
|
"commentRange": {
|
|
4761
|
-
"start":
|
|
4762
|
-
"end":
|
|
4476
|
+
"start": 28,
|
|
4477
|
+
"end": 29
|
|
4763
4478
|
},
|
|
4764
4479
|
"context": {
|
|
4765
4480
|
"type": "variable",
|
|
4766
4481
|
"name": "kendo-border-radius-xxxl",
|
|
4767
|
-
"value": "
|
|
4482
|
+
"value": "calc(var(--kendo-border-radius-base) * 4)",
|
|
4768
4483
|
"scope": "default",
|
|
4769
4484
|
"line": {
|
|
4770
|
-
"start":
|
|
4771
|
-
"end":
|
|
4485
|
+
"start": 30,
|
|
4486
|
+
"end": 30
|
|
4772
4487
|
}
|
|
4773
4488
|
},
|
|
4774
4489
|
"group": [
|
|
@@ -4783,17 +4498,17 @@
|
|
|
4783
4498
|
{
|
|
4784
4499
|
"description": "The largest border radius used across the Components.\n",
|
|
4785
4500
|
"commentRange": {
|
|
4786
|
-
"start":
|
|
4787
|
-
"end":
|
|
4501
|
+
"start": 31,
|
|
4502
|
+
"end": 32
|
|
4788
4503
|
},
|
|
4789
4504
|
"context": {
|
|
4790
4505
|
"type": "variable",
|
|
4791
4506
|
"name": "kendo-border-radius-full",
|
|
4792
|
-
"value": "
|
|
4507
|
+
"value": "calc(var(--kendo-border-radius-base) * 9999)",
|
|
4793
4508
|
"scope": "default",
|
|
4794
4509
|
"line": {
|
|
4795
|
-
"start":
|
|
4796
|
-
"end":
|
|
4510
|
+
"start": 33,
|
|
4511
|
+
"end": 33
|
|
4797
4512
|
}
|
|
4798
4513
|
},
|
|
4799
4514
|
"group": [
|
|
@@ -4808,8 +4523,8 @@
|
|
|
4808
4523
|
{
|
|
4809
4524
|
"description": "The global radii Map.\n",
|
|
4810
4525
|
"commentRange": {
|
|
4811
|
-
"start":
|
|
4812
|
-
"end":
|
|
4526
|
+
"start": 49,
|
|
4527
|
+
"end": 50
|
|
4813
4528
|
},
|
|
4814
4529
|
"context": {
|
|
4815
4530
|
"type": "variable",
|
|
@@ -4817,8 +4532,8 @@
|
|
|
4817
4532
|
"value": "$default-border-radii",
|
|
4818
4533
|
"scope": "default",
|
|
4819
4534
|
"line": {
|
|
4820
|
-
"start":
|
|
4821
|
-
"end":
|
|
4535
|
+
"start": 51,
|
|
4536
|
+
"end": 51
|
|
4822
4537
|
}
|
|
4823
4538
|
},
|
|
4824
4539
|
"group": [
|
|
@@ -4930,11 +4645,36 @@
|
|
|
4930
4645
|
"name": "_variables.scss"
|
|
4931
4646
|
}
|
|
4932
4647
|
},
|
|
4648
|
+
{
|
|
4649
|
+
"description": "The base spacing step used to generate the Spacing map.\n",
|
|
4650
|
+
"commentRange": {
|
|
4651
|
+
"start": 4,
|
|
4652
|
+
"end": 5
|
|
4653
|
+
},
|
|
4654
|
+
"context": {
|
|
4655
|
+
"type": "variable",
|
|
4656
|
+
"name": "kendo-spacing-base",
|
|
4657
|
+
"value": "0.25rem",
|
|
4658
|
+
"scope": "default",
|
|
4659
|
+
"line": {
|
|
4660
|
+
"start": 6,
|
|
4661
|
+
"end": 6
|
|
4662
|
+
}
|
|
4663
|
+
},
|
|
4664
|
+
"group": [
|
|
4665
|
+
"spacing"
|
|
4666
|
+
],
|
|
4667
|
+
"access": "public",
|
|
4668
|
+
"file": {
|
|
4669
|
+
"path": "spacing/index.scss",
|
|
4670
|
+
"name": "index.scss"
|
|
4671
|
+
}
|
|
4672
|
+
},
|
|
4933
4673
|
{
|
|
4934
4674
|
"description": "The global default Spacing map.\n",
|
|
4935
4675
|
"commentRange": {
|
|
4936
|
-
"start":
|
|
4937
|
-
"end":
|
|
4676
|
+
"start": 45,
|
|
4677
|
+
"end": 46
|
|
4938
4678
|
},
|
|
4939
4679
|
"context": {
|
|
4940
4680
|
"type": "variable",
|
|
@@ -4942,8 +4682,8 @@
|
|
|
4942
4682
|
"value": "$default-spacing",
|
|
4943
4683
|
"scope": "default",
|
|
4944
4684
|
"line": {
|
|
4945
|
-
"start":
|
|
4946
|
-
"end":
|
|
4685
|
+
"start": 47,
|
|
4686
|
+
"end": 47
|
|
4947
4687
|
}
|
|
4948
4688
|
},
|
|
4949
4689
|
"group": [
|
|
@@ -5014,7 +4754,7 @@
|
|
|
5014
4754
|
"context": {
|
|
5015
4755
|
"type": "variable",
|
|
5016
4756
|
"name": "kendo-table-sizes",
|
|
5017
|
-
"value": "(\n sm: (\n font-size: var(
|
|
4757
|
+
"value": "(\n sm: (\n font-size: var(--kendo-font-size),\n line-height: var(--kendo-line-height),\n cell-padding-x: $kendo-table-sm-cell-padding-x,\n cell-padding-y: $kendo-table-sm-cell-padding-y\n ),\n md: (\n font-size: var(--kendo-font-size),\n line-height: var(--kendo-line-height),\n cell-padding-x: $kendo-table-md-cell-padding-x,\n cell-padding-y: $kendo-table-md-cell-padding-y\n ),\n lg: (\n font-size: var(--kendo-font-size),\n line-height: var(--kendo-line-height),\n cell-padding-x: $kendo-table-lg-cell-padding-x,\n cell-padding-y: $kendo-table-lg-cell-padding-y\n )\n)",
|
|
5018
4758
|
"scope": "default",
|
|
5019
4759
|
"line": {
|
|
5020
4760
|
"start": 24,
|
|
@@ -6577,8 +6317,8 @@
|
|
|
6577
6317
|
"name": "k-generate-color-variations",
|
|
6578
6318
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
6579
6319
|
"line": {
|
|
6580
|
-
"start":
|
|
6581
|
-
"end":
|
|
6320
|
+
"start": 94,
|
|
6321
|
+
"end": 208
|
|
6582
6322
|
}
|
|
6583
6323
|
}
|
|
6584
6324
|
},
|
|
@@ -6589,8 +6329,8 @@
|
|
|
6589
6329
|
"name": "k-generate-color-variations",
|
|
6590
6330
|
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
|
|
6591
6331
|
"line": {
|
|
6592
|
-
"start":
|
|
6593
|
-
"end":
|
|
6332
|
+
"start": 94,
|
|
6333
|
+
"end": 208
|
|
6594
6334
|
}
|
|
6595
6335
|
}
|
|
6596
6336
|
},
|