@haxtheweb/simple-colors
Version:
Automated conversion of simple-colors/
1,134 lines (1,133 loc) • 35 kB
JSON
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "simple-colors.js",
"declarations": [
{
"kind": "mixin",
"description": "",
"name": "SimpleColorsSuper",
"members": [
{
"kind": "field",
"name": "styles",
"static": true,
"readonly": true
},
{
"kind": "field",
"name": "properties",
"static": true,
"readonly": true
},
{
"kind": "field",
"name": "tag",
"static": true,
"readonly": true
},
{
"kind": "method",
"name": "invertShade",
"parameters": [
{
"name": "shade"
},
{
"description": "inverted shade",
"name": "the",
"type": {
"text": "number"
}
}
],
"description": "gets the current shade"
},
{
"kind": "method",
"name": "getColorInfo",
"parameters": [
{
"name": "colorName"
},
{
"description": "CSS variable (eg. `--simple-colors-fixed-theme-red-3`) or a class (eg. `.simple-colors-fixed-theme-red-3-text`)",
"name": "the",
"type": {
"text": "string"
}
},
{
"description": "object that includes the theme, color, and shade information",
"name": "an",
"type": {
"text": "object"
}
}
],
"description": "gets the color information of a given CSS variable or class"
},
{
"kind": "method",
"name": "makeVariable",
"parameters": [
{
"name": "color",
"default": "\"grey\""
},
{
"name": "shade",
"default": "1"
},
{
"name": "theme",
"default": "\"default\""
},
{
"description": "color shade",
"name": "the",
"type": {
"text": "boolean"
}
}
],
"description": "returns a variable based on color name, shade, and fixed theme",
"return": {
"type": {
"text": "string"
}
}
},
{
"kind": "method",
"name": "getContrastingColors",
"parameters": [
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "isLarge"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "of the WCAG 2.0 AA-compliant colors and shades",
"name": "all",
"type": {
"text": "object"
}
}
],
"description": "for large or small text given a color and its shade,\nlists all the colors and shades that would be\nWCAG 2.0 AA-compliant for contrast"
},
{
"kind": "method",
"name": "getContrastingShades",
"parameters": [
{
"name": "isLarge"
},
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "contrastName"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "color name, e.g. \"grey\"",
"name": "contrasting",
"type": {
"text": "string"
}
},
{
"description": "of the WCAG 2.0 AA-compliant shades of the contrasting color",
"name": "all",
"type": {
"text": "array"
}
}
],
"description": "for large or small text given a color and its shade,\nlists all the shades of another color that would be\nWCAG 2.0 AA-compliant for contrast"
},
{
"kind": "method",
"name": "isContrastCompliant",
"parameters": [
{
"name": "isLarge"
},
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "contrastName"
},
{
"name": "contrastShade"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "color name, e.g. \"grey\"",
"name": "contrasting",
"type": {
"text": "string"
}
},
{
"description": "shade, e.g. 12",
"name": "contrast",
"type": {
"text": "string"
}
},
{
"description": "or not the contrasting shade is WCAG 2.0 AA-compliant",
"name": "whether",
"type": {
"text": "boolean"
}
}
],
"description": "determines if two shades are WCAG 2.0 AA-compliant for contrast"
},
{
"kind": "field",
"name": "accentColor",
"privacy": "public",
"type": {
"text": "string"
},
"description": "a selected accent-\"color\": grey, red, pink, purple, etc.",
"default": "\"grey\"",
"attribute": "accent-color",
"reflects": true
},
{
"kind": "field",
"name": "dark",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "make the default theme dark?",
"default": "false",
"attribute": "dark",
"reflects": true
},
{
"kind": "field",
"name": "colors"
}
],
"attributes": [
{
"name": "accent-color",
"type": {
"text": "string"
},
"description": "a selected accent-\"color\": grey, red, pink, purple, etc.",
"default": "\"grey\"",
"fieldName": "accentColor"
},
{
"name": "dark",
"type": {
"text": "boolean"
},
"description": "make the default theme dark?",
"default": "false",
"fieldName": "dark"
}
],
"parameters": [
{
"name": "SuperClass"
}
]
},
{
"kind": "class",
"description": "`simple-colors`\na shared set of styles for `@haxtheweb`\n### Styling\nSee demo of \"all of the colors\" (`demo/colors.html`) for styling.",
"name": "SimpleColors",
"mixins": [
{
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "simple-colors",
"customElement": true,
"attributes": [
{
"name": "accent-color",
"type": {
"text": "string"
},
"description": "a selected accent-\"color\": grey, red, pink, purple, etc.",
"default": "\"grey\"",
"fieldName": "accentColor",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"name": "dark",
"type": {
"text": "boolean"
},
"description": "make the default theme dark?",
"default": "false",
"fieldName": "dark",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
}
],
"members": [
{
"kind": "field",
"name": "styles",
"static": true,
"readonly": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "properties",
"static": true,
"readonly": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "tag",
"static": true,
"readonly": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "invertShade",
"parameters": [
{
"name": "shade"
},
{
"description": "inverted shade",
"name": "the",
"type": {
"text": "number"
}
}
],
"description": "gets the current shade",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "getColorInfo",
"parameters": [
{
"name": "colorName"
},
{
"description": "CSS variable (eg. `--simple-colors-fixed-theme-red-3`) or a class (eg. `.simple-colors-fixed-theme-red-3-text`)",
"name": "the",
"type": {
"text": "string"
}
},
{
"description": "object that includes the theme, color, and shade information",
"name": "an",
"type": {
"text": "object"
}
}
],
"description": "gets the color information of a given CSS variable or class",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "makeVariable",
"parameters": [
{
"name": "color",
"default": "\"grey\""
},
{
"name": "shade",
"default": "1"
},
{
"name": "theme",
"default": "\"default\""
},
{
"description": "color shade",
"name": "the",
"type": {
"text": "boolean"
}
}
],
"description": "returns a variable based on color name, shade, and fixed theme",
"return": {
"type": {
"text": "string"
}
},
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "getContrastingColors",
"parameters": [
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "isLarge"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "of the WCAG 2.0 AA-compliant colors and shades",
"name": "all",
"type": {
"text": "object"
}
}
],
"description": "for large or small text given a color and its shade,\nlists all the colors and shades that would be\nWCAG 2.0 AA-compliant for contrast",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "getContrastingShades",
"parameters": [
{
"name": "isLarge"
},
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "contrastName"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "color name, e.g. \"grey\"",
"name": "contrasting",
"type": {
"text": "string"
}
},
{
"description": "of the WCAG 2.0 AA-compliant shades of the contrasting color",
"name": "all",
"type": {
"text": "array"
}
}
],
"description": "for large or small text given a color and its shade,\nlists all the shades of another color that would be\nWCAG 2.0 AA-compliant for contrast",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "isContrastCompliant",
"parameters": [
{
"name": "isLarge"
},
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "contrastName"
},
{
"name": "contrastShade"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "color name, e.g. \"grey\"",
"name": "contrasting",
"type": {
"text": "string"
}
},
{
"description": "shade, e.g. 12",
"name": "contrast",
"type": {
"text": "string"
}
},
{
"description": "or not the contrasting shade is WCAG 2.0 AA-compliant",
"name": "whether",
"type": {
"text": "boolean"
}
}
],
"description": "determines if two shades are WCAG 2.0 AA-compliant for contrast",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "accentColor",
"privacy": "public",
"type": {
"text": "string"
},
"description": "a selected accent-\"color\": grey, red, pink, purple, etc.",
"default": "\"grey\"",
"attribute": "accent-color",
"reflects": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "dark",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "make the default theme dark?",
"default": "false",
"attribute": "dark",
"reflects": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "colors",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
}
]
}
],
"exports": [
{
"kind": "custom-element-definition",
"declaration": {
"name": "SimpleColors",
"module": "simple-colors.js"
}
},
{
"kind": "js",
"name": "SimpleColors",
"declaration": {
"name": "SimpleColors",
"module": "simple-colors.js"
}
},
{
"kind": "js",
"name": "SimpleColorsSuper",
"declaration": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "lib/simple-colors-picker.js",
"declarations": [
{
"kind": "class",
"description": "`simple-colors-picker`\na select element for changing `simple-colors` attributes in demos\n\n### Styling\nSee demo of \"all of the colors\" (`demo/colors.html`) for styling.",
"name": "SimpleColorsPicker",
"members": [
{
"kind": "field",
"name": "tag",
"static": true,
"readonly": true,
"description": "Store the tag name to make it easier to obtain directly.",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "_getOptions",
"parameters": [
{
"name": "colors"
},
{
"name": "shades"
},
{
"name": "dark"
},
{
"description": "options object to convert",
"name": "the",
"type": {
"text": "object"
}
}
],
"description": "gets options for the selectors"
},
{
"kind": "method",
"name": "_fireChangeEvent",
"description": "Fires with any property change."
},
{
"kind": "field",
"name": "allowNull",
"type": {
"text": "boolean"
},
"default": "true"
},
{
"kind": "field",
"name": "shades",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "Show all shades instead of just main accent-colors",
"default": "false",
"attribute": "shades",
"reflects": true
},
{
"kind": "field",
"name": "options"
},
{
"kind": "field",
"name": "styles",
"static": true,
"readonly": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "properties",
"static": true,
"readonly": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "invertShade",
"parameters": [
{
"name": "shade"
},
{
"description": "inverted shade",
"name": "the",
"type": {
"text": "number"
}
}
],
"description": "gets the current shade",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "getColorInfo",
"parameters": [
{
"name": "colorName"
},
{
"description": "CSS variable (eg. `--simple-colors-fixed-theme-red-3`) or a class (eg. `.simple-colors-fixed-theme-red-3-text`)",
"name": "the",
"type": {
"text": "string"
}
},
{
"description": "object that includes the theme, color, and shade information",
"name": "an",
"type": {
"text": "object"
}
}
],
"description": "gets the color information of a given CSS variable or class",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "makeVariable",
"parameters": [
{
"name": "color",
"default": "\"grey\""
},
{
"name": "shade",
"default": "1"
},
{
"name": "theme",
"default": "\"default\""
},
{
"description": "color shade",
"name": "the",
"type": {
"text": "boolean"
}
}
],
"description": "returns a variable based on color name, shade, and fixed theme",
"return": {
"type": {
"text": "string"
}
},
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "getContrastingColors",
"parameters": [
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "isLarge"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "of the WCAG 2.0 AA-compliant colors and shades",
"name": "all",
"type": {
"text": "object"
}
}
],
"description": "for large or small text given a color and its shade,\nlists all the colors and shades that would be\nWCAG 2.0 AA-compliant for contrast",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "getContrastingShades",
"parameters": [
{
"name": "isLarge"
},
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "contrastName"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "color name, e.g. \"grey\"",
"name": "contrasting",
"type": {
"text": "string"
}
},
{
"description": "of the WCAG 2.0 AA-compliant shades of the contrasting color",
"name": "all",
"type": {
"text": "array"
}
}
],
"description": "for large or small text given a color and its shade,\nlists all the shades of another color that would be\nWCAG 2.0 AA-compliant for contrast",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "method",
"name": "isContrastCompliant",
"parameters": [
{
"name": "isLarge"
},
{
"name": "colorName"
},
{
"name": "colorShade"
},
{
"name": "contrastName"
},
{
"name": "contrastShade"
},
{
"description": "text? >= 18pt || (bold && >= 14pt)",
"name": "large",
"type": {
"text": "boolean"
}
},
{
"description": "shade, e.g. 3",
"name": "color",
"type": {
"text": "string"
}
},
{
"description": "color name, e.g. \"grey\"",
"name": "contrasting",
"type": {
"text": "string"
}
},
{
"description": "shade, e.g. 12",
"name": "contrast",
"type": {
"text": "string"
}
},
{
"description": "or not the contrasting shade is WCAG 2.0 AA-compliant",
"name": "whether",
"type": {
"text": "boolean"
}
}
],
"description": "determines if two shades are WCAG 2.0 AA-compliant for contrast",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "accentColor",
"privacy": "public",
"type": {
"text": "string"
},
"description": "a selected accent-\"color\": grey, red, pink, purple, etc.",
"default": "\"grey\"",
"attribute": "accent-color",
"reflects": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "dark",
"privacy": "public",
"type": {
"text": "boolean"
},
"description": "make the default theme dark?",
"default": "false",
"attribute": "dark",
"reflects": true,
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"kind": "field",
"name": "colors",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
}
],
"events": [
{
"name": "change",
"type": {
"text": "CustomEvent"
}
}
],
"attributes": [
{
"name": "shades",
"type": {
"text": "boolean"
},
"description": "Show all shades instead of just main accent-colors",
"default": "false",
"fieldName": "shades"
},
{
"name": "accent-color",
"type": {
"text": "string"
},
"description": "a selected accent-\"color\": grey, red, pink, purple, etc.",
"default": "\"grey\"",
"fieldName": "accentColor",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
},
{
"name": "dark",
"type": {
"text": "boolean"
},
"description": "make the default theme dark?",
"default": "false",
"fieldName": "dark",
"inheritedFrom": {
"name": "SimpleColorsSuper",
"module": "simple-colors.js"
}
}
],
"mixins": [
{
"name": "SimplePickerBehaviors",
"package": "@haxtheweb/simple-picker/simple-picker.js"
},
{
"name": "SimpleColorsSuper",
"module": "/simple-colors.js"
}
],
"superclass": {
"name": "LitElement",
"package": "lit"
},
"tagName": "simple-colors-picker",
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "SimpleColorsPicker",
"declaration": {
"name": "SimpleColorsPicker",
"module": "lib/simple-colors-picker.js"
}
},
{
"kind": "custom-element-definition",
"declaration": {
"name": "SimpleColorsPicker",
"module": "lib/simple-colors-picker.js"
}
}
]
}
]
}