@progress/kendo-theme-core 10.1.0-dev.1 → 10.1.0-dev.3
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.
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
{
|
|
4
4
|
"description": "",
|
|
5
5
|
"commentRange": {
|
|
6
|
-
"start":
|
|
7
|
-
"end":
|
|
6
|
+
"start": 584,
|
|
7
|
+
"end": 588
|
|
8
8
|
},
|
|
9
9
|
"context": {
|
|
10
10
|
"type": "variable",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"value": "black",
|
|
13
13
|
"scope": "default",
|
|
14
14
|
"line": {
|
|
15
|
-
"start":
|
|
16
|
-
"end":
|
|
15
|
+
"start": 589,
|
|
16
|
+
"end": 589
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"link": [
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
{
|
|
40
40
|
"description": "Default light color for WCAG 2.0.\n",
|
|
41
41
|
"commentRange": {
|
|
42
|
-
"start":
|
|
43
|
-
"end":
|
|
42
|
+
"start": 590,
|
|
43
|
+
"end": 592
|
|
44
44
|
},
|
|
45
45
|
"context": {
|
|
46
46
|
"type": "variable",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
"value": "white",
|
|
49
49
|
"scope": "default",
|
|
50
50
|
"line": {
|
|
51
|
-
"start":
|
|
52
|
-
"end":
|
|
51
|
+
"start": 593,
|
|
52
|
+
"end": 593
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
55
|
"type": "Color",
|
|
@@ -1312,8 +1312,8 @@
|
|
|
1312
1312
|
"name": "k-color",
|
|
1313
1313
|
"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",
|
|
1314
1314
|
"line": {
|
|
1315
|
-
"start":
|
|
1316
|
-
"end":
|
|
1315
|
+
"start": 322,
|
|
1316
|
+
"end": 330
|
|
1317
1317
|
},
|
|
1318
1318
|
"signature": "k-color($key)"
|
|
1319
1319
|
}
|
|
@@ -3582,16 +3582,16 @@
|
|
|
3582
3582
|
{
|
|
3583
3583
|
"description": "Calculate the relative luminance for a color.\n",
|
|
3584
3584
|
"commentRange": {
|
|
3585
|
-
"start":
|
|
3586
|
-
"end":
|
|
3585
|
+
"start": 595,
|
|
3586
|
+
"end": 602
|
|
3587
3587
|
},
|
|
3588
3588
|
"context": {
|
|
3589
3589
|
"type": "function",
|
|
3590
3590
|
"name": "k-color-luminance",
|
|
3591
3591
|
"code": "\n $red: list.nth( $_linear-channel-values, k-color-red( $color ) + 1 );\n $green: list.nth( $_linear-channel-values, k-color-green( $color ) + 1 );\n $blue: list.nth( $_linear-channel-values, k-color-blue( $color ) + 1 );\n\n @return .2126 * $red + .7152 * $green + .0722 * $blue;\n",
|
|
3592
3592
|
"line": {
|
|
3593
|
-
"start":
|
|
3594
|
-
"end":
|
|
3593
|
+
"start": 603,
|
|
3594
|
+
"end": 609
|
|
3595
3595
|
},
|
|
3596
3596
|
"signature": "k-color-luminance($color)"
|
|
3597
3597
|
},
|
|
@@ -3639,8 +3639,8 @@
|
|
|
3639
3639
|
"name": "k-color-contrast-ratio",
|
|
3640
3640
|
"code": "\n $backLum: k-color-luminance( $background ) + .05;\n $foreLum: k-color-luminance( $foreground ) + .05;\n\n @return math.div( math.max( $backLum, $foreLum ), math.min( $backLum, $foreLum ) );\n",
|
|
3641
3641
|
"line": {
|
|
3642
|
-
"start":
|
|
3643
|
-
"end":
|
|
3642
|
+
"start": 620,
|
|
3643
|
+
"end": 625
|
|
3644
3644
|
},
|
|
3645
3645
|
"signature": "k-color-contrast-ratio($background, $foreground)"
|
|
3646
3646
|
}
|
|
@@ -3652,8 +3652,8 @@
|
|
|
3652
3652
|
"name": "k-color-contrast-ratio",
|
|
3653
3653
|
"code": "\n $backLum: k-color-luminance( $background ) + .05;\n $foreLum: k-color-luminance( $foreground ) + .05;\n\n @return math.div( math.max( $backLum, $foreLum ), math.min( $backLum, $foreLum ) );\n",
|
|
3654
3654
|
"line": {
|
|
3655
|
-
"start":
|
|
3656
|
-
"end":
|
|
3655
|
+
"start": 620,
|
|
3656
|
+
"end": 625
|
|
3657
3657
|
},
|
|
3658
3658
|
"signature": "k-color-contrast-ratio($background, $foreground)"
|
|
3659
3659
|
}
|
|
@@ -3665,8 +3665,8 @@
|
|
|
3665
3665
|
"name": "k-is-dark",
|
|
3666
3666
|
"code": "\n @return if( k-color-luminance( $color ) < .5, true, false );\n",
|
|
3667
3667
|
"line": {
|
|
3668
|
-
"start":
|
|
3669
|
-
"end":
|
|
3668
|
+
"start": 632,
|
|
3669
|
+
"end": 634
|
|
3670
3670
|
},
|
|
3671
3671
|
"signature": "k-is-dark($color)"
|
|
3672
3672
|
}
|
|
@@ -3678,8 +3678,8 @@
|
|
|
3678
3678
|
"name": "k-is-light",
|
|
3679
3679
|
"code": "\n @return if( k-color-luminance( $color ) < .5, false, true );\n",
|
|
3680
3680
|
"line": {
|
|
3681
|
-
"start":
|
|
3682
|
-
"end":
|
|
3681
|
+
"start": 641,
|
|
3682
|
+
"end": 643
|
|
3683
3683
|
},
|
|
3684
3684
|
"signature": "k-is-light($color)"
|
|
3685
3685
|
}
|
|
@@ -3697,16 +3697,16 @@
|
|
|
3697
3697
|
{
|
|
3698
3698
|
"description": "Calculates contrast ratio between two colors\n",
|
|
3699
3699
|
"commentRange": {
|
|
3700
|
-
"start":
|
|
3701
|
-
"end":
|
|
3700
|
+
"start": 611,
|
|
3701
|
+
"end": 619
|
|
3702
3702
|
},
|
|
3703
3703
|
"context": {
|
|
3704
3704
|
"type": "function",
|
|
3705
3705
|
"name": "k-color-contrast-ratio",
|
|
3706
3706
|
"code": "\n $backLum: k-color-luminance( $background ) + .05;\n $foreLum: k-color-luminance( $foreground ) + .05;\n\n @return math.div( math.max( $backLum, $foreLum ), math.min( $backLum, $foreLum ) );\n",
|
|
3707
3707
|
"line": {
|
|
3708
|
-
"start":
|
|
3709
|
-
"end":
|
|
3708
|
+
"start": 620,
|
|
3709
|
+
"end": 625
|
|
3710
3710
|
},
|
|
3711
3711
|
"signature": "k-color-contrast-ratio($background, $foreground)"
|
|
3712
3712
|
},
|
|
@@ -3750,8 +3750,8 @@
|
|
|
3750
3750
|
"name": "k-contrast-color",
|
|
3751
3751
|
"code": "\n $foregrounds: $light, $dark, #ffffff, #000000;\n $max-ratio: 0;\n $max-ratio-color: null;\n\n @each $color in $foregrounds {\n $contrast-ratio: k-color-contrast-ratio( $background, $color );\n\n @if ( $contrast-ratio > $min-ratio ) {\n @return $color;\n } @else if ( $contrast-ratio > $max-ratio ) {\n $max-ratio: $contrast-ratio;\n $max-ratio-color: $color;\n }\n }\n\n @warn \"Found no color leading to #{$min-ratio}:1 contrast ratio against #{$background}...\";\n\n @return $max-ratio-color;\n",
|
|
3752
3752
|
"line": {
|
|
3753
|
-
"start":
|
|
3754
|
-
"end":
|
|
3753
|
+
"start": 655,
|
|
3754
|
+
"end": 674
|
|
3755
3755
|
},
|
|
3756
3756
|
"signature": "k-contrast-color($background, $dark, $light, $min-ratio)"
|
|
3757
3757
|
}
|
|
@@ -3774,16 +3774,16 @@
|
|
|
3774
3774
|
{
|
|
3775
3775
|
"description": "Checks if a color is dark\n",
|
|
3776
3776
|
"commentRange": {
|
|
3777
|
-
"start":
|
|
3778
|
-
"end":
|
|
3777
|
+
"start": 627,
|
|
3778
|
+
"end": 631
|
|
3779
3779
|
},
|
|
3780
3780
|
"context": {
|
|
3781
3781
|
"type": "function",
|
|
3782
3782
|
"name": "k-is-dark",
|
|
3783
3783
|
"code": "\n @return if( k-color-luminance( $color ) < .5, true, false );\n",
|
|
3784
3784
|
"line": {
|
|
3785
|
-
"start":
|
|
3786
|
-
"end":
|
|
3785
|
+
"start": 632,
|
|
3786
|
+
"end": 634
|
|
3787
3787
|
},
|
|
3788
3788
|
"signature": "k-is-dark($color)"
|
|
3789
3789
|
},
|
|
@@ -3817,16 +3817,16 @@
|
|
|
3817
3817
|
{
|
|
3818
3818
|
"description": "Checks if a color is light\n",
|
|
3819
3819
|
"commentRange": {
|
|
3820
|
-
"start":
|
|
3821
|
-
"end":
|
|
3820
|
+
"start": 636,
|
|
3821
|
+
"end": 640
|
|
3822
3822
|
},
|
|
3823
3823
|
"context": {
|
|
3824
3824
|
"type": "function",
|
|
3825
3825
|
"name": "k-is-light",
|
|
3826
3826
|
"code": "\n @return if( k-color-luminance( $color ) < .5, false, true );\n",
|
|
3827
3827
|
"line": {
|
|
3828
|
-
"start":
|
|
3829
|
-
"end":
|
|
3828
|
+
"start": 641,
|
|
3829
|
+
"end": 643
|
|
3830
3830
|
},
|
|
3831
3831
|
"signature": "k-is-light($color)"
|
|
3832
3832
|
},
|
|
@@ -3860,16 +3860,16 @@
|
|
|
3860
3860
|
{
|
|
3861
3861
|
"description": "Calculates the contrast ratio between a background color and a foreground color.\nIf the contrast ratio is not high enough, it will return the color with the highest contrast ratio.\n",
|
|
3862
3862
|
"commentRange": {
|
|
3863
|
-
"start":
|
|
3864
|
-
"end":
|
|
3863
|
+
"start": 646,
|
|
3864
|
+
"end": 654
|
|
3865
3865
|
},
|
|
3866
3866
|
"context": {
|
|
3867
3867
|
"type": "function",
|
|
3868
3868
|
"name": "k-contrast-color",
|
|
3869
3869
|
"code": "\n $foregrounds: $light, $dark, #ffffff, #000000;\n $max-ratio: 0;\n $max-ratio-color: null;\n\n @each $color in $foregrounds {\n $contrast-ratio: k-color-contrast-ratio( $background, $color );\n\n @if ( $contrast-ratio > $min-ratio ) {\n @return $color;\n } @else if ( $contrast-ratio > $max-ratio ) {\n $max-ratio: $contrast-ratio;\n $max-ratio-color: $color;\n }\n }\n\n @warn \"Found no color leading to #{$min-ratio}:1 contrast ratio against #{$background}...\";\n\n @return $max-ratio-color;\n",
|
|
3870
3870
|
"line": {
|
|
3871
|
-
"start":
|
|
3872
|
-
"end":
|
|
3871
|
+
"start": 655,
|
|
3872
|
+
"end": 674
|
|
3873
3873
|
},
|
|
3874
3874
|
"signature": "k-contrast-color($background, $dark, $light, $min-ratio)"
|
|
3875
3875
|
},
|
|
@@ -3897,10 +3897,10 @@
|
|
|
3897
3897
|
"context": {
|
|
3898
3898
|
"type": "function",
|
|
3899
3899
|
"name": "k-generate-color-variations",
|
|
3900
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
3900
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
3901
3901
|
"line": {
|
|
3902
|
-
"start":
|
|
3903
|
-
"end":
|
|
3902
|
+
"start": 200,
|
|
3903
|
+
"end": 314
|
|
3904
3904
|
},
|
|
3905
3905
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
3906
3906
|
}
|
|
@@ -3933,16 +3933,16 @@
|
|
|
3933
3933
|
{
|
|
3934
3934
|
"description": "Generates all color variations of a given main color\n",
|
|
3935
3935
|
"commentRange": {
|
|
3936
|
-
"start":
|
|
3937
|
-
"end":
|
|
3936
|
+
"start": 193,
|
|
3937
|
+
"end": 199
|
|
3938
3938
|
},
|
|
3939
3939
|
"context": {
|
|
3940
3940
|
"type": "function",
|
|
3941
3941
|
"name": "k-generate-color-variations",
|
|
3942
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
3942
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
3943
3943
|
"line": {
|
|
3944
|
-
"start":
|
|
3945
|
-
"end":
|
|
3944
|
+
"start": 200,
|
|
3945
|
+
"end": 314
|
|
3946
3946
|
},
|
|
3947
3947
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
3948
3948
|
},
|
|
@@ -3955,22 +3955,6 @@
|
|
|
3955
3955
|
],
|
|
3956
3956
|
"access": "public",
|
|
3957
3957
|
"require": [
|
|
3958
|
-
{
|
|
3959
|
-
"type": "function",
|
|
3960
|
-
"name": "k-color-mix"
|
|
3961
|
-
},
|
|
3962
|
-
{
|
|
3963
|
-
"type": "function",
|
|
3964
|
-
"name": "k-color-mix"
|
|
3965
|
-
},
|
|
3966
|
-
{
|
|
3967
|
-
"type": "function",
|
|
3968
|
-
"name": "k-color-mix"
|
|
3969
|
-
},
|
|
3970
|
-
{
|
|
3971
|
-
"type": "function",
|
|
3972
|
-
"name": "k-color-mix"
|
|
3973
|
-
},
|
|
3974
3958
|
{
|
|
3975
3959
|
"type": "function",
|
|
3976
3960
|
"name": "k-try-shade"
|
|
@@ -4298,16 +4282,16 @@
|
|
|
4298
4282
|
{
|
|
4299
4283
|
"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",
|
|
4300
4284
|
"commentRange": {
|
|
4301
|
-
"start":
|
|
4302
|
-
"end":
|
|
4285
|
+
"start": 316,
|
|
4286
|
+
"end": 321
|
|
4303
4287
|
},
|
|
4304
4288
|
"context": {
|
|
4305
4289
|
"type": "function",
|
|
4306
4290
|
"name": "k-color",
|
|
4307
4291
|
"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",
|
|
4308
4292
|
"line": {
|
|
4309
|
-
"start":
|
|
4310
|
-
"end":
|
|
4293
|
+
"start": 322,
|
|
4294
|
+
"end": 330
|
|
4311
4295
|
},
|
|
4312
4296
|
"signature": "k-color($key)"
|
|
4313
4297
|
},
|
|
@@ -4344,16 +4328,16 @@
|
|
|
4344
4328
|
{
|
|
4345
4329
|
"description": "Makes a color lighter by mixing it with white\n",
|
|
4346
4330
|
"commentRange": {
|
|
4347
|
-
"start":
|
|
4348
|
-
"end":
|
|
4331
|
+
"start": 203,
|
|
4332
|
+
"end": 211
|
|
4349
4333
|
},
|
|
4350
4334
|
"context": {
|
|
4351
4335
|
"type": "function",
|
|
4352
4336
|
"name": "k-color-tint",
|
|
4353
4337
|
"code": "\n @return k-color-level( $color, -$level );\n",
|
|
4354
4338
|
"line": {
|
|
4355
|
-
"start":
|
|
4356
|
-
"end":
|
|
4339
|
+
"start": 212,
|
|
4340
|
+
"end": 214
|
|
4357
4341
|
},
|
|
4358
4342
|
"signature": "k-color-tint($color, $level)"
|
|
4359
4343
|
},
|
|
@@ -4378,8 +4362,8 @@
|
|
|
4378
4362
|
"name": "k-try-shade",
|
|
4379
4363
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-tint( $color, $level );\n }\n\n @return k-color-shade( $color, $level );\n",
|
|
4380
4364
|
"line": {
|
|
4381
|
-
"start":
|
|
4382
|
-
"end":
|
|
4365
|
+
"start": 235,
|
|
4366
|
+
"end": 243
|
|
4383
4367
|
},
|
|
4384
4368
|
"signature": "k-try-shade($color, $level)"
|
|
4385
4369
|
}
|
|
@@ -4391,8 +4375,8 @@
|
|
|
4391
4375
|
"name": "k-try-tint",
|
|
4392
4376
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-shade( $color, $level );\n }\n\n @return k-color-tint( $color, $level );\n",
|
|
4393
4377
|
"line": {
|
|
4394
|
-
"start":
|
|
4395
|
-
"end":
|
|
4378
|
+
"start": 251,
|
|
4379
|
+
"end": 259
|
|
4396
4380
|
},
|
|
4397
4381
|
"signature": "k-try-tint($color, $level)"
|
|
4398
4382
|
}
|
|
@@ -4421,16 +4405,16 @@
|
|
|
4421
4405
|
{
|
|
4422
4406
|
"description": "Makes a color darker by mixing it with black\n",
|
|
4423
4407
|
"commentRange": {
|
|
4424
|
-
"start":
|
|
4425
|
-
"end":
|
|
4408
|
+
"start": 216,
|
|
4409
|
+
"end": 224
|
|
4426
4410
|
},
|
|
4427
4411
|
"context": {
|
|
4428
4412
|
"type": "function",
|
|
4429
4413
|
"name": "k-color-shade",
|
|
4430
4414
|
"code": "\n @return k-color-level( $color, $level );\n",
|
|
4431
4415
|
"line": {
|
|
4432
|
-
"start":
|
|
4433
|
-
"end":
|
|
4416
|
+
"start": 225,
|
|
4417
|
+
"end": 227
|
|
4434
4418
|
},
|
|
4435
4419
|
"signature": "k-color-shade($color, $level)"
|
|
4436
4420
|
},
|
|
@@ -4455,8 +4439,8 @@
|
|
|
4455
4439
|
"name": "k-try-shade",
|
|
4456
4440
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-tint( $color, $level );\n }\n\n @return k-color-shade( $color, $level );\n",
|
|
4457
4441
|
"line": {
|
|
4458
|
-
"start":
|
|
4459
|
-
"end":
|
|
4442
|
+
"start": 235,
|
|
4443
|
+
"end": 243
|
|
4460
4444
|
},
|
|
4461
4445
|
"signature": "k-try-shade($color, $level)"
|
|
4462
4446
|
}
|
|
@@ -4468,8 +4452,8 @@
|
|
|
4468
4452
|
"name": "k-try-tint",
|
|
4469
4453
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-shade( $color, $level );\n }\n\n @return k-color-tint( $color, $level );\n",
|
|
4470
4454
|
"line": {
|
|
4471
|
-
"start":
|
|
4472
|
-
"end":
|
|
4455
|
+
"start": 251,
|
|
4456
|
+
"end": 259
|
|
4473
4457
|
},
|
|
4474
4458
|
"signature": "k-try-tint($color, $level)"
|
|
4475
4459
|
}
|
|
@@ -4498,16 +4482,16 @@
|
|
|
4498
4482
|
{
|
|
4499
4483
|
"description": "Shades the color in light themes and tints it in dark themes\n",
|
|
4500
4484
|
"commentRange": {
|
|
4501
|
-
"start":
|
|
4502
|
-
"end":
|
|
4485
|
+
"start": 229,
|
|
4486
|
+
"end": 234
|
|
4503
4487
|
},
|
|
4504
4488
|
"context": {
|
|
4505
4489
|
"type": "function",
|
|
4506
4490
|
"name": "k-try-shade",
|
|
4507
4491
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-tint( $color, $level );\n }\n\n @return k-color-shade( $color, $level );\n",
|
|
4508
4492
|
"line": {
|
|
4509
|
-
"start":
|
|
4510
|
-
"end":
|
|
4493
|
+
"start": 235,
|
|
4494
|
+
"end": 243
|
|
4511
4495
|
},
|
|
4512
4496
|
"signature": "k-try-shade($color, $level)"
|
|
4513
4497
|
},
|
|
@@ -4539,10 +4523,10 @@
|
|
|
4539
4523
|
"context": {
|
|
4540
4524
|
"type": "function",
|
|
4541
4525
|
"name": "k-generate-color-variations",
|
|
4542
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4526
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4543
4527
|
"line": {
|
|
4544
|
-
"start":
|
|
4545
|
-
"end":
|
|
4528
|
+
"start": 200,
|
|
4529
|
+
"end": 314
|
|
4546
4530
|
},
|
|
4547
4531
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4548
4532
|
}
|
|
@@ -4552,10 +4536,10 @@
|
|
|
4552
4536
|
"context": {
|
|
4553
4537
|
"type": "function",
|
|
4554
4538
|
"name": "k-generate-color-variations",
|
|
4555
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4539
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4556
4540
|
"line": {
|
|
4557
|
-
"start":
|
|
4558
|
-
"end":
|
|
4541
|
+
"start": 200,
|
|
4542
|
+
"end": 314
|
|
4559
4543
|
},
|
|
4560
4544
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4561
4545
|
}
|
|
@@ -4565,10 +4549,10 @@
|
|
|
4565
4549
|
"context": {
|
|
4566
4550
|
"type": "function",
|
|
4567
4551
|
"name": "k-generate-color-variations",
|
|
4568
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4552
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4569
4553
|
"line": {
|
|
4570
|
-
"start":
|
|
4571
|
-
"end":
|
|
4554
|
+
"start": 200,
|
|
4555
|
+
"end": 314
|
|
4572
4556
|
},
|
|
4573
4557
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4574
4558
|
}
|
|
@@ -4578,10 +4562,10 @@
|
|
|
4578
4562
|
"context": {
|
|
4579
4563
|
"type": "function",
|
|
4580
4564
|
"name": "k-generate-color-variations",
|
|
4581
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4565
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4582
4566
|
"line": {
|
|
4583
|
-
"start":
|
|
4584
|
-
"end":
|
|
4567
|
+
"start": 200,
|
|
4568
|
+
"end": 314
|
|
4585
4569
|
},
|
|
4586
4570
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4587
4571
|
}
|
|
@@ -4591,10 +4575,10 @@
|
|
|
4591
4575
|
"context": {
|
|
4592
4576
|
"type": "function",
|
|
4593
4577
|
"name": "k-generate-color-variations",
|
|
4594
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4578
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4595
4579
|
"line": {
|
|
4596
|
-
"start":
|
|
4597
|
-
"end":
|
|
4580
|
+
"start": 200,
|
|
4581
|
+
"end": 314
|
|
4598
4582
|
},
|
|
4599
4583
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4600
4584
|
}
|
|
@@ -4604,10 +4588,10 @@
|
|
|
4604
4588
|
"context": {
|
|
4605
4589
|
"type": "function",
|
|
4606
4590
|
"name": "k-generate-color-variations",
|
|
4607
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4591
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4608
4592
|
"line": {
|
|
4609
|
-
"start":
|
|
4610
|
-
"end":
|
|
4593
|
+
"start": 200,
|
|
4594
|
+
"end": 314
|
|
4611
4595
|
},
|
|
4612
4596
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4613
4597
|
}
|
|
@@ -4617,10 +4601,10 @@
|
|
|
4617
4601
|
"context": {
|
|
4618
4602
|
"type": "function",
|
|
4619
4603
|
"name": "k-generate-color-variations",
|
|
4620
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4604
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4621
4605
|
"line": {
|
|
4622
|
-
"start":
|
|
4623
|
-
"end":
|
|
4606
|
+
"start": 200,
|
|
4607
|
+
"end": 314
|
|
4624
4608
|
},
|
|
4625
4609
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4626
4610
|
}
|
|
@@ -4630,10 +4614,10 @@
|
|
|
4630
4614
|
"context": {
|
|
4631
4615
|
"type": "function",
|
|
4632
4616
|
"name": "k-generate-color-variations",
|
|
4633
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4617
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4634
4618
|
"line": {
|
|
4635
|
-
"start":
|
|
4636
|
-
"end":
|
|
4619
|
+
"start": 200,
|
|
4620
|
+
"end": 314
|
|
4637
4621
|
},
|
|
4638
4622
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4639
4623
|
}
|
|
@@ -4643,10 +4627,10 @@
|
|
|
4643
4627
|
"context": {
|
|
4644
4628
|
"type": "function",
|
|
4645
4629
|
"name": "k-generate-color-variations",
|
|
4646
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4630
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4647
4631
|
"line": {
|
|
4648
|
-
"start":
|
|
4649
|
-
"end":
|
|
4632
|
+
"start": 200,
|
|
4633
|
+
"end": 314
|
|
4650
4634
|
},
|
|
4651
4635
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4652
4636
|
}
|
|
@@ -4656,10 +4640,10 @@
|
|
|
4656
4640
|
"context": {
|
|
4657
4641
|
"type": "function",
|
|
4658
4642
|
"name": "k-generate-color-variations",
|
|
4659
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4643
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4660
4644
|
"line": {
|
|
4661
|
-
"start":
|
|
4662
|
-
"end":
|
|
4645
|
+
"start": 200,
|
|
4646
|
+
"end": 314
|
|
4663
4647
|
},
|
|
4664
4648
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4665
4649
|
}
|
|
@@ -4669,10 +4653,10 @@
|
|
|
4669
4653
|
"context": {
|
|
4670
4654
|
"type": "function",
|
|
4671
4655
|
"name": "k-generate-color-variations",
|
|
4672
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4656
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4673
4657
|
"line": {
|
|
4674
|
-
"start":
|
|
4675
|
-
"end":
|
|
4658
|
+
"start": 200,
|
|
4659
|
+
"end": 314
|
|
4676
4660
|
},
|
|
4677
4661
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4678
4662
|
}
|
|
@@ -4682,10 +4666,10 @@
|
|
|
4682
4666
|
"context": {
|
|
4683
4667
|
"type": "function",
|
|
4684
4668
|
"name": "k-generate-color-variations",
|
|
4685
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4669
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4686
4670
|
"line": {
|
|
4687
|
-
"start":
|
|
4688
|
-
"end":
|
|
4671
|
+
"start": 200,
|
|
4672
|
+
"end": 314
|
|
4689
4673
|
},
|
|
4690
4674
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4691
4675
|
}
|
|
@@ -4695,10 +4679,10 @@
|
|
|
4695
4679
|
"context": {
|
|
4696
4680
|
"type": "function",
|
|
4697
4681
|
"name": "k-generate-color-variations",
|
|
4698
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4682
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4699
4683
|
"line": {
|
|
4700
|
-
"start":
|
|
4701
|
-
"end":
|
|
4684
|
+
"start": 200,
|
|
4685
|
+
"end": 314
|
|
4702
4686
|
},
|
|
4703
4687
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4704
4688
|
}
|
|
@@ -4708,10 +4692,10 @@
|
|
|
4708
4692
|
"context": {
|
|
4709
4693
|
"type": "function",
|
|
4710
4694
|
"name": "k-generate-color-variations",
|
|
4711
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4695
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4712
4696
|
"line": {
|
|
4713
|
-
"start":
|
|
4714
|
-
"end":
|
|
4697
|
+
"start": 200,
|
|
4698
|
+
"end": 314
|
|
4715
4699
|
},
|
|
4716
4700
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4717
4701
|
}
|
|
@@ -4721,10 +4705,10 @@
|
|
|
4721
4705
|
"context": {
|
|
4722
4706
|
"type": "function",
|
|
4723
4707
|
"name": "k-generate-color-variations",
|
|
4724
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4708
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4725
4709
|
"line": {
|
|
4726
|
-
"start":
|
|
4727
|
-
"end":
|
|
4710
|
+
"start": 200,
|
|
4711
|
+
"end": 314
|
|
4728
4712
|
},
|
|
4729
4713
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4730
4714
|
}
|
|
@@ -4734,10 +4718,10 @@
|
|
|
4734
4718
|
"context": {
|
|
4735
4719
|
"type": "function",
|
|
4736
4720
|
"name": "k-generate-color-variations",
|
|
4737
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4721
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4738
4722
|
"line": {
|
|
4739
|
-
"start":
|
|
4740
|
-
"end":
|
|
4723
|
+
"start": 200,
|
|
4724
|
+
"end": 314
|
|
4741
4725
|
},
|
|
4742
4726
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4743
4727
|
}
|
|
@@ -4747,10 +4731,10 @@
|
|
|
4747
4731
|
"context": {
|
|
4748
4732
|
"type": "function",
|
|
4749
4733
|
"name": "k-generate-color-variations",
|
|
4750
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4734
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4751
4735
|
"line": {
|
|
4752
|
-
"start":
|
|
4753
|
-
"end":
|
|
4736
|
+
"start": 200,
|
|
4737
|
+
"end": 314
|
|
4754
4738
|
},
|
|
4755
4739
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4756
4740
|
}
|
|
@@ -4760,10 +4744,10 @@
|
|
|
4760
4744
|
"context": {
|
|
4761
4745
|
"type": "function",
|
|
4762
4746
|
"name": "k-generate-color-variations",
|
|
4763
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4747
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4764
4748
|
"line": {
|
|
4765
|
-
"start":
|
|
4766
|
-
"end":
|
|
4749
|
+
"start": 200,
|
|
4750
|
+
"end": 314
|
|
4767
4751
|
},
|
|
4768
4752
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4769
4753
|
}
|
|
@@ -4773,10 +4757,10 @@
|
|
|
4773
4757
|
"context": {
|
|
4774
4758
|
"type": "function",
|
|
4775
4759
|
"name": "k-generate-color-variations",
|
|
4776
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4760
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: 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",
|
|
4777
4761
|
"line": {
|
|
4778
|
-
"start":
|
|
4779
|
-
"end":
|
|
4762
|
+
"start": 200,
|
|
4763
|
+
"end": 314
|
|
4780
4764
|
},
|
|
4781
4765
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4782
4766
|
}
|
|
@@ -4786,10 +4770,10 @@
|
|
|
4786
4770
|
"context": {
|
|
4787
4771
|
"type": "function",
|
|
4788
4772
|
"name": "k-generate-color-variations",
|
|
4789
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4773
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4790
4774
|
"line": {
|
|
4791
|
-
"start":
|
|
4792
|
-
"end":
|
|
4775
|
+
"start": 200,
|
|
4776
|
+
"end": 314
|
|
4793
4777
|
},
|
|
4794
4778
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4795
4779
|
}
|
|
@@ -4799,10 +4783,10 @@
|
|
|
4799
4783
|
"context": {
|
|
4800
4784
|
"type": "function",
|
|
4801
4785
|
"name": "k-generate-color-variations",
|
|
4802
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4786
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4803
4787
|
"line": {
|
|
4804
|
-
"start":
|
|
4805
|
-
"end":
|
|
4788
|
+
"start": 200,
|
|
4789
|
+
"end": 314
|
|
4806
4790
|
},
|
|
4807
4791
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4808
4792
|
}
|
|
@@ -4812,10 +4796,10 @@
|
|
|
4812
4796
|
"context": {
|
|
4813
4797
|
"type": "function",
|
|
4814
4798
|
"name": "k-generate-color-variations",
|
|
4815
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4799
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4816
4800
|
"line": {
|
|
4817
|
-
"start":
|
|
4818
|
-
"end":
|
|
4801
|
+
"start": 200,
|
|
4802
|
+
"end": 314
|
|
4819
4803
|
},
|
|
4820
4804
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4821
4805
|
}
|
|
@@ -4825,10 +4809,10 @@
|
|
|
4825
4809
|
"context": {
|
|
4826
4810
|
"type": "function",
|
|
4827
4811
|
"name": "k-generate-color-variations",
|
|
4828
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4812
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: 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",
|
|
4829
4813
|
"line": {
|
|
4830
|
-
"start":
|
|
4831
|
-
"end":
|
|
4814
|
+
"start": 200,
|
|
4815
|
+
"end": 314
|
|
4832
4816
|
},
|
|
4833
4817
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4834
4818
|
}
|
|
@@ -4838,10 +4822,10 @@
|
|
|
4838
4822
|
"context": {
|
|
4839
4823
|
"type": "function",
|
|
4840
4824
|
"name": "k-generate-color-variations",
|
|
4841
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4825
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4842
4826
|
"line": {
|
|
4843
|
-
"start":
|
|
4844
|
-
"end":
|
|
4827
|
+
"start": 200,
|
|
4828
|
+
"end": 314
|
|
4845
4829
|
},
|
|
4846
4830
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4847
4831
|
}
|
|
@@ -4851,10 +4835,10 @@
|
|
|
4851
4835
|
"context": {
|
|
4852
4836
|
"type": "function",
|
|
4853
4837
|
"name": "k-generate-color-variations",
|
|
4854
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4838
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4855
4839
|
"line": {
|
|
4856
|
-
"start":
|
|
4857
|
-
"end":
|
|
4840
|
+
"start": 200,
|
|
4841
|
+
"end": 314
|
|
4858
4842
|
},
|
|
4859
4843
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4860
4844
|
}
|
|
@@ -4864,10 +4848,10 @@
|
|
|
4864
4848
|
"context": {
|
|
4865
4849
|
"type": "function",
|
|
4866
4850
|
"name": "k-generate-color-variations",
|
|
4867
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4851
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4868
4852
|
"line": {
|
|
4869
|
-
"start":
|
|
4870
|
-
"end":
|
|
4853
|
+
"start": 200,
|
|
4854
|
+
"end": 314
|
|
4871
4855
|
},
|
|
4872
4856
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4873
4857
|
}
|
|
@@ -4877,10 +4861,10 @@
|
|
|
4877
4861
|
"context": {
|
|
4878
4862
|
"type": "function",
|
|
4879
4863
|
"name": "k-generate-color-variations",
|
|
4880
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4864
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4881
4865
|
"line": {
|
|
4882
|
-
"start":
|
|
4883
|
-
"end":
|
|
4866
|
+
"start": 200,
|
|
4867
|
+
"end": 314
|
|
4884
4868
|
},
|
|
4885
4869
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4886
4870
|
}
|
|
@@ -4890,10 +4874,10 @@
|
|
|
4890
4874
|
"context": {
|
|
4891
4875
|
"type": "function",
|
|
4892
4876
|
"name": "k-generate-color-variations",
|
|
4893
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4877
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4894
4878
|
"line": {
|
|
4895
|
-
"start":
|
|
4896
|
-
"end":
|
|
4879
|
+
"start": 200,
|
|
4880
|
+
"end": 314
|
|
4897
4881
|
},
|
|
4898
4882
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4899
4883
|
}
|
|
@@ -4903,10 +4887,10 @@
|
|
|
4903
4887
|
"context": {
|
|
4904
4888
|
"type": "function",
|
|
4905
4889
|
"name": "k-generate-color-variations",
|
|
4906
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4890
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4907
4891
|
"line": {
|
|
4908
|
-
"start":
|
|
4909
|
-
"end":
|
|
4892
|
+
"start": 200,
|
|
4893
|
+
"end": 314
|
|
4910
4894
|
},
|
|
4911
4895
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4912
4896
|
}
|
|
@@ -4916,10 +4900,10 @@
|
|
|
4916
4900
|
"context": {
|
|
4917
4901
|
"type": "function",
|
|
4918
4902
|
"name": "k-generate-color-variations",
|
|
4919
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4903
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4920
4904
|
"line": {
|
|
4921
|
-
"start":
|
|
4922
|
-
"end":
|
|
4905
|
+
"start": 200,
|
|
4906
|
+
"end": 314
|
|
4923
4907
|
},
|
|
4924
4908
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4925
4909
|
}
|
|
@@ -4929,10 +4913,10 @@
|
|
|
4929
4913
|
"context": {
|
|
4930
4914
|
"type": "function",
|
|
4931
4915
|
"name": "k-generate-color-variations",
|
|
4932
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4916
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4933
4917
|
"line": {
|
|
4934
|
-
"start":
|
|
4935
|
-
"end":
|
|
4918
|
+
"start": 200,
|
|
4919
|
+
"end": 314
|
|
4936
4920
|
},
|
|
4937
4921
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4938
4922
|
}
|
|
@@ -4942,10 +4926,10 @@
|
|
|
4942
4926
|
"context": {
|
|
4943
4927
|
"type": "function",
|
|
4944
4928
|
"name": "k-generate-color-variations",
|
|
4945
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4929
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4946
4930
|
"line": {
|
|
4947
|
-
"start":
|
|
4948
|
-
"end":
|
|
4931
|
+
"start": 200,
|
|
4932
|
+
"end": 314
|
|
4949
4933
|
},
|
|
4950
4934
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4951
4935
|
}
|
|
@@ -4955,10 +4939,10 @@
|
|
|
4955
4939
|
"context": {
|
|
4956
4940
|
"type": "function",
|
|
4957
4941
|
"name": "k-generate-color-variations",
|
|
4958
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4942
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4959
4943
|
"line": {
|
|
4960
|
-
"start":
|
|
4961
|
-
"end":
|
|
4944
|
+
"start": 200,
|
|
4945
|
+
"end": 314
|
|
4962
4946
|
},
|
|
4963
4947
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4964
4948
|
}
|
|
@@ -4968,10 +4952,10 @@
|
|
|
4968
4952
|
"context": {
|
|
4969
4953
|
"type": "function",
|
|
4970
4954
|
"name": "k-generate-color-variations",
|
|
4971
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4955
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4972
4956
|
"line": {
|
|
4973
|
-
"start":
|
|
4974
|
-
"end":
|
|
4957
|
+
"start": 200,
|
|
4958
|
+
"end": 314
|
|
4975
4959
|
},
|
|
4976
4960
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4977
4961
|
}
|
|
@@ -4981,10 +4965,10 @@
|
|
|
4981
4965
|
"context": {
|
|
4982
4966
|
"type": "function",
|
|
4983
4967
|
"name": "k-generate-color-variations",
|
|
4984
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4968
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4985
4969
|
"line": {
|
|
4986
|
-
"start":
|
|
4987
|
-
"end":
|
|
4970
|
+
"start": 200,
|
|
4971
|
+
"end": 314
|
|
4988
4972
|
},
|
|
4989
4973
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
4990
4974
|
}
|
|
@@ -4994,10 +4978,10 @@
|
|
|
4994
4978
|
"context": {
|
|
4995
4979
|
"type": "function",
|
|
4996
4980
|
"name": "k-generate-color-variations",
|
|
4997
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4981
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
4998
4982
|
"line": {
|
|
4999
|
-
"start":
|
|
5000
|
-
"end":
|
|
4983
|
+
"start": 200,
|
|
4984
|
+
"end": 314
|
|
5001
4985
|
},
|
|
5002
4986
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5003
4987
|
}
|
|
@@ -5007,10 +4991,10 @@
|
|
|
5007
4991
|
"context": {
|
|
5008
4992
|
"type": "function",
|
|
5009
4993
|
"name": "k-generate-color-variations",
|
|
5010
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
4994
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5011
4995
|
"line": {
|
|
5012
|
-
"start":
|
|
5013
|
-
"end":
|
|
4996
|
+
"start": 200,
|
|
4997
|
+
"end": 314
|
|
5014
4998
|
},
|
|
5015
4999
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5016
5000
|
}
|
|
@@ -5020,10 +5004,10 @@
|
|
|
5020
5004
|
"context": {
|
|
5021
5005
|
"type": "function",
|
|
5022
5006
|
"name": "k-generate-color-variations",
|
|
5023
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5007
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5024
5008
|
"line": {
|
|
5025
|
-
"start":
|
|
5026
|
-
"end":
|
|
5009
|
+
"start": 200,
|
|
5010
|
+
"end": 314
|
|
5027
5011
|
},
|
|
5028
5012
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5029
5013
|
}
|
|
@@ -5033,10 +5017,10 @@
|
|
|
5033
5017
|
"context": {
|
|
5034
5018
|
"type": "function",
|
|
5035
5019
|
"name": "k-generate-color-variations",
|
|
5036
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5020
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5037
5021
|
"line": {
|
|
5038
|
-
"start":
|
|
5039
|
-
"end":
|
|
5022
|
+
"start": 200,
|
|
5023
|
+
"end": 314
|
|
5040
5024
|
},
|
|
5041
5025
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5042
5026
|
}
|
|
@@ -5046,10 +5030,10 @@
|
|
|
5046
5030
|
"context": {
|
|
5047
5031
|
"type": "function",
|
|
5048
5032
|
"name": "k-generate-color-variations",
|
|
5049
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5033
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5050
5034
|
"line": {
|
|
5051
|
-
"start":
|
|
5052
|
-
"end":
|
|
5035
|
+
"start": 200,
|
|
5036
|
+
"end": 314
|
|
5053
5037
|
},
|
|
5054
5038
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5055
5039
|
}
|
|
@@ -5059,10 +5043,10 @@
|
|
|
5059
5043
|
"context": {
|
|
5060
5044
|
"type": "function",
|
|
5061
5045
|
"name": "k-generate-color-variations",
|
|
5062
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5046
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5063
5047
|
"line": {
|
|
5064
|
-
"start":
|
|
5065
|
-
"end":
|
|
5048
|
+
"start": 200,
|
|
5049
|
+
"end": 314
|
|
5066
5050
|
},
|
|
5067
5051
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5068
5052
|
}
|
|
@@ -5072,10 +5056,10 @@
|
|
|
5072
5056
|
"context": {
|
|
5073
5057
|
"type": "function",
|
|
5074
5058
|
"name": "k-generate-color-variations",
|
|
5075
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5059
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5076
5060
|
"line": {
|
|
5077
|
-
"start":
|
|
5078
|
-
"end":
|
|
5061
|
+
"start": 200,
|
|
5062
|
+
"end": 314
|
|
5079
5063
|
},
|
|
5080
5064
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5081
5065
|
}
|
|
@@ -5085,10 +5069,10 @@
|
|
|
5085
5069
|
"context": {
|
|
5086
5070
|
"type": "function",
|
|
5087
5071
|
"name": "k-generate-color-variations",
|
|
5088
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5072
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5089
5073
|
"line": {
|
|
5090
|
-
"start":
|
|
5091
|
-
"end":
|
|
5074
|
+
"start": 200,
|
|
5075
|
+
"end": 314
|
|
5092
5076
|
},
|
|
5093
5077
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5094
5078
|
}
|
|
@@ -5098,10 +5082,10 @@
|
|
|
5098
5082
|
"context": {
|
|
5099
5083
|
"type": "function",
|
|
5100
5084
|
"name": "k-generate-color-variations",
|
|
5101
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5085
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5102
5086
|
"line": {
|
|
5103
|
-
"start":
|
|
5104
|
-
"end":
|
|
5087
|
+
"start": 200,
|
|
5088
|
+
"end": 314
|
|
5105
5089
|
},
|
|
5106
5090
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5107
5091
|
}
|
|
@@ -5111,10 +5095,10 @@
|
|
|
5111
5095
|
"context": {
|
|
5112
5096
|
"type": "function",
|
|
5113
5097
|
"name": "k-generate-color-variations",
|
|
5114
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5098
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5115
5099
|
"line": {
|
|
5116
|
-
"start":
|
|
5117
|
-
"end":
|
|
5100
|
+
"start": 200,
|
|
5101
|
+
"end": 314
|
|
5118
5102
|
},
|
|
5119
5103
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5120
5104
|
}
|
|
@@ -5124,10 +5108,10 @@
|
|
|
5124
5108
|
"context": {
|
|
5125
5109
|
"type": "function",
|
|
5126
5110
|
"name": "k-generate-color-variations",
|
|
5127
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5111
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5128
5112
|
"line": {
|
|
5129
|
-
"start":
|
|
5130
|
-
"end":
|
|
5113
|
+
"start": 200,
|
|
5114
|
+
"end": 314
|
|
5131
5115
|
},
|
|
5132
5116
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5133
5117
|
}
|
|
@@ -5137,10 +5121,10 @@
|
|
|
5137
5121
|
"context": {
|
|
5138
5122
|
"type": "function",
|
|
5139
5123
|
"name": "k-generate-color-variations",
|
|
5140
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5124
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5141
5125
|
"line": {
|
|
5142
|
-
"start":
|
|
5143
|
-
"end":
|
|
5126
|
+
"start": 200,
|
|
5127
|
+
"end": 314
|
|
5144
5128
|
},
|
|
5145
5129
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5146
5130
|
}
|
|
@@ -5150,10 +5134,10 @@
|
|
|
5150
5134
|
"context": {
|
|
5151
5135
|
"type": "function",
|
|
5152
5136
|
"name": "k-generate-color-variations",
|
|
5153
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5137
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5154
5138
|
"line": {
|
|
5155
|
-
"start":
|
|
5156
|
-
"end":
|
|
5139
|
+
"start": 200,
|
|
5140
|
+
"end": 314
|
|
5157
5141
|
},
|
|
5158
5142
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5159
5143
|
}
|
|
@@ -5163,10 +5147,10 @@
|
|
|
5163
5147
|
"context": {
|
|
5164
5148
|
"type": "function",
|
|
5165
5149
|
"name": "k-generate-color-variations",
|
|
5166
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5150
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5167
5151
|
"line": {
|
|
5168
|
-
"start":
|
|
5169
|
-
"end":
|
|
5152
|
+
"start": 200,
|
|
5153
|
+
"end": 314
|
|
5170
5154
|
},
|
|
5171
5155
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5172
5156
|
}
|
|
@@ -5189,16 +5173,16 @@
|
|
|
5189
5173
|
{
|
|
5190
5174
|
"description": "Tints the color in light themes and shades it in dark themes\n",
|
|
5191
5175
|
"commentRange": {
|
|
5192
|
-
"start":
|
|
5193
|
-
"end":
|
|
5176
|
+
"start": 245,
|
|
5177
|
+
"end": 250
|
|
5194
5178
|
},
|
|
5195
5179
|
"context": {
|
|
5196
5180
|
"type": "function",
|
|
5197
5181
|
"name": "k-try-tint",
|
|
5198
5182
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-shade( $color, $level );\n }\n\n @return k-color-tint( $color, $level );\n",
|
|
5199
5183
|
"line": {
|
|
5200
|
-
"start":
|
|
5201
|
-
"end":
|
|
5184
|
+
"start": 251,
|
|
5185
|
+
"end": 259
|
|
5202
5186
|
},
|
|
5203
5187
|
"signature": "k-try-tint($color, $level)"
|
|
5204
5188
|
},
|
|
@@ -5230,10 +5214,10 @@
|
|
|
5230
5214
|
"context": {
|
|
5231
5215
|
"type": "function",
|
|
5232
5216
|
"name": "k-generate-color-variations",
|
|
5233
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5217
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5234
5218
|
"line": {
|
|
5235
|
-
"start":
|
|
5236
|
-
"end":
|
|
5219
|
+
"start": 200,
|
|
5220
|
+
"end": 314
|
|
5237
5221
|
},
|
|
5238
5222
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5239
5223
|
}
|
|
@@ -5243,10 +5227,10 @@
|
|
|
5243
5227
|
"context": {
|
|
5244
5228
|
"type": "function",
|
|
5245
5229
|
"name": "k-generate-color-variations",
|
|
5246
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5230
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5247
5231
|
"line": {
|
|
5248
|
-
"start":
|
|
5249
|
-
"end":
|
|
5232
|
+
"start": 200,
|
|
5233
|
+
"end": 314
|
|
5250
5234
|
},
|
|
5251
5235
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5252
5236
|
}
|
|
@@ -5256,10 +5240,10 @@
|
|
|
5256
5240
|
"context": {
|
|
5257
5241
|
"type": "function",
|
|
5258
5242
|
"name": "k-generate-color-variations",
|
|
5259
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5243
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5260
5244
|
"line": {
|
|
5261
|
-
"start":
|
|
5262
|
-
"end":
|
|
5245
|
+
"start": 200,
|
|
5246
|
+
"end": 314
|
|
5263
5247
|
},
|
|
5264
5248
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5265
5249
|
}
|
|
@@ -5269,10 +5253,10 @@
|
|
|
5269
5253
|
"context": {
|
|
5270
5254
|
"type": "function",
|
|
5271
5255
|
"name": "k-generate-color-variations",
|
|
5272
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5256
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5273
5257
|
"line": {
|
|
5274
|
-
"start":
|
|
5275
|
-
"end":
|
|
5258
|
+
"start": 200,
|
|
5259
|
+
"end": 314
|
|
5276
5260
|
},
|
|
5277
5261
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5278
5262
|
}
|
|
@@ -5282,10 +5266,10 @@
|
|
|
5282
5266
|
"context": {
|
|
5283
5267
|
"type": "function",
|
|
5284
5268
|
"name": "k-generate-color-variations",
|
|
5285
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5269
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5286
5270
|
"line": {
|
|
5287
|
-
"start":
|
|
5288
|
-
"end":
|
|
5271
|
+
"start": 200,
|
|
5272
|
+
"end": 314
|
|
5289
5273
|
},
|
|
5290
5274
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5291
5275
|
}
|
|
@@ -5295,10 +5279,10 @@
|
|
|
5295
5279
|
"context": {
|
|
5296
5280
|
"type": "function",
|
|
5297
5281
|
"name": "k-generate-color-variations",
|
|
5298
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5282
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5299
5283
|
"line": {
|
|
5300
|
-
"start":
|
|
5301
|
-
"end":
|
|
5284
|
+
"start": 200,
|
|
5285
|
+
"end": 314
|
|
5302
5286
|
},
|
|
5303
5287
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5304
5288
|
}
|
|
@@ -5308,10 +5292,10 @@
|
|
|
5308
5292
|
"context": {
|
|
5309
5293
|
"type": "function",
|
|
5310
5294
|
"name": "k-generate-color-variations",
|
|
5311
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5295
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5312
5296
|
"line": {
|
|
5313
|
-
"start":
|
|
5314
|
-
"end":
|
|
5297
|
+
"start": 200,
|
|
5298
|
+
"end": 314
|
|
5315
5299
|
},
|
|
5316
5300
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5317
5301
|
}
|
|
@@ -5321,10 +5305,10 @@
|
|
|
5321
5305
|
"context": {
|
|
5322
5306
|
"type": "function",
|
|
5323
5307
|
"name": "k-generate-color-variations",
|
|
5324
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5308
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5325
5309
|
"line": {
|
|
5326
|
-
"start":
|
|
5327
|
-
"end":
|
|
5310
|
+
"start": 200,
|
|
5311
|
+
"end": 314
|
|
5328
5312
|
},
|
|
5329
5313
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5330
5314
|
}
|
|
@@ -5334,10 +5318,10 @@
|
|
|
5334
5318
|
"context": {
|
|
5335
5319
|
"type": "function",
|
|
5336
5320
|
"name": "k-generate-color-variations",
|
|
5337
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5321
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5338
5322
|
"line": {
|
|
5339
|
-
"start":
|
|
5340
|
-
"end":
|
|
5323
|
+
"start": 200,
|
|
5324
|
+
"end": 314
|
|
5341
5325
|
},
|
|
5342
5326
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5343
5327
|
}
|
|
@@ -5347,10 +5331,10 @@
|
|
|
5347
5331
|
"context": {
|
|
5348
5332
|
"type": "function",
|
|
5349
5333
|
"name": "k-generate-color-variations",
|
|
5350
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5334
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5351
5335
|
"line": {
|
|
5352
|
-
"start":
|
|
5353
|
-
"end":
|
|
5336
|
+
"start": 200,
|
|
5337
|
+
"end": 314
|
|
5354
5338
|
},
|
|
5355
5339
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5356
5340
|
}
|
|
@@ -5360,10 +5344,10 @@
|
|
|
5360
5344
|
"context": {
|
|
5361
5345
|
"type": "function",
|
|
5362
5346
|
"name": "k-generate-color-variations",
|
|
5363
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5347
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5364
5348
|
"line": {
|
|
5365
|
-
"start":
|
|
5366
|
-
"end":
|
|
5349
|
+
"start": 200,
|
|
5350
|
+
"end": 314
|
|
5367
5351
|
},
|
|
5368
5352
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5369
5353
|
}
|
|
@@ -5373,10 +5357,10 @@
|
|
|
5373
5357
|
"context": {
|
|
5374
5358
|
"type": "function",
|
|
5375
5359
|
"name": "k-generate-color-variations",
|
|
5376
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5360
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5377
5361
|
"line": {
|
|
5378
|
-
"start":
|
|
5379
|
-
"end":
|
|
5362
|
+
"start": 200,
|
|
5363
|
+
"end": 314
|
|
5380
5364
|
},
|
|
5381
5365
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5382
5366
|
}
|
|
@@ -5386,10 +5370,10 @@
|
|
|
5386
5370
|
"context": {
|
|
5387
5371
|
"type": "function",
|
|
5388
5372
|
"name": "k-generate-color-variations",
|
|
5389
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5373
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5390
5374
|
"line": {
|
|
5391
|
-
"start":
|
|
5392
|
-
"end":
|
|
5375
|
+
"start": 200,
|
|
5376
|
+
"end": 314
|
|
5393
5377
|
},
|
|
5394
5378
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5395
5379
|
}
|
|
@@ -5399,10 +5383,10 @@
|
|
|
5399
5383
|
"context": {
|
|
5400
5384
|
"type": "function",
|
|
5401
5385
|
"name": "k-generate-color-variations",
|
|
5402
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5386
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5403
5387
|
"line": {
|
|
5404
|
-
"start":
|
|
5405
|
-
"end":
|
|
5388
|
+
"start": 200,
|
|
5389
|
+
"end": 314
|
|
5406
5390
|
},
|
|
5407
5391
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5408
5392
|
}
|
|
@@ -5412,10 +5396,10 @@
|
|
|
5412
5396
|
"context": {
|
|
5413
5397
|
"type": "function",
|
|
5414
5398
|
"name": "k-generate-color-variations",
|
|
5415
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5399
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5416
5400
|
"line": {
|
|
5417
|
-
"start":
|
|
5418
|
-
"end":
|
|
5401
|
+
"start": 200,
|
|
5402
|
+
"end": 314
|
|
5419
5403
|
},
|
|
5420
5404
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5421
5405
|
}
|
|
@@ -5425,10 +5409,10 @@
|
|
|
5425
5409
|
"context": {
|
|
5426
5410
|
"type": "function",
|
|
5427
5411
|
"name": "k-generate-color-variations",
|
|
5428
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5412
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5429
5413
|
"line": {
|
|
5430
|
-
"start":
|
|
5431
|
-
"end":
|
|
5414
|
+
"start": 200,
|
|
5415
|
+
"end": 314
|
|
5432
5416
|
},
|
|
5433
5417
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5434
5418
|
}
|
|
@@ -5438,10 +5422,10 @@
|
|
|
5438
5422
|
"context": {
|
|
5439
5423
|
"type": "function",
|
|
5440
5424
|
"name": "k-generate-color-variations",
|
|
5441
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5425
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5442
5426
|
"line": {
|
|
5443
|
-
"start":
|
|
5444
|
-
"end":
|
|
5427
|
+
"start": 200,
|
|
5428
|
+
"end": 314
|
|
5445
5429
|
},
|
|
5446
5430
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5447
5431
|
}
|
|
@@ -5451,10 +5435,10 @@
|
|
|
5451
5435
|
"context": {
|
|
5452
5436
|
"type": "function",
|
|
5453
5437
|
"name": "k-generate-color-variations",
|
|
5454
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5438
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5455
5439
|
"line": {
|
|
5456
|
-
"start":
|
|
5457
|
-
"end":
|
|
5440
|
+
"start": 200,
|
|
5441
|
+
"end": 314
|
|
5458
5442
|
},
|
|
5459
5443
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5460
5444
|
}
|
|
@@ -5464,10 +5448,10 @@
|
|
|
5464
5448
|
"context": {
|
|
5465
5449
|
"type": "function",
|
|
5466
5450
|
"name": "k-generate-color-variations",
|
|
5467
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5451
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5468
5452
|
"line": {
|
|
5469
|
-
"start":
|
|
5470
|
-
"end":
|
|
5453
|
+
"start": 200,
|
|
5454
|
+
"end": 314
|
|
5471
5455
|
},
|
|
5472
5456
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5473
5457
|
}
|
|
@@ -5477,10 +5461,10 @@
|
|
|
5477
5461
|
"context": {
|
|
5478
5462
|
"type": "function",
|
|
5479
5463
|
"name": "k-generate-color-variations",
|
|
5480
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5464
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5481
5465
|
"line": {
|
|
5482
|
-
"start":
|
|
5483
|
-
"end":
|
|
5466
|
+
"start": 200,
|
|
5467
|
+
"end": 314
|
|
5484
5468
|
},
|
|
5485
5469
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5486
5470
|
}
|
|
@@ -5490,10 +5474,10 @@
|
|
|
5490
5474
|
"context": {
|
|
5491
5475
|
"type": "function",
|
|
5492
5476
|
"name": "k-generate-color-variations",
|
|
5493
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5477
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5494
5478
|
"line": {
|
|
5495
|
-
"start":
|
|
5496
|
-
"end":
|
|
5479
|
+
"start": 200,
|
|
5480
|
+
"end": 314
|
|
5497
5481
|
},
|
|
5498
5482
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5499
5483
|
}
|
|
@@ -5503,10 +5487,10 @@
|
|
|
5503
5487
|
"context": {
|
|
5504
5488
|
"type": "function",
|
|
5505
5489
|
"name": "k-generate-color-variations",
|
|
5506
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5490
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5507
5491
|
"line": {
|
|
5508
|
-
"start":
|
|
5509
|
-
"end":
|
|
5492
|
+
"start": 200,
|
|
5493
|
+
"end": 314
|
|
5510
5494
|
},
|
|
5511
5495
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5512
5496
|
}
|
|
@@ -5516,10 +5500,10 @@
|
|
|
5516
5500
|
"context": {
|
|
5517
5501
|
"type": "function",
|
|
5518
5502
|
"name": "k-generate-color-variations",
|
|
5519
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
5503
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
5520
5504
|
"line": {
|
|
5521
|
-
"start":
|
|
5522
|
-
"end":
|
|
5505
|
+
"start": 200,
|
|
5506
|
+
"end": 314
|
|
5523
5507
|
},
|
|
5524
5508
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
5525
5509
|
}
|
|
@@ -5542,16 +5526,16 @@
|
|
|
5542
5526
|
{
|
|
5543
5527
|
"description": "Darkens the color in light themes and lightens it in dark themes\n",
|
|
5544
5528
|
"commentRange": {
|
|
5545
|
-
"start":
|
|
5546
|
-
"end":
|
|
5529
|
+
"start": 261,
|
|
5530
|
+
"end": 266
|
|
5547
5531
|
},
|
|
5548
5532
|
"context": {
|
|
5549
5533
|
"type": "function",
|
|
5550
5534
|
"name": "k-try-darken",
|
|
5551
5535
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-lighten( $color, $amount );\n }\n @return k-color-darken( $color, $amount );\n",
|
|
5552
5536
|
"line": {
|
|
5553
|
-
"start":
|
|
5554
|
-
"end":
|
|
5537
|
+
"start": 267,
|
|
5538
|
+
"end": 274
|
|
5555
5539
|
},
|
|
5556
5540
|
"signature": "k-try-darken($color, $level)"
|
|
5557
5541
|
},
|
|
@@ -5594,16 +5578,16 @@
|
|
|
5594
5578
|
{
|
|
5595
5579
|
"description": "Lightens the color in light themes and darkens it in dark themes\n",
|
|
5596
5580
|
"commentRange": {
|
|
5597
|
-
"start":
|
|
5598
|
-
"end":
|
|
5581
|
+
"start": 276,
|
|
5582
|
+
"end": 281
|
|
5599
5583
|
},
|
|
5600
5584
|
"context": {
|
|
5601
5585
|
"type": "function",
|
|
5602
5586
|
"name": "k-try-lighten",
|
|
5603
5587
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-darken( $color, $amount );\n }\n @return k-color-lighten( $color, $amount );\n",
|
|
5604
5588
|
"line": {
|
|
5605
|
-
"start":
|
|
5606
|
-
"end":
|
|
5589
|
+
"start": 282,
|
|
5590
|
+
"end": 289
|
|
5607
5591
|
},
|
|
5608
5592
|
"signature": "k-try-lighten($color, $level)"
|
|
5609
5593
|
},
|
|
@@ -5646,16 +5630,16 @@
|
|
|
5646
5630
|
{
|
|
5647
5631
|
"description": "Converts a color with alpha to solid color mixed with a background color\n",
|
|
5648
5632
|
"commentRange": {
|
|
5649
|
-
"start":
|
|
5650
|
-
"end":
|
|
5633
|
+
"start": 291,
|
|
5634
|
+
"end": 299
|
|
5651
5635
|
},
|
|
5652
5636
|
"context": {
|
|
5653
5637
|
"type": "function",
|
|
5654
5638
|
"name": "k-rgba-to-mix",
|
|
5655
5639
|
"code": "\n $percent: k-color-alpha( $color ) * 100%;\n\n @return k-color-mix( rgba( $color, 1 ), $bg, $percent );\n",
|
|
5656
5640
|
"line": {
|
|
5657
|
-
"start":
|
|
5658
|
-
"end":
|
|
5641
|
+
"start": 300,
|
|
5642
|
+
"end": 304
|
|
5659
5643
|
},
|
|
5660
5644
|
"signature": "k-rgba-to-mix($color, $bg)"
|
|
5661
5645
|
},
|
|
@@ -5704,16 +5688,16 @@
|
|
|
5704
5688
|
{
|
|
5705
5689
|
"description": "Returns the alpha channel of a color.\n",
|
|
5706
5690
|
"commentRange": {
|
|
5707
|
-
"start":
|
|
5708
|
-
"end":
|
|
5691
|
+
"start": 10,
|
|
5692
|
+
"end": 16
|
|
5709
5693
|
},
|
|
5710
5694
|
"context": {
|
|
5711
5695
|
"type": "function",
|
|
5712
5696
|
"name": "k-color-alpha",
|
|
5713
|
-
"code": "\n @return alpha( $color );\n",
|
|
5697
|
+
"code": "\n @return color.alpha( $color );\n",
|
|
5714
5698
|
"line": {
|
|
5715
|
-
"start":
|
|
5716
|
-
"end":
|
|
5699
|
+
"start": 17,
|
|
5700
|
+
"end": 19
|
|
5717
5701
|
},
|
|
5718
5702
|
"signature": "k-color-alpha($color)"
|
|
5719
5703
|
},
|
|
@@ -5738,8 +5722,8 @@
|
|
|
5738
5722
|
"name": "k-rgba-to-mix",
|
|
5739
5723
|
"code": "\n $percent: k-color-alpha( $color ) * 100%;\n\n @return k-color-mix( rgba( $color, 1 ), $bg, $percent );\n",
|
|
5740
5724
|
"line": {
|
|
5741
|
-
"start":
|
|
5742
|
-
"end":
|
|
5725
|
+
"start": 300,
|
|
5726
|
+
"end": 304
|
|
5743
5727
|
},
|
|
5744
5728
|
"signature": "k-rgba-to-mix($color, $bg)"
|
|
5745
5729
|
}
|
|
@@ -5763,16 +5747,16 @@
|
|
|
5763
5747
|
{
|
|
5764
5748
|
"description": "Returns the red channel of a color.\n",
|
|
5765
5749
|
"commentRange": {
|
|
5766
|
-
"start":
|
|
5767
|
-
"end":
|
|
5750
|
+
"start": 21,
|
|
5751
|
+
"end": 26
|
|
5768
5752
|
},
|
|
5769
5753
|
"context": {
|
|
5770
5754
|
"type": "function",
|
|
5771
5755
|
"name": "k-color-red",
|
|
5772
|
-
"code": "\n @return
|
|
5756
|
+
"code": "\n @return math.round(color.channel( $color, \"red\" ));\n",
|
|
5773
5757
|
"line": {
|
|
5774
|
-
"start":
|
|
5775
|
-
"end":
|
|
5758
|
+
"start": 27,
|
|
5759
|
+
"end": 29
|
|
5776
5760
|
},
|
|
5777
5761
|
"signature": "k-color-red($color)"
|
|
5778
5762
|
},
|
|
@@ -5797,8 +5781,8 @@
|
|
|
5797
5781
|
"name": "k-color-luminance",
|
|
5798
5782
|
"code": "\n $red: list.nth( $_linear-channel-values, k-color-red( $color ) + 1 );\n $green: list.nth( $_linear-channel-values, k-color-green( $color ) + 1 );\n $blue: list.nth( $_linear-channel-values, k-color-blue( $color ) + 1 );\n\n @return .2126 * $red + .7152 * $green + .0722 * $blue;\n",
|
|
5799
5783
|
"line": {
|
|
5800
|
-
"start":
|
|
5801
|
-
"end":
|
|
5784
|
+
"start": 603,
|
|
5785
|
+
"end": 609
|
|
5802
5786
|
},
|
|
5803
5787
|
"signature": "k-color-luminance($color)"
|
|
5804
5788
|
}
|
|
@@ -5822,16 +5806,16 @@
|
|
|
5822
5806
|
{
|
|
5823
5807
|
"description": "Returns the green channel of a color.\n",
|
|
5824
5808
|
"commentRange": {
|
|
5825
|
-
"start":
|
|
5826
|
-
"end":
|
|
5809
|
+
"start": 31,
|
|
5810
|
+
"end": 36
|
|
5827
5811
|
},
|
|
5828
5812
|
"context": {
|
|
5829
5813
|
"type": "function",
|
|
5830
5814
|
"name": "k-color-green",
|
|
5831
|
-
"code": "\n @return
|
|
5815
|
+
"code": "\n @return math.round(color.channel( $color, \"green\" ));\n",
|
|
5832
5816
|
"line": {
|
|
5833
|
-
"start":
|
|
5834
|
-
"end":
|
|
5817
|
+
"start": 37,
|
|
5818
|
+
"end": 39
|
|
5835
5819
|
},
|
|
5836
5820
|
"signature": "k-color-green($color)"
|
|
5837
5821
|
},
|
|
@@ -5856,8 +5840,8 @@
|
|
|
5856
5840
|
"name": "k-color-luminance",
|
|
5857
5841
|
"code": "\n $red: list.nth( $_linear-channel-values, k-color-red( $color ) + 1 );\n $green: list.nth( $_linear-channel-values, k-color-green( $color ) + 1 );\n $blue: list.nth( $_linear-channel-values, k-color-blue( $color ) + 1 );\n\n @return .2126 * $red + .7152 * $green + .0722 * $blue;\n",
|
|
5858
5842
|
"line": {
|
|
5859
|
-
"start":
|
|
5860
|
-
"end":
|
|
5843
|
+
"start": 603,
|
|
5844
|
+
"end": 609
|
|
5861
5845
|
},
|
|
5862
5846
|
"signature": "k-color-luminance($color)"
|
|
5863
5847
|
}
|
|
@@ -5881,16 +5865,16 @@
|
|
|
5881
5865
|
{
|
|
5882
5866
|
"description": "Returns the blue channel of a color.\n",
|
|
5883
5867
|
"commentRange": {
|
|
5884
|
-
"start":
|
|
5885
|
-
"end":
|
|
5868
|
+
"start": 41,
|
|
5869
|
+
"end": 46
|
|
5886
5870
|
},
|
|
5887
5871
|
"context": {
|
|
5888
5872
|
"type": "function",
|
|
5889
5873
|
"name": "k-color-blue",
|
|
5890
|
-
"code": "\n @return
|
|
5874
|
+
"code": "\n @return math.round(color.channel( $color, \"blue\" ));\n",
|
|
5891
5875
|
"line": {
|
|
5892
|
-
"start":
|
|
5893
|
-
"end":
|
|
5876
|
+
"start": 47,
|
|
5877
|
+
"end": 49
|
|
5894
5878
|
},
|
|
5895
5879
|
"signature": "k-color-blue($color)"
|
|
5896
5880
|
},
|
|
@@ -5915,8 +5899,8 @@
|
|
|
5915
5899
|
"name": "k-color-luminance",
|
|
5916
5900
|
"code": "\n $red: list.nth( $_linear-channel-values, k-color-red( $color ) + 1 );\n $green: list.nth( $_linear-channel-values, k-color-green( $color ) + 1 );\n $blue: list.nth( $_linear-channel-values, k-color-blue( $color ) + 1 );\n\n @return .2126 * $red + .7152 * $green + .0722 * $blue;\n",
|
|
5917
5901
|
"line": {
|
|
5918
|
-
"start":
|
|
5919
|
-
"end":
|
|
5902
|
+
"start": 603,
|
|
5903
|
+
"end": 609
|
|
5920
5904
|
},
|
|
5921
5905
|
"signature": "k-color-luminance($color)"
|
|
5922
5906
|
}
|
|
@@ -5940,16 +5924,16 @@
|
|
|
5940
5924
|
{
|
|
5941
5925
|
"description": "Returns the hue of a color.\n",
|
|
5942
5926
|
"commentRange": {
|
|
5943
|
-
"start":
|
|
5944
|
-
"end":
|
|
5927
|
+
"start": 51,
|
|
5928
|
+
"end": 56
|
|
5945
5929
|
},
|
|
5946
5930
|
"context": {
|
|
5947
5931
|
"type": "function",
|
|
5948
5932
|
"name": "k-color-hue",
|
|
5949
|
-
"code": "\n @return
|
|
5933
|
+
"code": "\n @return color.channel( $color, \"hue\" );\n",
|
|
5950
5934
|
"line": {
|
|
5951
|
-
"start":
|
|
5952
|
-
"end":
|
|
5935
|
+
"start": 57,
|
|
5936
|
+
"end": 59
|
|
5953
5937
|
},
|
|
5954
5938
|
"signature": "k-color-hue($color)"
|
|
5955
5939
|
},
|
|
@@ -5984,16 +5968,16 @@
|
|
|
5984
5968
|
{
|
|
5985
5969
|
"description": "Returns the saturation of a color.\n",
|
|
5986
5970
|
"commentRange": {
|
|
5987
|
-
"start":
|
|
5988
|
-
"end":
|
|
5971
|
+
"start": 61,
|
|
5972
|
+
"end": 66
|
|
5989
5973
|
},
|
|
5990
5974
|
"context": {
|
|
5991
5975
|
"type": "function",
|
|
5992
5976
|
"name": "k-color-saturation",
|
|
5993
|
-
"code": "\n @return
|
|
5977
|
+
"code": "\n @return color.channel( $color, \"saturation\" );\n",
|
|
5994
5978
|
"line": {
|
|
5995
|
-
"start":
|
|
5996
|
-
"end":
|
|
5979
|
+
"start": 67,
|
|
5980
|
+
"end": 69
|
|
5997
5981
|
},
|
|
5998
5982
|
"signature": "k-color-saturation($color)"
|
|
5999
5983
|
},
|
|
@@ -6028,16 +6012,16 @@
|
|
|
6028
6012
|
{
|
|
6029
6013
|
"description": "Returns the lightness of a color.\n",
|
|
6030
6014
|
"commentRange": {
|
|
6031
|
-
"start":
|
|
6032
|
-
"end":
|
|
6015
|
+
"start": 71,
|
|
6016
|
+
"end": 76
|
|
6033
6017
|
},
|
|
6034
6018
|
"context": {
|
|
6035
6019
|
"type": "function",
|
|
6036
6020
|
"name": "k-color-lightness",
|
|
6037
|
-
"code": "\n @return
|
|
6021
|
+
"code": "\n @return color.channel( $color, \"lightness\" );\n",
|
|
6038
6022
|
"line": {
|
|
6039
|
-
"start":
|
|
6040
|
-
"end":
|
|
6023
|
+
"start": 77,
|
|
6024
|
+
"end": 79
|
|
6041
6025
|
},
|
|
6042
6026
|
"signature": "k-color-lightness($color)"
|
|
6043
6027
|
},
|
|
@@ -6072,16 +6056,16 @@
|
|
|
6072
6056
|
{
|
|
6073
6057
|
"description": "Returns a color that is a mix of two colors.\n",
|
|
6074
6058
|
"commentRange": {
|
|
6075
|
-
"start":
|
|
6076
|
-
"end":
|
|
6059
|
+
"start": 81,
|
|
6060
|
+
"end": 88
|
|
6077
6061
|
},
|
|
6078
6062
|
"context": {
|
|
6079
6063
|
"type": "function",
|
|
6080
6064
|
"name": "k-color-mix",
|
|
6081
|
-
"code": "\n @return mix( $color1, $color2, $weight );\n",
|
|
6065
|
+
"code": "\n @return color.mix( $color1, $color2, $weight );\n",
|
|
6082
6066
|
"line": {
|
|
6083
|
-
"start":
|
|
6084
|
-
"end":
|
|
6067
|
+
"start": 89,
|
|
6068
|
+
"end": 91
|
|
6085
6069
|
},
|
|
6086
6070
|
"signature": "k-color-mix($color1, $color2, $weight)"
|
|
6087
6071
|
},
|
|
@@ -6099,58 +6083,6 @@
|
|
|
6099
6083
|
"name": "_color.import.scss"
|
|
6100
6084
|
},
|
|
6101
6085
|
"usedBy": [
|
|
6102
|
-
{
|
|
6103
|
-
"description": "Generates all color variations of a given main color\n",
|
|
6104
|
-
"context": {
|
|
6105
|
-
"type": "function",
|
|
6106
|
-
"name": "k-generate-color-variations",
|
|
6107
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-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",
|
|
6108
|
-
"line": {
|
|
6109
|
-
"start": 199,
|
|
6110
|
-
"end": 313
|
|
6111
|
-
},
|
|
6112
|
-
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
6113
|
-
}
|
|
6114
|
-
},
|
|
6115
|
-
{
|
|
6116
|
-
"description": "Generates all color variations of a given main color\n",
|
|
6117
|
-
"context": {
|
|
6118
|
-
"type": "function",
|
|
6119
|
-
"name": "k-generate-color-variations",
|
|
6120
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-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",
|
|
6121
|
-
"line": {
|
|
6122
|
-
"start": 199,
|
|
6123
|
-
"end": 313
|
|
6124
|
-
},
|
|
6125
|
-
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
6126
|
-
}
|
|
6127
|
-
},
|
|
6128
|
-
{
|
|
6129
|
-
"description": "Generates all color variations of a given main color\n",
|
|
6130
|
-
"context": {
|
|
6131
|
-
"type": "function",
|
|
6132
|
-
"name": "k-generate-color-variations",
|
|
6133
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-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",
|
|
6134
|
-
"line": {
|
|
6135
|
-
"start": 199,
|
|
6136
|
-
"end": 313
|
|
6137
|
-
},
|
|
6138
|
-
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
6139
|
-
}
|
|
6140
|
-
},
|
|
6141
|
-
{
|
|
6142
|
-
"description": "Generates all color variations of a given main color\n",
|
|
6143
|
-
"context": {
|
|
6144
|
-
"type": "function",
|
|
6145
|
-
"name": "k-generate-color-variations",
|
|
6146
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: k-color-mix(black, $color, 25%),\n #{$name}-bolder: k-color-mix(black, $color, 50%),\n #{$name}-subtle: k-color-mix(white, $color, 25%),\n #{$name}-subtler: k-color-mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-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",
|
|
6147
|
-
"line": {
|
|
6148
|
-
"start": 199,
|
|
6149
|
-
"end": 313
|
|
6150
|
-
},
|
|
6151
|
-
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
6152
|
-
}
|
|
6153
|
-
},
|
|
6154
6086
|
{
|
|
6155
6087
|
"description": "Converts a color with alpha to solid color mixed with a background color\n",
|
|
6156
6088
|
"context": {
|
|
@@ -6158,8 +6090,8 @@
|
|
|
6158
6090
|
"name": "k-rgba-to-mix",
|
|
6159
6091
|
"code": "\n $percent: k-color-alpha( $color ) * 100%;\n\n @return k-color-mix( rgba( $color, 1 ), $bg, $percent );\n",
|
|
6160
6092
|
"line": {
|
|
6161
|
-
"start":
|
|
6162
|
-
"end":
|
|
6093
|
+
"start": 300,
|
|
6094
|
+
"end": 304
|
|
6163
6095
|
},
|
|
6164
6096
|
"signature": "k-rgba-to-mix($color, $bg)"
|
|
6165
6097
|
}
|
|
@@ -6193,16 +6125,16 @@
|
|
|
6193
6125
|
{
|
|
6194
6126
|
"description": "Makes a color darker by decreasing its lightness.\n",
|
|
6195
6127
|
"commentRange": {
|
|
6196
|
-
"start":
|
|
6197
|
-
"end":
|
|
6128
|
+
"start": 93,
|
|
6129
|
+
"end": 99
|
|
6198
6130
|
},
|
|
6199
6131
|
"context": {
|
|
6200
6132
|
"type": "function",
|
|
6201
6133
|
"name": "k-color-darken",
|
|
6202
|
-
"code": "\n @return
|
|
6134
|
+
"code": "\n @return color.adjust( $color, $lightness: - $amount );\n",
|
|
6203
6135
|
"line": {
|
|
6204
|
-
"start":
|
|
6205
|
-
"end":
|
|
6136
|
+
"start": 100,
|
|
6137
|
+
"end": 102
|
|
6206
6138
|
},
|
|
6207
6139
|
"signature": "k-color-darken($color, $amount)"
|
|
6208
6140
|
},
|
|
@@ -6225,10 +6157,10 @@
|
|
|
6225
6157
|
"context": {
|
|
6226
6158
|
"type": "function",
|
|
6227
6159
|
"name": "k-generate-color-variations",
|
|
6228
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
6160
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
6229
6161
|
"line": {
|
|
6230
|
-
"start":
|
|
6231
|
-
"end":
|
|
6162
|
+
"start": 200,
|
|
6163
|
+
"end": 314
|
|
6232
6164
|
},
|
|
6233
6165
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
6234
6166
|
}
|
|
@@ -6238,10 +6170,10 @@
|
|
|
6238
6170
|
"context": {
|
|
6239
6171
|
"type": "function",
|
|
6240
6172
|
"name": "k-generate-color-variations",
|
|
6241
|
-
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold:
|
|
6173
|
+
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' 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",
|
|
6242
6174
|
"line": {
|
|
6243
|
-
"start":
|
|
6244
|
-
"end":
|
|
6175
|
+
"start": 200,
|
|
6176
|
+
"end": 314
|
|
6245
6177
|
},
|
|
6246
6178
|
"signature": "k-generate-color-variations($name, $color, $theme)"
|
|
6247
6179
|
}
|
|
@@ -6253,8 +6185,8 @@
|
|
|
6253
6185
|
"name": "k-try-darken",
|
|
6254
6186
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-lighten( $color, $amount );\n }\n @return k-color-darken( $color, $amount );\n",
|
|
6255
6187
|
"line": {
|
|
6256
|
-
"start":
|
|
6257
|
-
"end":
|
|
6188
|
+
"start": 267,
|
|
6189
|
+
"end": 274
|
|
6258
6190
|
},
|
|
6259
6191
|
"signature": "k-try-darken($color, $level)"
|
|
6260
6192
|
}
|
|
@@ -6266,8 +6198,8 @@
|
|
|
6266
6198
|
"name": "k-try-lighten",
|
|
6267
6199
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-darken( $color, $amount );\n }\n @return k-color-lighten( $color, $amount );\n",
|
|
6268
6200
|
"line": {
|
|
6269
|
-
"start":
|
|
6270
|
-
"end":
|
|
6201
|
+
"start": 282,
|
|
6202
|
+
"end": 289
|
|
6271
6203
|
},
|
|
6272
6204
|
"signature": "k-try-lighten($color, $level)"
|
|
6273
6205
|
}
|
|
@@ -6296,16 +6228,16 @@
|
|
|
6296
6228
|
{
|
|
6297
6229
|
"description": "Makes a color lighter by increasing its lightness.\n",
|
|
6298
6230
|
"commentRange": {
|
|
6299
|
-
"start":
|
|
6300
|
-
"end":
|
|
6231
|
+
"start": 104,
|
|
6232
|
+
"end": 110
|
|
6301
6233
|
},
|
|
6302
6234
|
"context": {
|
|
6303
6235
|
"type": "function",
|
|
6304
6236
|
"name": "k-color-lighten",
|
|
6305
|
-
"code": "\n @return
|
|
6237
|
+
"code": "\n @return color.adjust( $color, $lightness: $amount );\n",
|
|
6306
6238
|
"line": {
|
|
6307
|
-
"start":
|
|
6308
|
-
"end":
|
|
6239
|
+
"start": 111,
|
|
6240
|
+
"end": 113
|
|
6309
6241
|
},
|
|
6310
6242
|
"signature": "k-color-lighten($color, $amount)"
|
|
6311
6243
|
},
|
|
@@ -6330,8 +6262,8 @@
|
|
|
6330
6262
|
"name": "k-try-darken",
|
|
6331
6263
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-lighten( $color, $amount );\n }\n @return k-color-darken( $color, $amount );\n",
|
|
6332
6264
|
"line": {
|
|
6333
|
-
"start":
|
|
6334
|
-
"end":
|
|
6265
|
+
"start": 267,
|
|
6266
|
+
"end": 274
|
|
6335
6267
|
},
|
|
6336
6268
|
"signature": "k-try-darken($color, $level)"
|
|
6337
6269
|
}
|
|
@@ -6343,8 +6275,8 @@
|
|
|
6343
6275
|
"name": "k-try-lighten",
|
|
6344
6276
|
"code": "\n $_dark-theme: if( meta.variable-exists( kendo-is-dark-theme ), $_is-dark-theme, false );\n\n @if $_dark-theme {\n @return k-color-darken( $color, $amount );\n }\n @return k-color-lighten( $color, $amount );\n",
|
|
6345
6277
|
"line": {
|
|
6346
|
-
"start":
|
|
6347
|
-
"end":
|
|
6278
|
+
"start": 282,
|
|
6279
|
+
"end": 289
|
|
6348
6280
|
},
|
|
6349
6281
|
"signature": "k-try-lighten($color, $level)"
|
|
6350
6282
|
}
|
|
@@ -6373,16 +6305,16 @@
|
|
|
6373
6305
|
{
|
|
6374
6306
|
"description": "Increases or decreases the hue of a color.\n",
|
|
6375
6307
|
"commentRange": {
|
|
6376
|
-
"start":
|
|
6377
|
-
"end":
|
|
6308
|
+
"start": 115,
|
|
6309
|
+
"end": 121
|
|
6378
6310
|
},
|
|
6379
6311
|
"context": {
|
|
6380
6312
|
"type": "function",
|
|
6381
6313
|
"name": "k-color-adjust-hue",
|
|
6382
|
-
"code": "\n @return adjust
|
|
6314
|
+
"code": "\n @return color.adjust( $color, $hue: $degrees );\n",
|
|
6383
6315
|
"line": {
|
|
6384
|
-
"start":
|
|
6385
|
-
"end":
|
|
6316
|
+
"start": 122,
|
|
6317
|
+
"end": 124
|
|
6386
6318
|
},
|
|
6387
6319
|
"signature": "k-color-adjust-hue($color, $degrees)"
|
|
6388
6320
|
},
|
|
@@ -6422,16 +6354,16 @@
|
|
|
6422
6354
|
{
|
|
6423
6355
|
"description": "Increases the saturation of a color.\n",
|
|
6424
6356
|
"commentRange": {
|
|
6425
|
-
"start":
|
|
6426
|
-
"end":
|
|
6357
|
+
"start": 126,
|
|
6358
|
+
"end": 132
|
|
6427
6359
|
},
|
|
6428
6360
|
"context": {
|
|
6429
6361
|
"type": "function",
|
|
6430
6362
|
"name": "k-color-saturate",
|
|
6431
|
-
"code": "\n @return
|
|
6363
|
+
"code": "\n @return color.adjust( $color, $saturation: $amount );\n",
|
|
6432
6364
|
"line": {
|
|
6433
|
-
"start":
|
|
6434
|
-
"end":
|
|
6365
|
+
"start": 133,
|
|
6366
|
+
"end": 135
|
|
6435
6367
|
},
|
|
6436
6368
|
"signature": "k-color-saturate($color, $amount)"
|
|
6437
6369
|
},
|
|
@@ -6471,16 +6403,16 @@
|
|
|
6471
6403
|
{
|
|
6472
6404
|
"description": "Decreases the saturation of a color.\n",
|
|
6473
6405
|
"commentRange": {
|
|
6474
|
-
"start":
|
|
6475
|
-
"end":
|
|
6406
|
+
"start": 137,
|
|
6407
|
+
"end": 143
|
|
6476
6408
|
},
|
|
6477
6409
|
"context": {
|
|
6478
6410
|
"type": "function",
|
|
6479
6411
|
"name": "k-color-desaturate",
|
|
6480
|
-
"code": "\n @return
|
|
6412
|
+
"code": "\n @return color.adjust( $color, $saturation: - $amount );\n",
|
|
6481
6413
|
"line": {
|
|
6482
|
-
"start":
|
|
6483
|
-
"end":
|
|
6414
|
+
"start": 144,
|
|
6415
|
+
"end": 146
|
|
6484
6416
|
},
|
|
6485
6417
|
"signature": "k-color-desaturate($color, $amount)"
|
|
6486
6418
|
},
|
|
@@ -6520,16 +6452,16 @@
|
|
|
6520
6452
|
{
|
|
6521
6453
|
"description": "Returns a gray color with the same lightness as the input color.\n",
|
|
6522
6454
|
"commentRange": {
|
|
6523
|
-
"start":
|
|
6524
|
-
"end":
|
|
6455
|
+
"start": 148,
|
|
6456
|
+
"end": 153
|
|
6525
6457
|
},
|
|
6526
6458
|
"context": {
|
|
6527
6459
|
"type": "function",
|
|
6528
6460
|
"name": "k-color-grayscale",
|
|
6529
|
-
"code": "\n @return grayscale( $color );\n",
|
|
6461
|
+
"code": "\n @return color.grayscale( $color );\n",
|
|
6530
6462
|
"line": {
|
|
6531
|
-
"start":
|
|
6532
|
-
"end":
|
|
6463
|
+
"start": 154,
|
|
6464
|
+
"end": 156
|
|
6533
6465
|
},
|
|
6534
6466
|
"signature": "k-color-grayscale($color)"
|
|
6535
6467
|
},
|
|
@@ -6564,16 +6496,16 @@
|
|
|
6564
6496
|
{
|
|
6565
6497
|
"description": "Returns the RGB complement of a color. This identical to adjusting the hue\nby 180 degrees.\n",
|
|
6566
6498
|
"commentRange": {
|
|
6567
|
-
"start":
|
|
6568
|
-
"end":
|
|
6499
|
+
"start": 158,
|
|
6500
|
+
"end": 164
|
|
6569
6501
|
},
|
|
6570
6502
|
"context": {
|
|
6571
6503
|
"type": "function",
|
|
6572
6504
|
"name": "k-color-complement",
|
|
6573
|
-
"code": "\n @return complement( $color );\n",
|
|
6505
|
+
"code": "\n @return color.complement( $color );\n",
|
|
6574
6506
|
"line": {
|
|
6575
|
-
"start":
|
|
6576
|
-
"end":
|
|
6507
|
+
"start": 165,
|
|
6508
|
+
"end": 167
|
|
6577
6509
|
},
|
|
6578
6510
|
"signature": "k-color-complement($color)"
|
|
6579
6511
|
},
|
|
@@ -6608,16 +6540,16 @@
|
|
|
6608
6540
|
{
|
|
6609
6541
|
"description": "Returns the inverse of a color.\n",
|
|
6610
6542
|
"commentRange": {
|
|
6611
|
-
"start":
|
|
6612
|
-
"end":
|
|
6543
|
+
"start": 169,
|
|
6544
|
+
"end": 174
|
|
6613
6545
|
},
|
|
6614
6546
|
"context": {
|
|
6615
6547
|
"type": "function",
|
|
6616
6548
|
"name": "k-color-invert",
|
|
6617
|
-
"code": "\n @return invert( $color );\n",
|
|
6549
|
+
"code": "\n @return color.invert( $color );\n",
|
|
6618
6550
|
"line": {
|
|
6619
|
-
"start":
|
|
6620
|
-
"end":
|
|
6551
|
+
"start": 175,
|
|
6552
|
+
"end": 177
|
|
6621
6553
|
},
|
|
6622
6554
|
"signature": "k-color-invert($color)"
|
|
6623
6555
|
},
|
|
@@ -10929,8 +10861,8 @@
|
|
|
10929
10861
|
{
|
|
10930
10862
|
"description": "",
|
|
10931
10863
|
"commentRange": {
|
|
10932
|
-
"start":
|
|
10933
|
-
"end":
|
|
10864
|
+
"start": 584,
|
|
10865
|
+
"end": 588
|
|
10934
10866
|
},
|
|
10935
10867
|
"context": {
|
|
10936
10868
|
"type": "variable",
|
|
@@ -10938,8 +10870,8 @@
|
|
|
10938
10870
|
"value": "black",
|
|
10939
10871
|
"scope": "default",
|
|
10940
10872
|
"line": {
|
|
10941
|
-
"start":
|
|
10942
|
-
"end":
|
|
10873
|
+
"start": 589,
|
|
10874
|
+
"end": 589
|
|
10943
10875
|
}
|
|
10944
10876
|
},
|
|
10945
10877
|
"link": [
|
|
@@ -10965,8 +10897,8 @@
|
|
|
10965
10897
|
{
|
|
10966
10898
|
"description": "Default light color for WCAG 2.0.\n",
|
|
10967
10899
|
"commentRange": {
|
|
10968
|
-
"start":
|
|
10969
|
-
"end":
|
|
10900
|
+
"start": 590,
|
|
10901
|
+
"end": 592
|
|
10970
10902
|
},
|
|
10971
10903
|
"context": {
|
|
10972
10904
|
"type": "variable",
|
|
@@ -10974,8 +10906,8 @@
|
|
|
10974
10906
|
"value": "white",
|
|
10975
10907
|
"scope": "default",
|
|
10976
10908
|
"line": {
|
|
10977
|
-
"start":
|
|
10978
|
-
"end":
|
|
10909
|
+
"start": 593,
|
|
10910
|
+
"end": 593
|
|
10979
10911
|
}
|
|
10980
10912
|
},
|
|
10981
10913
|
"type": "Color",
|
|
@@ -12531,8 +12463,8 @@
|
|
|
12531
12463
|
"name": "k-color",
|
|
12532
12464
|
"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",
|
|
12533
12465
|
"line": {
|
|
12534
|
-
"start":
|
|
12535
|
-
"end":
|
|
12466
|
+
"start": 322,
|
|
12467
|
+
"end": 330
|
|
12536
12468
|
},
|
|
12537
12469
|
"signature": "k-color($key)"
|
|
12538
12470
|
}
|