UNPKG

@progress/kendo-theme-utils

Version:
1,312 lines (1,311 loc) 2.07 MB
{ "variables": [ { "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": "core/scss/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": "core/scss/functions/_color.import.scss", "name": "_color.import.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": "core/scss/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": "core/scss/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": "core/scss/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": "core/scss/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": "core/scss/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": "core/scss/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": "core/scss/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": "core/scss/color-system/_constants.scss", "name": "_constants.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", "series-b-bolder", "series-b-subtle", "series-b-subtler" ], "description": "The Series B variable group." }, { "name": "series-c", "value": [ "series-c", "series-c-bold", "series-c-bolder", "series-c-subtle", "series-c-subtler" ], "description": "The Series C variable group." }, { "name": "series-d", "value": [ "series-d", "series-d-bold", "series-d-bolder", "series-d-subtle", "series-d-subtler" ], "description": "The Series D variable group." }, { "name": "series-e", "value": [ "series-e", "series-e-bold", "series-e-bolder", "series-e-subtle", "series-e-subtler" ], "description": "The Series E variable group." }, { "name": "series-f", "value": [ "series-f", "series-f-bold", "series-f-bolder", "series-f-subtle", "series-f-subtler" ], "description": "The Series F variable group." } ], "property": [ { "type": "Color", "name": "app-surface", "description": "The background color of the application." }, { "type": "Color", "name": "on-app-surface", "description": "The text color of the application." }, { "type": "Color", "name": "subtle", "description": "The subtle text color." }, { "type": "Color", "name": "surface", "description": "The background color of the components' chrome area." }, { "type": "Color", "name": "surface-alt", "description": "The alternative background color of the components' chrome area." }, { "type": "Color", "name": "border", "description": "The border color of the application." }, { "type": "Color", "name": "border-alt", "description": "The alternative border color of the application." }, { "type": "Color", "name": "base-subtle", "description": "The base subtle background color variable." }, { "type": "Color", "name": "base-subtle-hover", "description": "The base subtle background color variable for the hover state." }, { "type": "Color", "name": "base-subtle-active", "description": "The base subtle background color variable for the active state." }, { "type": "Color", "name": "base", "description": "The base background color variable." }, { "type": "Color", "name": "base-hover", "description": "The base background color variable for the hover state." }, { "type": "Color", "name": "base-active", "description": "The base background color variable for the active state." }, { "type": "Color", "name": "base-emphasis", "description": "The emphasized base color variable." }, { "type": "Color", "name": "base-on-subtle", "description": "The text color variable for content on base subtle." }, { "type": "Color", "name": "on-base", "description": "The text color variable for content on base." }, { "type": "Color", "name": "base-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "primary-subtle", "description": "The primary subtle background color variable." }, { "type": "Color", "name": "primary-subtle-hover", "description": "The primary subtle background color variable for the hover state." }, { "type": "Color", "name": "primary-subtle-active", "description": "The primary subtle background color variable for the active state." }, { "type": "Color", "name": "primary", "description": "The primary background color variable." }, { "type": "Color", "name": "primary-hover", "description": "The primary background color variable for the hover state." }, { "type": "Color", "name": "primary-active", "description": "The primary background color variable for the active state." }, { "type": "Color", "name": "primary-emphasis", "description": "The emphasized primary color variable." }, { "type": "Color", "name": "primary-on-subtle", "description": "The text color variable for content on primary subtle." }, { "type": "Color", "name": "on-primary", "description": "The text color variable for content on primary." }, { "type": "Color", "name": "primary-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "secondary-subtle", "description": "The secondary subtle background color variable." }, { "type": "Color", "name": "secondary-subtle-hover", "description": "The secondary subtle background color variable for the hover state." }, { "type": "Color", "name": "secondary-subtle-active", "description": "The secondary subtle background color variable for the active state." }, { "type": "Color", "name": "secondary", "description": "The secondary background color variable." }, { "type": "Color", "name": "secondary-hover", "description": "The secondary background color variable for the hover state." }, { "type": "Color", "name": "secondary-active", "description": "The secondary background color variable for the active state." }, { "type": "Color", "name": "secondary-emphasis", "description": "The emphasized secondary color variable." }, { "type": "Color", "name": "secondary-on-subtle", "description": "The text color variable for content on secondary subtle." }, { "type": "Color", "name": "on-secondary", "description": "The text color variable for content on secondary." }, { "type": "Color", "name": "secondary-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "tertiary-subtle", "description": "The tertiary subtle background color variable." }, { "type": "Color", "name": "tertiary-subtle-hover", "description": "The tertiary subtle background color variable for the hover state." }, { "type": "Color", "name": "tertiary-subtle-active", "description": "The tertiary subtle background color variable for the active state." }, { "type": "Color", "name": "tertiary", "description": "The tertiary background color variable." }, { "type": "Color", "name": "tertiary-hover", "description": "The tertiary background color variable for the hover state." }, { "type": "Color", "name": "tertiary-active", "description": "The tertiary background color variable for the active state." }, { "type": "Color", "name": "tertiary-emphasis", "description": "The emphasized tertiary color variable." }, { "type": "Color", "name": "tertiary-on-subtle", "description": "The text color variable for content on tertiary subtle." }, { "type": "Color", "name": "on-tertiary", "description": "The text color variable for content on tertiary." }, { "type": "Color", "name": "tertiary-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "info-subtle", "description": "The info subtle background color variable." }, { "type": "Color", "name": "info-subtle-hover", "description": "The info subtle background color variable for the hover state." }, { "type": "Color", "name": "info-subtle-active", "description": "The info subtle background color variable for the active state." }, { "type": "Color", "name": "info", "description": "The info background color variable." }, { "type": "Color", "name": "info-hover", "description": "The info background color variable for the hover state." }, { "type": "Color", "name": "info-active", "description": "The info background color variable for the active state." }, { "type": "Color", "name": "info-emphasis", "description": "The emphasized info color variable." }, { "type": "Color", "name": "info-on-subtle", "description": "The text color variable for content on info subtle." }, { "type": "Color", "name": "on-info", "description": "The text color variable for content on info." }, { "type": "Color", "name": "info-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "success-subtle", "description": "The success subtle background color variable." }, { "type": "Color", "name": "success-subtle-hover", "description": "The success subtle background color variable for the hover state." }, { "type": "Color", "name": "success-subtle-active", "description": "The success subtle background color variable for the active state." }, { "type": "Color", "name": "success", "description": "The success background color variable." }, { "type": "Color", "name": "success-hover", "description": "The success background color variable for the hover state." }, { "type": "Color", "name": "success-active", "description": "The success background color variable for the active state." }, { "type": "Color", "name": "success-emphasis", "description": "The emphasized success color variable." }, { "type": "Color", "name": "success-on-subtle", "description": "The text color variable for content on success subtle." }, { "type": "Color", "name": "on-success", "description": "The text color variable for content on success." }, { "type": "Color", "name": "success-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "warning-subtle", "description": "The warning subtle background color variable." }, { "type": "Color", "name": "warning-subtle-hover", "description": "The warning subtle background color variable for the hover state." }, { "type": "Color", "name": "warning-subtle-active", "description": "The warning subtle background color variable for the active state." }, { "type": "Color", "name": "warning", "description": "The warning background color variable." }, { "type": "Color", "name": "warning-hover", "description": "The warning background color variable for the hover state." }, { "type": "Color", "name": "warning-active", "description": "The warning background color variable for the active state." }, { "type": "Color", "name": "warning-emphasis", "description": "The emphasized warning color variable." }, { "type": "Color", "name": "warning-on-subtle", "description": "The text color variable for content on warning subtle." }, { "type": "Color", "name": "on-warning", "description": "The text color variable for content on warning." }, { "type": "Color", "name": "warning-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "error-subtle", "description": "The error subtle background color variable." }, { "type": "Color", "name": "error-subtle-hover", "description": "The error subtle background color variable for the hover state." }, { "type": "Color", "name": "error-subtle-active", "description": "The error subtle background color variable for the active state." }, { "type": "Color", "name": "error", "description": "The error background color variable." }, { "type": "Color", "name": "error-hover", "description": "The error background color variable for the hover state." }, { "type": "Color", "name": "error-active", "description": "The error background color variable for the active state." }, { "type": "Color", "name": "error-emphasis", "description": "The emphasized error color variable." }, { "type": "Color", "name": "error-on-subtle", "description": "The text color variable for content on error subtle." }, { "type": "Color", "name": "on-error", "description": "The text color variable for content on error." }, { "type": "Color", "name": "error-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "light-subtle", "description": "The light subtle background color variable." }, { "type": "Color", "name": "light-subtle-hover", "description": "The light subtle background color variable for the hover state." }, { "type": "Color", "name": "light-subtle-active", "description": "The light subtle background color variable for the active state." }, { "type": "Color", "name": "light", "description": "The light background color variable." }, { "type": "Color", "name": "light-hover", "description": "The light background color variable for the hover state." }, { "type": "Color", "name": "light-active", "description": "The light background color variable for the active state." }, { "type": "Color", "name": "light-emphasis", "description": "The emphasized light color variable." }, { "type": "Color", "name": "light-on-subtle", "description": "The text color variable for content on light subtle." }, { "type": "Color", "name": "on-light", "description": "The text color variable for content on light." }, { "type": "Color", "name": "light-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "dark-subtle", "description": "The dark subtle background color variable." }, { "type": "Color", "name": "dark-subtle-hover", "description": "The dark subtle background color variable for the hover state." }, { "type": "Color", "name": "dark-subtle-active", "description": "The dark subtle background color variable for the active state." }, { "type": "Color", "name": "dark", "description": "The dark background color variable." }, { "type": "Color", "name": "dark-hover", "description": "The dark background color variable for the hover state." }, { "type": "Color", "name": "dark-active", "description": "The dark background color variable for the active state." }, { "type": "Color", "name": "dark-emphasis", "description": "The emphasized dark color variable." }, { "type": "Color", "name": "dark-on-subtle", "description": "The text color variable for content on dark subtle." }, { "type": "Color", "name": "on-dark", "description": "The text color variable for content on dark." }, { "type": "Color", "name": "dark-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "inverse-subtle", "description": "The inverse subtle background color variable." }, { "type": "Color", "name": "inverse-subtle-hover", "description": "The inverse subtle background color variable for the hover state." }, { "type": "Color", "name": "inverse-subtle-active", "description": "The inverse subtle background color variable for the active state." }, { "type": "Color", "name": "inverse", "description": "The inverse background color variable." }, { "type": "Color", "name": "inverse-hover", "description": "The inverse background color variable for the hover state." }, { "type": "Color", "name": "inverse-active", "description": "The inverse background color variable for the active state." }, { "type": "Color", "name": "inverse-emphasis", "description": "The emphasized inverse color variable." }, { "type": "Color", "name": "inverse-on-subtle", "description": "The text color variable for content on inverse subtle." }, { "type": "Color", "name": "on-inverse", "description": "The text color variable for content on inverse." }, { "type": "Color", "name": "inverse-on-surface", "description": "The text color variable for content on surface." }, { "type": "Color", "name": "series-a", "description": "The series A color variable." }, { "type": "Color", "name": "series-a-bold", "description": "The bold series A color variable." }, { "type": "Color", "name": "series-a-bolder", "description": "The bolder series A color variable." }, { "type": "Color", "name": "series-a-subtle", "description": "The subtle series A color variable." }, { "type": "Color", "name": "series-a-subtler", "description": "The subtler series A color variable." }, { "type": "Color", "name": "series-b", "description": "The series B color variable." }, { "type": "Color", "name": "series-b-bold", "description": "The bold series B color variable." }, { "type": "Color", "name": "series-b-bolder", "description": "The bolder series B color variable." }, { "type": "Color", "name": "series-b-subtle", "description": "The subtle series B color variable." }, { "type": "Color", "name": "series-b-subtler", "description": "The subtler series B color variable." }, { "type": "Color", "name": "series-c", "description": "The series C color variable." }, { "type": "Color", "name": "series-c-bold", "description": "The bold series C color variable." }, { "type": "Color", "name": "series-c-bolder", "description": "The bolder series C color variable." }, { "type": "Color", "name": "series-c-subtle", "description": "The subtle series C color variable." }, { "type": "Color", "name": "series-c-subtler", "description": "The subtler series C color variable." }, { "type": "Color", "name": "series-d", "description": "The series D color variable." }, { "type": "Color", "name": "series-d-bold", "description": "The bold series D color variable." }, { "type": "Color", "name": "series-d-bolder", "description": "The bolder series D color variable." }, { "type": "Color", "name": "series-d-subtle", "description": "The subtle series D color variable." }, { "type": "Color", "name": "series-d-subtler", "description": "The subtler series D color variable." }, { "type": "Color", "name": "series-e", "description": "The series E color variable." }, { "type": "Color", "name": "series-e-bold", "description": "The bold series E color variable." }, { "type": "Color", "name": "series-e-bolder", "description": "The bolder series E color variable." }, { "type": "Color", "name": "series-e-subtle", "description": "The subtle series E color variable." }, { "type": "Color", "name": "series-e-subtler", "description": "The subtler series E color variable." }, { "type": "Color", "name": "series-f", "description": "The series F color variable." }, { "type": "Color", "name": "series-f-bold", "description": "The bold series F color variable." }, { "type": "Color", "name": "series-f-bolder", "description": "The bolder series F color variable." }, { "type": "Color", "name": "series-f-subtle", "description": "The subtle series F color variable." }, { "type": "Color", "name": "series-f-subtler", "description": "The subtler series F color variable." } ], "access": "public", "file": { "path": "core/scss/color-system/_swatch.scss", "name": "_swatch.scss" }, "usedBy": [ { "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", "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 } } } ] }, { "description": "The global default Elevation map.\n", "commentRange": { "start": 42, "end": 43 },