@haxtheweb/simple-colors-shared-styles/custom-elements.json

shared styles for simple-colors

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "simple-colors-shared-styles.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "SimpleColorsSharedStyles",
          "members": [
            {
              "kind": "field",
              "name": "tag",
              "static": true,
              "description": "Store the tag name to make it easier to obtain directly.",
              "readonly": true
            },
            {
              "kind": "method",
              "name": "getColorInfo",
              "parameters": [
                {
                  "name": "colorName"
                },
                {
                  "description": "CSS variable (eg. `--simple-colors-fixed-theme-red-3`)",
                  "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": "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": "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": "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": "method",
              "name": "indexToShade",
              "parameters": [
                {
                  "name": "index"
                },
                {
                  "description": "shade",
                  "name": "the",
                  "type": {
                    "text": "number"
                  }
                }
              ],
              "description": "gets the current shade based on the index"
            },
            {
              "kind": "method",
              "name": "shadeToIndex",
              "parameters": [
                {
                  "name": "shade"
                },
                {
                  "description": "index",
                  "name": "the",
                  "type": {
                    "text": "number"
                  }
                }
              ],
              "description": "gets the current shade based on the index"
            },
            {
              "kind": "field",
              "name": "colors",
              "privacy": "public",
              "type": {
                "text": "object"
              },
              "description": "The colors object.\nEach color contains an array of shades as hex codes from lightest to darkest.",
              "default": "{ grey: [ \"#ffffff\", \"#eeeeee\", \"#dddddd\", \"#cccccc\", \"#bbbbbb\", \"#999999\", \"#666666\", \"#444444\", \"#333333\", \"#222222\", \"#111111\", \"#000000\", ], red: [ \"#ffdddd\", \"#ffaeae\", \"#ff8f8f\", \"#ff7474\", \"#fd5151\", \"#ff2222\", \"#ee0000\", \"#ac0000\", \"#850000\", \"#670000\", \"#520000\", \"#3f0000\", ], pink: [ \"#ffe6f1\", \"#ffa5cf\", \"#ff87c0\", \"#ff73b5\", \"#fd60aa\", \"#ff3996\", \"#da004e\", \"#b80042\", \"#980036\", \"#78002b\", \"#5a0020\", \"#440019\", ], purple: [ \"#fce6ff\", \"#f4affd\", \"#f394ff\", \"#f07cff\", \"#ed61ff\", \"#e200ff\", \"#a500ba\", \"#8a009b\", \"#6c0079\", \"#490052\", \"#33003a\", \"#200025\", ], \"deep-purple\": [ \"#f3e4ff\", \"#ddacff\", \"#c97eff\", \"#bb63f9\", \"#b44aff\", \"#a931ff\", \"#7e00d8\", \"#5d009f\", \"#4c0081\", \"#3a0063\", \"#2a0049\", \"#1d0033\", ], indigo: [ \"#e5ddff\", \"#c3b2ff\", \"#af97ff\", \"#9e82ff\", \"#9373ff\", \"#835fff\", \"#3a00ff\", \"#2801b0\", \"#20008c\", \"#160063\", \"#100049\", \"#0a0030\", ], blue: [ \"#e2ecff\", \"#acc9ff\", \"#95baff\", \"#74a5ff\", \"#5892fd\", \"#4083ff\", \"#0059ff\", \"#0041bb\", \"#003494\", \"#002569\", \"#001947\", \"#001333\", ], \"light-blue\": [ \"#cde8ff\", \"#a1d1ff\", \"#92c9ff\", \"#65b3ff\", \"#58adff\", \"#41a1ff\", \"#007ffc\", \"#0066ca\", \"#0055a8\", \"#003f7d\", \"#002850\", \"#001b36\", ], cyan: [ \"#ddf8ff\", \"#9beaff\", \"#77e2ff\", \"#33d4ff\", \"#1ccfff\", \"#00c9ff\", \"#009dc7\", \"#007999\", \"#005970\", \"#003f50\", \"#002c38\", \"#001a20\", ], teal: [ \"#d9fff0\", \"#98ffd7\", \"#79ffcb\", \"#56ffbd\", \"#29ffac\", \"#00ff9c\", \"#009d75\", \"#007658\", \"#004e3a\", \"#003829\", \"#002a20\", \"#001b14\", ], green: [ \"#e1ffeb\", \"#acffc9\", \"#79ffa7\", \"#49ff88\", \"#24ff70\", \"#00f961\", \"#008c37\", \"#00762e\", \"#005a23\", \"#003d18\", \"#002a11\", \"#001d0c\", ], \"light-green\": [ \"#ebffdb\", \"#c7ff9b\", \"#b1ff75\", \"#a1fd5a\", \"#8efd38\", \"#6fff00\", \"#429d00\", \"#357f00\", \"#296100\", \"#1b3f00\", \"#143000\", \"#0d2000\", ], lime: [ \"#f1ffd2\", \"#dfff9b\", \"#d4ff77\", \"#caff58\", \"#bdff2d\", \"#aeff00\", \"#649900\", \"#4d7600\", \"#3b5a00\", \"#293f00\", \"#223400\", \"#182400\", ], yellow: [ \"#ffffd5\", \"#ffffac\", \"#ffff90\", \"#ffff7c\", \"#ffff3a\", \"#f6f600\", \"#929100\", \"#787700\", \"#585700\", \"#454400\", \"#303000\", \"#242400\", ], amber: [ \"#fff2d4\", \"#ffdf92\", \"#ffd677\", \"#ffcf5e\", \"#ffc235\", \"#ffc500\", \"#b28900\", \"#876800\", \"#614b00\", \"#413200\", \"#302500\", \"#221a00\", ], orange: [ \"#ffebd7\", \"#ffca92\", \"#ffbd75\", \"#ffb05c\", \"#ff9e36\", \"#ff9625\", \"#e56a00\", \"#ae5100\", \"#833d00\", \"#612d00\", \"#3d1c00\", \"#2c1400\", ], \"deep-orange\": [ \"#ffe7e0\", \"#ffb299\", \"#ffa588\", \"#ff8a64\", \"#ff7649\", \"#ff6c3c\", \"#f53100\", \"#b92500\", \"#8a1c00\", \"#561100\", \"#3a0c00\", \"#240700\", ], brown: [ \"#f0e2de\", \"#e5b8aa\", \"#c59485\", \"#b68373\", \"#ac7868\", \"#a47060\", \"#85574a\", \"#724539\", \"#5b3328\", \"#3b1e15\", \"#2c140e\", \"#200e09\", ], \"blue-grey\": [ \"#e7eff1\", \"#b1c5ce\", \"#9badb6\", \"#8d9fa7\", \"#7a8f98\", \"#718892\", \"#56707c\", \"#40535b\", \"#2f3e45\", \"#1e282c\", \"#182023\", \"#0f1518\", ], }",
              "attribute": "colors"
            },
            {
              "kind": "field",
              "name": "contrasts",
              "privacy": "public",
              "type": {
                "text": "object"
              },
              "description": "Object with information on which color combinations are WCAG 2.0AA compliant, \"eg\": \n{\n \"greyColor\": {          //if either the color or its contrast will be a grey\n   \"aaLarge\": [          //if bold text >= 14pt, text >= 18pt, decorative only, or disabled\n     {                 //for the first shade of a color\n       \"min\": 7,         //index of the lightest contrasting shade of another color\n       \"max\": 12         //index of the darkest contrasting shade of another color\n     },\n     ...\n   ],\n   \"aa\": [ ... ]         //if bold text < 14pt, or text < 18pt\n },\n \"colorColor\": { ... }   //if neither the color nor its contrast are grey\n}",
              "default": "{ greyColor: { aaLarge: [ { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 8, max: 12 }, { min: 10, max: 12 }, { min: 1, max: 3 }, { min: 1, max: 5 }, { min: 1, max: 6 }, { min: 1, max: 6 }, { min: 1, max: 6 }, { min: 1, max: 6 }, ], aa: [ //if bold text < 14pt, or text < 18pt { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 8, max: 12 }, { min: 8, max: 12 }, { min: 11, max: 12 }, { min: 1, max: 2 }, { min: 1, max: 7 }, { min: 1, max: 7 }, { min: 1, max: 6 }, { min: 1, max: 6 }, { min: 1, max: 6 }, ], }, colorColor: { //if neither the color nor its contrast are grey aaLarge: [ { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 8, max: 12 }, { min: 9, max: 12 }, { min: 10, max: 12 }, { min: 11, max: 12 }, { min: 1, max: 2 }, { min: 1, max: 3 }, { min: 1, max: 4 }, { min: 1, max: 5 }, { min: 1, max: 6 }, { min: 1, max: 6 }, ], aa: [ { min: 8, max: 12 }, { min: 8, max: 12 }, { min: 9, max: 12 }, { min: 9, max: 12 }, { min: 11, max: 12 }, { min: 12, max: 12 }, { min: 1, max: 1 }, { min: 1, max: 2 }, { min: 1, max: 4 }, { min: 1, max: 4 }, { min: 1, max: 5 }, { min: 1, max: 5 }, ], }, }",
              "attribute": "contrasts"
            }
          ],
          "attributes": [
            {
              "name": "colors",
              "type": {
                "text": "object"
              },
              "description": "The colors object.\nEach color contains an array of shades as hex codes from lightest to darkest.",
              "default": "{ grey: [ \"#ffffff\", \"#eeeeee\", \"#dddddd\", \"#cccccc\", \"#bbbbbb\", \"#999999\", \"#666666\", \"#444444\", \"#333333\", \"#222222\", \"#111111\", \"#000000\", ], red: [ \"#ffdddd\", \"#ffaeae\", \"#ff8f8f\", \"#ff7474\", \"#fd5151\", \"#ff2222\", \"#ee0000\", \"#ac0000\", \"#850000\", \"#670000\", \"#520000\", \"#3f0000\", ], pink: [ \"#ffe6f1\", \"#ffa5cf\", \"#ff87c0\", \"#ff73b5\", \"#fd60aa\", \"#ff3996\", \"#da004e\", \"#b80042\", \"#980036\", \"#78002b\", \"#5a0020\", \"#440019\", ], purple: [ \"#fce6ff\", \"#f4affd\", \"#f394ff\", \"#f07cff\", \"#ed61ff\", \"#e200ff\", \"#a500ba\", \"#8a009b\", \"#6c0079\", \"#490052\", \"#33003a\", \"#200025\", ], \"deep-purple\": [ \"#f3e4ff\", \"#ddacff\", \"#c97eff\", \"#bb63f9\", \"#b44aff\", \"#a931ff\", \"#7e00d8\", \"#5d009f\", \"#4c0081\", \"#3a0063\", \"#2a0049\", \"#1d0033\", ], indigo: [ \"#e5ddff\", \"#c3b2ff\", \"#af97ff\", \"#9e82ff\", \"#9373ff\", \"#835fff\", \"#3a00ff\", \"#2801b0\", \"#20008c\", \"#160063\", \"#100049\", \"#0a0030\", ], blue: [ \"#e2ecff\", \"#acc9ff\", \"#95baff\", \"#74a5ff\", \"#5892fd\", \"#4083ff\", \"#0059ff\", \"#0041bb\", \"#003494\", \"#002569\", \"#001947\", \"#001333\", ], \"light-blue\": [ \"#cde8ff\", \"#a1d1ff\", \"#92c9ff\", \"#65b3ff\", \"#58adff\", \"#41a1ff\", \"#007ffc\", \"#0066ca\", \"#0055a8\", \"#003f7d\", \"#002850\", \"#001b36\", ], cyan: [ \"#ddf8ff\", \"#9beaff\", \"#77e2ff\", \"#33d4ff\", \"#1ccfff\", \"#00c9ff\", \"#009dc7\", \"#007999\", \"#005970\", \"#003f50\", \"#002c38\", \"#001a20\", ], teal: [ \"#d9fff0\", \"#98ffd7\", \"#79ffcb\", \"#56ffbd\", \"#29ffac\", \"#00ff9c\", \"#009d75\", \"#007658\", \"#004e3a\", \"#003829\", \"#002a20\", \"#001b14\", ], green: [ \"#e1ffeb\", \"#acffc9\", \"#79ffa7\", \"#49ff88\", \"#24ff70\", \"#00f961\", \"#008c37\", \"#00762e\", \"#005a23\", \"#003d18\", \"#002a11\", \"#001d0c\", ], \"light-green\": [ \"#ebffdb\", \"#c7ff9b\", \"#b1ff75\", \"#a1fd5a\", \"#8efd38\", \"#6fff00\", \"#429d00\", \"#357f00\", \"#296100\", \"#1b3f00\", \"#143000\", \"#0d2000\", ], lime: [ \"#f1ffd2\", \"#dfff9b\", \"#d4ff77\", \"#caff58\", \"#bdff2d\", \"#aeff00\", \"#649900\", \"#4d7600\", \"#3b5a00\", \"#293f00\", \"#223400\", \"#182400\", ], yellow: [ \"#ffffd5\", \"#ffffac\", \"#ffff90\", \"#ffff7c\", \"#ffff3a\", \"#f6f600\", \"#929100\", \"#787700\", \"#585700\", \"#454400\", \"#303000\", \"#242400\", ], amber: [ \"#fff2d4\", \"#ffdf92\", \"#ffd677\", \"#ffcf5e\", \"#ffc235\", \"#ffc500\", \"#b28900\", \"#876800\", \"#614b00\", \"#413200\", \"#302500\", \"#221a00\", ], orange: [ \"#ffebd7\", \"#ffca92\", \"#ffbd75\", \"#ffb05c\", \"#ff9e36\", \"#ff9625\", \"#e56a00\", \"#ae5100\", \"#833d00\", \"#612d00\", \"#3d1c00\", \"#2c1400\", ], \"deep-orange\": [ \"#ffe7e0\", \"#ffb299\", \"#ffa588\", \"#ff8a64\", \"#ff7649\", \"#ff6c3c\", \"#f53100\", \"#b92500\", \"#8a1c00\", \"#561100\", \"#3a0c00\", \"#240700\", ], brown: [ \"#f0e2de\", \"#e5b8aa\", \"#c59485\", \"#b68373\", \"#ac7868\", \"#a47060\", \"#85574a\", \"#724539\", \"#5b3328\", \"#3b1e15\", \"#2c140e\", \"#200e09\", ], \"blue-grey\": [ \"#e7eff1\", \"#b1c5ce\", \"#9badb6\", \"#8d9fa7\", \"#7a8f98\", \"#718892\", \"#56707c\", \"#40535b\", \"#2f3e45\", \"#1e282c\", \"#182023\", \"#0f1518\", ], }",
              "fieldName": "colors"
            },
            {
              "name": "contrasts",
              "type": {
                "text": "object"
              },
              "description": "Object with information on which color combinations are WCAG 2.0AA compliant, \"eg\": \n{\n \"greyColor\": {          //if either the color or its contrast will be a grey\n   \"aaLarge\": [          //if bold text >= 14pt, text >= 18pt, decorative only, or disabled\n     {                 //for the first shade of a color\n       \"min\": 7,         //index of the lightest contrasting shade of another color\n       \"max\": 12         //index of the darkest contrasting shade of another color\n     },\n     ...\n   ],\n   \"aa\": [ ... ]         //if bold text < 14pt, or text < 18pt\n },\n \"colorColor\": { ... }   //if neither the color nor its contrast are grey\n}",
              "default": "{ greyColor: { aaLarge: [ { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 8, max: 12 }, { min: 10, max: 12 }, { min: 1, max: 3 }, { min: 1, max: 5 }, { min: 1, max: 6 }, { min: 1, max: 6 }, { min: 1, max: 6 }, { min: 1, max: 6 }, ], aa: [ //if bold text < 14pt, or text < 18pt { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 8, max: 12 }, { min: 8, max: 12 }, { min: 11, max: 12 }, { min: 1, max: 2 }, { min: 1, max: 7 }, { min: 1, max: 7 }, { min: 1, max: 6 }, { min: 1, max: 6 }, { min: 1, max: 6 }, ], }, colorColor: { //if neither the color nor its contrast are grey aaLarge: [ { min: 7, max: 12 }, { min: 7, max: 12 }, { min: 8, max: 12 }, { min: 9, max: 12 }, { min: 10, max: 12 }, { min: 11, max: 12 }, { min: 1, max: 2 }, { min: 1, max: 3 }, { min: 1, max: 4 }, { min: 1, max: 5 }, { min: 1, max: 6 }, { min: 1, max: 6 }, ], aa: [ { min: 8, max: 12 }, { min: 8, max: 12 }, { min: 9, max: 12 }, { min: 9, max: 12 }, { min: 11, max: 12 }, { min: 12, max: 12 }, { min: 1, max: 1 }, { min: 1, max: 2 }, { min: 1, max: 4 }, { min: 1, max: 4 }, { min: 1, max: 5 }, { min: 1, max: 5 }, ], }, }",
              "fieldName": "contrasts"
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit"
          },
          "customElement": true
        },
        {
          "kind": "variable",
          "name": "SimpleColorsSharedStylesGlobal"
        }
      ],
      "exports": [
        {
          "kind": "custom-element-definition",
          "declaration": {
            "name": "SimpleColorsSharedStyles",
            "module": "simple-colors-shared-styles.js"
          }
        },
        {
          "kind": "js",
          "name": "SimpleColorsSharedStyles",
          "declaration": {
            "name": "SimpleColorsSharedStyles",
            "module": "simple-colors-shared-styles.js"
          }
        },
        {
          "kind": "js",
          "name": "SimpleColorsSharedStylesGlobal",
          "declaration": {
            "name": "SimpleColorsSharedStylesGlobal",
            "module": "simple-colors-shared-styles.js"
          }
        }
      ]
    }
  ]
}