@progress/kendo-theme-core
Version:
A collection of functions and mixins used for building themes for Kendo UI
1,223 lines • 801 kB
JSON
[
{
"description": "",
"commentRange": {
"start": 602,
"end": 606
},
"context": {
"type": "variable",
"name": "wcag-dark",
"value": "black",
"scope": "default",
"line": {
"start": 607,
"end": 607
}
},
"link": [
{
"url": "https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast",
"caption": ""
},
{
"url": "https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests",
"caption": "Default dark color for WCAG 2.0."
}
],
"type": "Color",
"group": [
"accessibility"
],
"access": "public",
"file": {
"path": "functions/_color.import.scss",
"name": "_color.import.scss"
}
},
{
"description": "Default light color for WCAG 2.0.\n",
"commentRange": {
"start": 608,
"end": 610
},
"context": {
"type": "variable",
"name": "wcag-light",
"value": "white",
"scope": "default",
"line": {
"start": 611,
"end": 611
}
},
"type": "Color",
"group": [
"accessibility"
],
"access": "public",
"file": {
"path": "functions/_color.import.scss",
"name": "_color.import.scss"
}
},
{
"description": "Calculate the relative luminance for a color.\n",
"commentRange": {
"start": 613,
"end": 620
},
"context": {
"type": "function",
"name": "k-color-luminance",
"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",
"line": {
"start": 621,
"end": 627
}
},
"parameter": [
{
"type": "Color",
"name": "color",
"description": "The color to calculate the relative luminance for."
}
],
"return": {
"type": "Number",
"description": "The relative luminance for the color.\n"
},
"group": [
"accessibility"
],
"link": [
{
"url": "https://www.w3.org/TR/WCAG/#dfn-relative-luminance",
"caption": ""
},
{
"url": "https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests",
"caption": ""
}
],
"access": "public",
"require": [
{
"type": "function",
"name": "k-color-red"
},
{
"type": "function",
"name": "k-color-green"
},
{
"type": "function",
"name": "k-color-blue"
}
],
"file": {
"path": "functions/_color.import.scss",
"name": "_color.import.scss"
},
"usedBy": [
{
"description": "Calculates contrast ratio between two colors\n",
"context": {
"type": "function",
"name": "k-color-contrast-ratio",
"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",
"line": {
"start": 638,
"end": 643
}
}
},
{
"description": "Calculates contrast ratio between two colors\n",
"context": {
"type": "function",
"name": "k-color-contrast-ratio",
"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",
"line": {
"start": 638,
"end": 643
}
}
},
{
"description": "Checks if a color is dark\n",
"context": {
"type": "function",
"name": "k-is-dark",
"code": "\n @return if( k-color-luminance( $color ) < .5, true, false );\n",
"line": {
"start": 650,
"end": 652
}
}
},
{
"description": "Checks if a color is light\n",
"context": {
"type": "function",
"name": "k-is-light",
"code": "\n @return if( k-color-luminance( $color ) < .5, false, true );\n",
"line": {
"start": 659,
"end": 661
}
}
}
]
},
{
"description": "Calculates contrast ratio between two colors\n",
"commentRange": {
"start": 629,
"end": 637
},
"context": {
"type": "function",
"name": "k-color-contrast-ratio",
"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",
"line": {
"start": 638,
"end": 643
}
},
"parameter": [
{
"type": "Color",
"name": "background",
"description": "The background color"
},
{
"type": "Color",
"name": "foreground",
"description": "The foreground color"
}
],
"return": {
"type": "Number",
"description": "The contrast ratio between the two colors\n"
},
"group": [
"accessibility"
],
"link": [
{
"url": "https://www.w3.org/TR/WCAG/#dfn-contrast-ratio",
"caption": ""
},
{
"url": "https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests",
"caption": ""
}
],
"access": "public",
"require": [
{
"type": "function",
"name": "k-color-luminance"
},
{
"type": "function",
"name": "k-color-luminance"
}
],
"file": {
"path": "functions/_color.import.scss",
"name": "_color.import.scss"
},
"usedBy": [
{
"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",
"context": {
"type": "function",
"name": "k-contrast-color",
"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",
"line": {
"start": 673,
"end": 692
}
}
}
]
},
{
"description": "Checks if a color is dark\n",
"commentRange": {
"start": 645,
"end": 649
},
"context": {
"type": "function",
"name": "k-is-dark",
"code": "\n @return if( k-color-luminance( $color ) < .5, true, false );\n",
"line": {
"start": 650,
"end": 652
}
},
"parameter": [
{
"type": "Color",
"name": "color",
"description": "The color to check"
}
],
"return": {
"type": "Boolean",
"description": "True if the color is dark, false otherwise\n"
},
"group": [
"accessibility"
],
"access": "public",
"require": [
{
"type": "function",
"name": "k-color-luminance"
}
],
"file": {
"path": "functions/_color.import.scss",
"name": "_color.import.scss"
}
},
{
"description": "Checks if a color is light\n",
"commentRange": {
"start": 654,
"end": 658
},
"context": {
"type": "function",
"name": "k-is-light",
"code": "\n @return if( k-color-luminance( $color ) < .5, false, true );\n",
"line": {
"start": 659,
"end": 661
}
},
"parameter": [
{
"type": "Color",
"name": "color",
"description": "The color to check"
}
],
"return": {
"type": "Boolean",
"description": "True if the color is light, false otherwise\n"
},
"group": [
"accessibility"
],
"access": "public",
"require": [
{
"type": "function",
"name": "k-color-luminance"
}
],
"file": {
"path": "functions/_color.import.scss",
"name": "_color.import.scss"
}
},
{
"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",
"commentRange": {
"start": 664,
"end": 672
},
"context": {
"type": "function",
"name": "k-contrast-color",
"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",
"line": {
"start": 673,
"end": 692
}
},
"parameter": [
{
"type": "Color",
"name": "background",
"description": "The background color"
},
{
"type": "Color",
"name": "dark",
"description": "The dark color to use as a fallback"
},
{
"type": "Color",
"name": "light",
"description": "The light color to use as a fallback"
},
{
"type": "Number",
"name": "min-ratio",
"description": "The minimum contrast ratio to reach"
}
],
"return": {
"type": "Color",
"description": "The color with the highest contrast ratio\n"
},
"group": [
"accessibility"
],
"access": "public",
"require": [
{
"type": "function",
"name": "k-color-contrast-ratio"
}
],
"file": {
"path": "functions/_color.import.scss",
"name": "_color.import.scss"
},
"usedBy": [
{
"description": "Generates all color variations of a given main color\n",
"context": {
"type": "function",
"name": "k-generate-color-variations",
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
"line": {
"start": 200,
"end": 314
}
}
}
]
},
{
"description": "The color white.\nNote: you cannot change this value.\n",
"commentRange": {
"start": 3,
"end": 6
},
"context": {
"type": "variable",
"name": "kendo-color-white",
"value": "#ffffff",
"scope": "private",
"line": {
"start": 7,
"end": 7
}
},
"type": "Color",
"group": [
"color-system"
],
"access": "public",
"file": {
"path": "color-system/_constants.scss",
"name": "_constants.scss"
}
},
{
"description": "The color black.\nNote: you cannot change this value.\n",
"commentRange": {
"start": 9,
"end": 12
},
"context": {
"type": "variable",
"name": "kendo-color-black",
"value": "#000000",
"scope": "private",
"line": {
"start": 13,
"end": 13
}
},
"type": "Color",
"group": [
"color-system"
],
"access": "public",
"file": {
"path": "color-system/_constants.scss",
"name": "_constants.scss"
}
},
{
"description": "The color transparent.\nNote: you cannot change this value.\n",
"commentRange": {
"start": 15,
"end": 18
},
"context": {
"type": "variable",
"name": "kendo-color-rgba-transparent",
"value": "rgba(0, 0, 0, 0)",
"scope": "private",
"line": {
"start": 19,
"end": 19
}
},
"type": "Color",
"group": [
"color-system"
],
"access": "public",
"file": {
"path": "color-system/_constants.scss",
"name": "_constants.scss"
}
},
{
"description": "A gradient that goes from transparent to black.\nNote: you cannot change this value.\n",
"commentRange": {
"start": 21,
"end": 24
},
"context": {
"type": "variable",
"name": "kendo-gradient-transparent-to-black",
"value": "rgba(black, 0), black",
"scope": "private",
"line": {
"start": 25,
"end": 25
}
},
"type": "Gradient",
"group": [
"color-system"
],
"access": "public",
"file": {
"path": "color-system/_constants.scss",
"name": "_constants.scss"
}
},
{
"description": "A gradient that goes from transparent to white.\nNote: you cannot change this value.\n",
"commentRange": {
"start": 27,
"end": 30
},
"context": {
"type": "variable",
"name": "kendo-gradient-transparent-to-white",
"value": "rgba(white, 0), white",
"scope": "private",
"line": {
"start": 31,
"end": 31
}
},
"type": "Gradient",
"group": [
"color-system"
],
"access": "public",
"file": {
"path": "color-system/_constants.scss",
"name": "_constants.scss"
}
},
{
"description": "A gradient that goes from black to transparent.\nNote: you cannot change this value.\n",
"commentRange": {
"start": 33,
"end": 36
},
"context": {
"type": "variable",
"name": "kendo-gradient-black-to-transparent",
"value": "black, rgba(black, 0)",
"scope": "private",
"line": {
"start": 37,
"end": 37
}
},
"type": "Gradient",
"group": [
"color-system"
],
"access": "public",
"file": {
"path": "color-system/_constants.scss",
"name": "_constants.scss"
}
},
{
"description": "A gradient that goes from white to transparent.\nNote: you cannot change this value.\n",
"commentRange": {
"start": 39,
"end": 42
},
"context": {
"type": "variable",
"name": "kendo-gradient-white-to-transparent",
"value": "white, rgba(white, 0)",
"scope": "private",
"line": {
"start": 43,
"end": 43
}
},
"type": "Gradient",
"group": [
"color-system"
],
"access": "public",
"file": {
"path": "color-system/_constants.scss",
"name": "_constants.scss"
}
},
{
"description": "A gradient that cycles through the colors of the rainbow.\nNote: you cannot change this value.\n",
"commentRange": {
"start": 45,
"end": 48
},
"context": {
"type": "variable",
"name": "kendo-gradient-rainbow",
"value": "#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000",
"scope": "private",
"line": {
"start": 49,
"end": 49
}
},
"type": "Gradient",
"group": [
"color-system"
],
"access": "public",
"file": {
"path": "color-system/_constants.scss",
"name": "_constants.scss"
}
},
{
"description": "Generates all color variations of a given main color\n",
"commentRange": {
"start": 193,
"end": 199
},
"context": {
"type": "function",
"name": "k-generate-color-variations",
"code": "\n $result: ();\n\n // DataViz\n @if (\n $name == 'series-a' or\n $name == 'series-b' or\n $name == 'series-c' or\n $name == 'series-d' or\n $name == 'series-e' or\n $name == 'series-f'\n ) {\n $_variations: (\n #{$name}: $color,\n #{$name}-bold: color.mix(black, $color, 25%),\n #{$name}-bolder: color.mix(black, $color, 50%),\n #{$name}-subtle: color.mix(white, $color, 25%),\n #{$name}-subtler: color.mix(white, $color, 50%),\n );\n\n $result: map.merge($result, $_variations);\n } @else {\n // Default\n @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Bootstrap\n @if ( $theme == 'bootstrap' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-color-darken( $color, 7.5% ),\n #{$name}-active: k-color-darken( $color, 10% ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Material\n @if ( $theme == 'material' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Fluent\n @if ( $theme == 'fluent' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 0.5 ),\n #{$name}-active: k-try-shade( $color, 1.5 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n\n // Classic\n @if ( $theme == 'classic' ) {\n $_variations: (\n #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),\n #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),\n #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),\n #{$name}: $color,\n #{$name}-hover: k-try-shade( $color, 1 ),\n #{$name}-active: k-try-shade( $color, 2 ),\n #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),\n #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),\n on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),\n #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),\n );\n\n $result: map.merge($result, $_variations);\n }\n }\n\n @return $result;\n",
"line": {
"start": 200,
"end": 314
}
},
"parameter": [
{
"type": "String",
"name": "name",
"description": "The name of the main color"
},
{
"type": "Color",
"name": "color",
"description": "The color value to be assigned to the main color"
},
{
"type": "String",
"name": "theme",
"description": "The theme the colors will be generated for"
}
],
"return": {
"type": "Map",
"description": "A map with the generated keys and values\n"
},
"group": [
"color-system"
],
"access": "public",
"require": [
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-color-darken"
},
{
"type": "function",
"name": "k-color-darken"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-contrast-color"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-tint"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
},
{
"type": "function",
"name": "k-try-shade"
}
],
"file": {
"path": "color-system/_functions.import.scss",
"name": "_functions.import.scss"
}
},
{
"description": "Takes a color name from the $kendo-colors map as a parameter\nand returns a CSS variable with the actual color as a fallback\n",
"commentRange": {
"start": 316,
"end": 321
},
"context": {
"type": "function",
"name": "k-color",
"code": "\n $_color: map.get($kendo-colors, $key);\n\n @if ($_color) {\n @return var(--kendo-color-#{$key}, $_color);\n } @else {\n @error \"Color Variable \\`#{$key}\\` does not exists in the color collection.\";\n }\n",
"line": {
"start": 322,
"end": 330
}
},
"parameter": [
{
"type": "String",
"name": "key",
"description": "The name of a color/key in the $kendo-colors map"
}
],
"return": {
"type": "String",
"description": "CSS variable with the actual color as a fallback\n"
},
"group": [
"color-system"
],
"access": "public",
"require": [
{
"type": "variable",
"name": "kendo-colors"
}
],
"throw": [
"Color Variable \\`#{$key}\\` does not exists in the color collection."
],
"file": {
"path": "color-system/_functions.import.scss",
"name": "_functions.import.scss"
}
},
{
"description": "The global default Colors map.\n",
"commentRange": {
"start": 174,
"end": 423
},
"context": {
"type": "variable",
"name": "kendo-colors",
"value": "$_default-colors",
"scope": "default",
"line": {
"start": 424,
"end": 424
}
},
"group": [
"color-system"
],
"subGroup": [
{
"name": "misc",
"value": [
"app-surface",
"on-app-surface",
"subtle",
"surface",
"surface-alt",
"border",
"border-alt"
],
"description": "The Misc variable group."
},
{
"name": "base",
"value": [
"base-subtle",
"base-subtle-hover",
"base-subtle-active",
"base",
"base-hover",
"base-active",
"base-emphasis",
"base-on-subtle",
"on-base",
"base-on-surface"
],
"description": "The Base variable group."
},
{
"name": "primary",
"value": [
"primary-subtle",
"primary-subtle-hover",
"primary-subtle-active",
"primary",
"primary-hover",
"primary-active",
"primary-emphasis",
"primary-on-subtle",
"on-primary",
"primary-on-surface"
],
"description": "The Primary variable group."
},
{
"name": "secondary",
"value": [
"secondary-subtle",
"secondary-subtle-hover",
"secondary-subtle-active",
"secondary",
"secondary-hover",
"secondary-active",
"secondary-emphasis",
"secondary-on-subtle",
"on-secondary",
"secondary-on-surface"
],
"description": "The Secondary variable group."
},
{
"name": "tertiary",
"value": [
"tertiary-subtle",
"tertiary-subtle-hover",
"tertiary-subtle-active",
"tertiary",
"tertiary-hover",
"tertiary-active",
"tertiary-emphasis",
"tertiary-on-subtle",
"on-tertiary",
"tertiary-on-surface"
],
"description": "The Tertiary variable group."
},
{
"name": "info",
"value": [
"info-subtle",
"info-subtle-hover",
"info-subtle-active",
"info",
"info-hover",
"info-active",
"info-emphasis",
"info-on-subtle",
"on-info",
"info-on-surface"
],
"description": "The Info variable group."
},
{
"name": "success",
"value": [
"success-subtle",
"success-subtle-hover",
"success-subtle-active",
"success",
"success-hover",
"success-active",
"success-emphasis",
"success-on-subtle",
"on-success",
"success-on-surface"
],
"description": "The Success variable group."
},
{
"name": "warning",
"value": [
"warning-subtle",
"warning-subtle-hover",
"warning-subtle-active",
"warning",
"warning-hover",
"warning-active",
"warning-emphasis",
"warning-on-subtle",
"on-warning",
"warning-on-surface"
],
"description": "The Warning variable group."
},
{
"name": "error",
"value": [
"error-subtle",
"error-subtle-hover",
"error-subtle-active",
"error",
"error-hover",
"error-active",
"error-emphasis",
"error-on-subtle",
"on-error",
"error-on-surface"
],
"description": "The Error variable group."
},
{
"name": "light",
"value": [
"light-subtle",
"light-subtle-hover",
"light-subtle-active",
"light",
"light-hover",
"light-active",
"light-emphasis",
"light-on-subtle",
"on-light",
"light-on-surface"
],
"description": "The Light variable group."
},
{
"name": "dark",
"value": [
"dark-subtle",
"dark-subtle-hover",
"dark-subtle-active",
"dark",
"dark-hover",
"dark-active",
"dark-emphasis",
"dark-on-subtle",
"on-dark",
"dark-on-surface"
],
"description": "The Dark variable group."
},
{
"name": "inverse",
"value": [
"inverse-subtle",
"inverse-subtle-hover",
"inverse-subtle-active",
"inverse",
"inverse-hover",
"inverse-active",
"inverse-emphasis",
"inverse-on-subtle",
"on-inverse",
"inverse-on-surface"
],
"description": "The Inverse variable group."
},
{
"name": "series-a",
"value": [
"series-a",
"series-a-bold",
"series-a-bolder",
"series-a-subtle",
"series-a-subtler"
],
"description": "The Series A variable group."
},
{
"name": "series-b",
"value": [
"series-b",
"series-b-bold",
"s