@progress/kendo-theme-core
Version:
A collection of functions and mixins used for building themes for Kendo UI
1,041 lines • 764 kB
JSON
[
{
"description": "",
"commentRange": {
"start": 555,
"end": 559
},
"context": {
"type": "variable",
"name": "wcag-dark",
"value": "black",
"scope": "default",
"line": {
"start": 560,
"end": 560
}
},
"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.scss",
"name": "_color.scss"
}
},
{
"description": "Default light color for WCAG 2.0.\n",
"commentRange": {
"start": 561,
"end": 563
},
"context": {
"type": "variable",
"name": "wcag-light",
"value": "white",
"scope": "default",
"line": {
"start": 564,
"end": 564
}
},
"type": "Color",
"group": [
"accessibility"
],
"access": "public",
"file": {
"path": "functions/_color.scss",
"name": "_color.scss"
}
},
{
"description": "Calculate the relative luminance for a color.\n",
"commentRange": {
"start": 566,
"end": 573
},
"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": 574,
"end": 580
}
},
"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.scss",
"name": "_color.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": 591,
"end": 596
}
}
},
{
"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": 591,
"end": 596
}
}
},
{
"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": 603,
"end": 605
}
}
},
{
"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": 612,
"end": 614
}
}
}
]
},
{
"description": "Calculates contrast ratio between two colors\n",
"commentRange": {
"start": 582,
"end": 590
},
"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": 591,
"end": 596
}
},
"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.scss",
"name": "_color.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": 626,
"end": 645
}
}
}
]
},
{
"description": "Checks if a color is dark\n",
"commentRange": {
"start": 598,
"end": 602
},
"context": {
"type": "function",
"name": "k-is-dark",
"code": "\n @return if( k-color-luminance( $color ) < .5, true, false );\n",
"line": {
"start": 603,
"end": 605
}
},
"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.scss",
"name": "_color.scss"
}
},
{
"description": "Checks if a color is light\n",
"commentRange": {
"start": 607,
"end": 611
},
"context": {
"type": "function",
"name": "k-is-light",
"code": "\n @return if( k-color-luminance( $color ) < .5, false, true );\n",
"line": {
"start": 612,
"end": 614
}
},
"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.scss",
"name": "_color.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": 617,
"end": 625
},
"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": 626,
"end": 645
}
},
"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.scss",
"name": "_color.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": 94,
"end": 208
}
}
}
]
},
{
"description": "The theme colors map of the AppBar.\n",
"commentRange": {
"start": 22,
"end": 23
},
"context": {
"type": "variable",
"name": "kendo-appbar-theme-colors",
"value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"inverse\")",
"scope": "default",
"line": {
"start": 24,
"end": 24
}
},
"group": [
"appbar"
],
"access": "public",
"file": {
"path": "components/appbar/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The sizes map of the Avatar.\n",
"commentRange": {
"start": 24,
"end": 25
},
"context": {
"type": "variable",
"name": "kendo-avatar-sizes",
"value": "(\n sm: $kendo-avatar-sm-size,\n md: $kendo-avatar-md-size,\n lg: $kendo-avatar-lg-size\n)",
"scope": "default",
"line": {
"start": 26,
"end": 30
}
},
"group": [
"avatar"
],
"access": "public",
"file": {
"path": "components/avatar/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The theme colors map of the Avatar.\n",
"commentRange": {
"start": 32,
"end": 33
},
"context": {
"type": "variable",
"name": "kendo-avatar-theme-colors",
"value": "(\"base\", \"primary\", \"secondary\", \"tertiary\")",
"scope": "default",
"line": {
"start": 34,
"end": 34
}
},
"group": [
"avatar"
],
"access": "public",
"file": {
"path": "components/avatar/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The sizes map of the Badge.\n",
"commentRange": {
"start": 33,
"end": 34
},
"context": {
"type": "variable",
"name": "kendo-badge-sizes",
"value": "(\n sm: (\n padding-x: $kendo-badge-sm-padding-x,\n padding-y: $kendo-badge-sm-padding-y,\n font-size: $kendo-badge-sm-font-size,\n line-height: $kendo-badge-sm-line-height,\n min-width: $kendo-badge-sm-min-width\n ),\n md: (\n padding-x: $kendo-badge-md-padding-x,\n padding-y: $kendo-badge-md-padding-y,\n font-size: $kendo-badge-md-font-size,\n line-height: $kendo-badge-md-line-height,\n min-width: $kendo-badge-md-min-width\n ),\n lg: (\n padding-x: $kendo-badge-lg-padding-x,\n padding-y: $kendo-badge-lg-padding-y,\n font-size: $kendo-badge-lg-font-size,\n line-height: $kendo-badge-lg-line-height,\n min-width: $kendo-badge-lg-min-width\n )\n)",
"scope": "default",
"line": {
"start": 35,
"end": 57
}
},
"group": [
"badge"
],
"access": "public",
"file": {
"path": "components/badge/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The theme colors map of the Badge.\n",
"commentRange": {
"start": 61,
"end": 62
},
"context": {
"type": "variable",
"name": "kendo-badge-theme-colors",
"value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\")",
"scope": "default",
"line": {
"start": 63,
"end": 63
}
},
"group": [
"badge"
],
"access": "public",
"file": {
"path": "components/badge/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The theme colors map of the BottomNavigation.\n",
"commentRange": {
"start": 32,
"end": 33
},
"context": {
"type": "variable",
"name": "kendo-bottom-navigation-theme-colors",
"value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"inverse\")",
"scope": "default",
"line": {
"start": 34,
"end": 34
}
},
"group": [
"bottom-navigation"
],
"access": "public",
"file": {
"path": "components/bottom-navigation/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The sizes map of the Breadcrumb.\n",
"commentRange": {
"start": 81,
"end": 82
},
"context": {
"type": "variable",
"name": "kendo-breadcrumb-sizes",
"value": "(\n sm: (\n link-padding-x: $kendo-breadcrumb-sm-link-padding-x,\n link-padding-y: $kendo-breadcrumb-sm-link-padding-y,\n icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,\n icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,\n font-size: $kendo-breadcrumb-sm-font-size,\n line-height: $kendo-breadcrumb-sm-line-height\n ),\n md: (\n link-padding-x: $kendo-breadcrumb-md-link-padding-x,\n link-padding-y: $kendo-breadcrumb-md-link-padding-y,\n icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,\n icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,\n font-size: $kendo-breadcrumb-md-font-size,\n line-height: $kendo-breadcrumb-md-line-height\n ),\n lg: (\n link-padding-x: $kendo-breadcrumb-lg-link-padding-x,\n link-padding-y: $kendo-breadcrumb-lg-link-padding-y,\n icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,\n icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,\n font-size: $kendo-breadcrumb-lg-font-size,\n line-height: $kendo-breadcrumb-lg-line-height\n )\n)",
"scope": "default",
"line": {
"start": 83,
"end": 108
}
},
"group": [
"breadcrumb"
],
"access": "public",
"file": {
"path": "components/breadcrumb/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The theme colors map of the Button.\n",
"commentRange": {
"start": 116,
"end": 117
},
"context": {
"type": "variable",
"name": "kendo-button-theme-colors",
"value": "(\"base\", \"primary\", \"secondary\", \"tertiary\", \"info\", \"success\", \"warning\", \"error\", \"inverse\")",
"scope": "default",
"line": {
"start": 118,
"end": 118
}
},
"group": [
"button"
],
"access": "public",
"file": {
"path": "components/button/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The sizes map of the Button.\n",
"commentRange": {
"start": 120,
"end": 121
},
"context": {
"type": "variable",
"name": "kendo-button-sizes",
"value": "(\n xs: (\n padding-x: $kendo-button-xs-padding-x,\n padding-y: $kendo-button-xs-padding-y,\n font-size: $kendo-button-xs-font-size,\n line-height: $kendo-button-xs-line-height\n ),\n sm: (\n padding-x: $kendo-button-sm-padding-x,\n padding-y: $kendo-button-sm-padding-y,\n font-size: $kendo-button-sm-font-size,\n line-height: $kendo-button-sm-line-height\n ),\n md: (\n padding-x: $kendo-button-md-padding-x,\n padding-y: $kendo-button-md-padding-y,\n font-size: $kendo-button-md-font-size,\n line-height: $kendo-button-md-line-height\n ),\n lg: (\n padding-x: $kendo-button-lg-padding-x,\n padding-y: $kendo-button-lg-padding-y,\n font-size: $kendo-button-lg-font-size,\n line-height: $kendo-button-lg-line-height\n )\n)",
"scope": "default",
"line": {
"start": 122,
"end": 147
}
},
"group": [
"button"
],
"access": "public",
"file": {
"path": "components/button/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The sizes map of the Calendar.\n",
"commentRange": {
"start": 143,
"end": 144
},
"context": {
"type": "variable",
"name": "kendo-calendar-sizes",
"value": "(\n sm: (\n font-size: $kendo-calendar-sm-font-size,\n line-height: $kendo-calendar-sm-line-height,\n cell-size: $kendo-calendar-sm-cell-size,\n cell-padding-x: $kendo-calendar-sm-cell-padding-x,\n cell-padding-y: $kendo-calendar-sm-cell-padding-y\n ),\n md: (\n font-size: $kendo-calendar-md-font-size,\n line-height: $kendo-calendar-md-line-height,\n cell-size: $kendo-calendar-md-cell-size,\n cell-padding-x: $kendo-calendar-md-cell-padding-x,\n cell-padding-y: $kendo-calendar-md-cell-padding-y\n ),\n lg: (\n font-size: $kendo-calendar-lg-font-size,\n line-height: $kendo-calendar-lg-line-height,\n cell-size: $kendo-calendar-lg-cell-size,\n cell-padding-x: $kendo-calendar-lg-cell-padding-x,\n cell-padding-y: $kendo-calendar-lg-cell-padding-y\n )\n)",
"scope": "default",
"line": {
"start": 145,
"end": 167
}
},
"group": [
"calendar"
],
"access": "public",
"file": {
"path": "components/calendar/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The sizes map of the CheckBox.\n",
"commentRange": {
"start": 17,
"end": 18
},
"context": {
"type": "variable",
"name": "kendo-checkbox-sizes",
"value": "(\n sm: (\n size: $kendo-checkbox-sm-size,\n glyph-size: $kendo-checkbox-sm-glyph-size,\n ripple-size: $kendo-checkbox-sm-ripple-size\n ),\n md: (\n size: $kendo-checkbox-md-size,\n glyph-size: $kendo-checkbox-md-glyph-size,\n ripple-size: $kendo-checkbox-md-ripple-size\n ),\n lg: (\n size: $kendo-checkbox-lg-size,\n glyph-size: $kendo-checkbox-lg-glyph-size,\n ripple-size: $kendo-checkbox-lg-ripple-size\n )\n)",
"scope": "default",
"line": {
"start": 19,
"end": 35
}
},
"group": [
"checkbox"
],
"access": "public",
"file": {
"path": "components/checkbox/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The sizes map of the Chip.\n",
"commentRange": {
"start": 36,
"end": 37
},
"context": {
"type": "variable",
"name": "kendo-chip-sizes",
"value": "(\n sm: (\n padding-x: $kendo-chip-sm-padding-x,\n padding-y: $kendo-chip-sm-padding-y,\n font-size: $kendo-chip-sm-font-size,\n line-height: $kendo-chip-sm-line-height\n ),\n md: (\n padding-x: $kendo-chip-md-padding-x,\n padding-y: $kendo-chip-md-padding-y,\n font-size: $kendo-chip-md-font-size,\n line-height: $kendo-chip-md-line-height\n ),\n lg: (\n padding-x: $kendo-chip-lg-padding-x,\n padding-y: $kendo-chip-lg-padding-y,\n font-size: $kendo-chip-lg-font-size,\n line-height: $kendo-chip-lg-line-height\n )\n)",
"scope": "default",
"line": {
"start": 38,
"end": 57
}
},
"group": [
"chip"
],
"access": "public",
"file": {
"path": "components/chip/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The sizes of the Chip list.\n",
"commentRange": {
"start": 64,
"end": 65
},
"context": {
"type": "variable",
"name": "kendo-chip-list-sizes",
"value": "(\n sm: $kendo-chip-list-size-sm,\n md: $kendo-chip-list-size-md,\n lg: $kendo-chip-list-size-lg\n)",
"scope": "default",
"line": {
"start": 66,
"end": 70
}
},
"group": [
"chip"
],
"access": "public",
"file": {
"path": "components/chip/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The theme colors map of the Chip.\n",
"commentRange": {
"start": 75,
"end": 76
},
"context": {
"type": "variable",
"name": "kendo-chip-theme-colors",
"value": "(\"base\", \"error\", \"info\", \"warning\", \"success\")",
"scope": "default",
"line": {
"start": 77,
"end": 77
}
},
"group": [
"chip"
],
"access": "public",
"file": {
"path": "components/chip/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The size map of the ColorEditor.\n",
"commentRange": {
"start": 58,
"end": 59
},
"context": {
"type": "variable",
"name": "kendo-color-editor-sizes",
"value": "(\n sm: (\n min-width: $kendo-color-editor-sm-min-width,\n header-padding-x: $kendo-color-editor-sm-header-padding-x,\n header-padding-y: $kendo-color-editor-sm-header-padding-y,\n views-padding-x: $kendo-color-editor-sm-views-padding-x,\n views-padding-y: $kendo-color-editor-sm-views-padding-y,\n preview-gap: $kendo-color-editor-sm-preview-gap,\n preview-width: $kendo-color-editor-sm-color-preview-width,\n preview-height: $kendo-color-editor-sm-color-preview-height,\n\n ),\n md: (\n min-width: $kendo-color-editor-md-min-width,\n header-padding-x: $kendo-color-editor-md-header-padding-x,\n header-padding-y: $kendo-color-editor-md-header-padding-y,\n views-padding-x: $kendo-color-editor-md-views-padding-x,\n views-padding-y: $kendo-color-editor-md-views-padding-y,\n preview-gap: $kendo-color-editor-md-preview-gap,\n preview-width: $kendo-color-editor-md-color-preview-width,\n preview-height: $kendo-color-editor-md-color-preview-height,\n ),\n lg: (\n min-width: $kendo-color-editor-lg-min-width,\n header-padding-x: $kendo-color-editor-lg-header-padding-x,\n header-padding-y: $kendo-color-editor-lg-header-padding-y,\n views-padding-x: $kendo-color-editor-lg-views-padding-x,\n views-padding-y: $kendo-color-editor-lg-views-padding-y,\n preview-gap: $kendo-color-editor-lg-preview-gap,\n preview-width: $kendo-color-editor-lg-color-preview-width,\n preview-height: $kendo-color-editor-lg-color-preview-height,\n )\n)",
"scope": "default",
"line": {
"start": 60,
"end": 92
}
},
"group": [
"color-editor"
],
"access": "public",
"file": {
"path": "components/coloreditor/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The size map of the ColorGradient.\n",
"commentRange": {
"start": 87,
"end": 88
},
"context": {
"type": "variable",
"name": "kendo-color-gradient-sizes",
"value": "(\n sm: (\n width: $kendo-color-gradient-sm-width,\n vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,\n rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,\n input-width: $kendo-color-gradient-sm-input-width,\n gap: $kendo-color-gradient-sm-gap,\n canvas-gap: $kendo-color-gradient-sm-canvas-gap,\n padding-x: $kendo-color-gradient-sm-padding-x,\n padding-y: $kendo-color-gradient-sm-padding-y\n ),\n md: (\n width: $kendo-color-gradient-md-width,\n vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,\n rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,\n input-width: $kendo-color-gradient-md-input-width,\n gap: $kendo-color-gradient-md-gap,\n canvas-gap: $kendo-color-gradient-md-canvas-gap,\n padding-x: $kendo-color-gradient-md-padding-x,\n padding-y: $kendo-color-gradient-md-padding-y\n ),\n lg: (\n width: $kendo-color-gradient-lg-width,\n vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,\n rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,\n input-width: $kendo-color-gradient-lg-input-width,\n gap: $kendo-color-gradient-lg-gap,\n canvas-gap: $kendo-color-gradient-lg-canvas-gap,\n padding-x: $kendo-color-gradient-lg-padding-x,\n padding-y: $kendo-color-gradient-lg-padding-y\n )\n)",
"scope": "default",
"line": {
"start": 89,
"end": 120
}
},
"group": [
"color-gradient"
],
"access": "public",
"file": {
"path": "components/colorgradient/_variables.scss",
"name": "_variables.scss"
}
},
{
"description": "The size map of the ColorPalette.\n",
"commentRange": {
"start": 22,
"end": 23
},
"context": {
"type": "variable",
"name": "kendo-color-palette-sizes",
"value": "(\n sm: (\n width: $kendo-color-palette-sm-tile-width,\n height: $kendo-color-palette-sm-tile-height\n ),\n md: (\n width: $kendo-color-palette-md-tile-width,\n height: $kendo-color-palette-md-tile-height\n ),\n lg: (\n width: $kendo-color-palette-lg-tile-width,\n height: $kendo-color-palette-lg-tile-height\n )\n)",
"scope": "default",
"line": {
"start": 24,
"end": 37
}
},
"group": [
"color-palette"
],
"access": "public",
"file": {
"path": "components/colorpalette/_variables.scss",
"name": "_variables.scss"
}
},
{
"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": 87,
"end": 93
},
"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}-a