Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@lrnwebcomponents/simple-colors
Advanced tools
@lrnwebcomponents/simple-colors - npm Package Compare versions
Comparing version 2.1.1 to 2.1.2
@@ -79,10 +79,3 @@ const gulp = require("gulp"); | ||
| }); | ||
| // run polymer build to generate everything fully | ||
| gulp.task("build", () => { | ||
| const spawn = require("child_process").spawn; | ||
| let child = spawn("polymer", ["build"]); | ||
| return child.on("close", function(code) { | ||
| console.log("child process exited with code " + code); | ||
| }); | ||
| }); | ||
| // run polymer analyze to generate documentation | ||
@@ -104,3 +97,3 @@ gulp.task("analyze", () => { | ||
| gulp | ||
| .src("./build/es6/" + packageJson.wcfactory.elementName + ".js") | ||
| .src("./" + packageJson.wcfactory.elementName + ".js") | ||
| .pipe( | ||
@@ -112,10 +105,3 @@ rename({ | ||
| .pipe(gulp.dest("./")); | ||
| gulp | ||
| .src("./build/es5-amd/" + packageJson.wcfactory.elementName + ".js") | ||
| .pipe( | ||
| rename({ | ||
| suffix: ".amd" | ||
| }) | ||
| ) | ||
| .pipe(gulp.dest("./")); | ||
| return gulp | ||
@@ -151,5 +137,2 @@ .src("./" + packageJson.wcfactory.elementName + ".js") | ||
| gulp.task( | ||
| "default", | ||
| gulp.series("merge", "analyze", "build", "compile", "sourcemaps") | ||
| ); | ||
| gulp.task("default", gulp.series("merge", "analyze", "compile", "sourcemaps")); |
@@ -195,3 +195,2 @@ /** | ||
| alt: "none", | ||
| style: "background-color: var(--simple-picker-background-color,#ddd)", | ||
| value: null | ||
@@ -198,0 +197,0 @@ } |
@@ -287,2 +287,161 @@ /** | ||
| }; | ||
| /** | ||
| * returns a variable based on color name, shade, and fixed theme | ||
| * | ||
| * @param {string} the color name | ||
| * @param {number} the color shade | ||
| * @param {boolean} the color shade | ||
| * @returns {string} the CSS Variable | ||
| */ | ||
| window.SimpleColorsStyles.makeVariable = ( | ||
| color = "grey", | ||
| shade = 1, | ||
| theme = "default" | ||
| ) => { | ||
| return ["--simple-colors", theme, "theme", color, shade].join("-"); | ||
| }; | ||
| /** | ||
| * adds all CSS variables for a given theme (default, dark, or light) | ||
| */ | ||
| window.SimpleColorsStyles.addThemeVariables = (theme, dark) => { | ||
| let str = []; | ||
| for (var name in window.SimpleColorsStyles.colors) { | ||
| str.push( | ||
| window.SimpleColorsStyles.addColorShades( | ||
| theme, | ||
| name, | ||
| window.SimpleColorsStyles.colors[name], | ||
| dark | ||
| ) | ||
| ); | ||
| } | ||
| return str.join(""); | ||
| }; | ||
| /** | ||
| * adds CSS variables for all shades of contrast for a given theme+color | ||
| * and assigns a hex code to it | ||
| * | ||
| * @returns {string} | ||
| */ | ||
| window.SimpleColorsStyles.addColorShades = (theme, color, hexcodes, dark) => { | ||
| let str = []; | ||
| for (let i = 0; i < hexcodes.length; i++) { | ||
| let cssvar = window.SimpleColorsStyles.makeVariable(color, i + 1, theme), | ||
| hex = dark | ||
| ? hexcodes[window.SimpleColorsStyles.invertIndex(i)] | ||
| : hexcodes[i]; | ||
| str.push(cssvar + ":" + hex + "; "); | ||
| } | ||
| return str.join(""); | ||
| }; | ||
| /** | ||
| * adds all CSS variables as styles for :host and :host([dark]) selectors | ||
| * | ||
| * @returns {string} | ||
| */ | ||
| window.SimpleColorsStyles.addCssVariables = sheet => { | ||
| if (typeof sheet !== typeof undefined) { | ||
| let greys = window.SimpleColorsStyles.colors["grey"]; | ||
| sheet.insertRule( | ||
| window.SimpleColorsStyles.makeRule( | ||
| "html", | ||
| window.SimpleColorsStyles.addColorShades( | ||
| "default", | ||
| "accent", | ||
| greys, | ||
| false | ||
| ) + window.SimpleColorsStyles.addThemeVariables("default", false) | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| sheet.insertRule( | ||
| window.SimpleColorsStyles.makeRule( | ||
| "body", | ||
| window.SimpleColorsStyles.addColorShades( | ||
| "fixed", | ||
| "accent", | ||
| greys, | ||
| false | ||
| ) + window.SimpleColorsStyles.addThemeVariables("fixed", false) | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| sheet.insertRule( | ||
| window.SimpleColorsStyles.makeRule( | ||
| "body[dark], [dark]", | ||
| window.SimpleColorsStyles.addColorShades( | ||
| "default", | ||
| "accent", | ||
| greys, | ||
| true | ||
| ) + window.SimpleColorsStyles.addThemeVariables("default", true) | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| return sheet; | ||
| } | ||
| }; | ||
| /** | ||
| * adds all CSS accent color variables as styles for :host([accent-color]]) selectors | ||
| * | ||
| * @returns {object} | ||
| */ | ||
| window.SimpleColorsStyles.addAccentVariables = sheet => { | ||
| if (typeof sheet !== typeof undefined) { | ||
| for (let color in window.SimpleColorsStyles.colors) { | ||
| sheet.insertRule( | ||
| window.SimpleColorsStyles.makeRule( | ||
| `body[accent-color="${color}"], [accent-color="${color}"]`, | ||
| [ | ||
| window.SimpleColorsStyles.addColorShades( | ||
| "default", | ||
| "accent", | ||
| window.SimpleColorsStyles.colors[color], | ||
| false | ||
| ), | ||
| window.SimpleColorsStyles.addColorShades( | ||
| "fixed", | ||
| "accent", | ||
| window.SimpleColorsStyles.colors[color], | ||
| false | ||
| ) | ||
| ].join("") | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| sheet.insertRule( | ||
| window.SimpleColorsStyles.makeRule( | ||
| `body[dark][accent-color="${color}"], [dark][accent-color="${color}"]`, | ||
| [ | ||
| window.SimpleColorsStyles.addColorShades( | ||
| "default", | ||
| "accent", | ||
| window.SimpleColorsStyles.colors[color], | ||
| true | ||
| ) | ||
| ].join("") | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| } | ||
| return sheet; | ||
| } | ||
| }; | ||
| window.SimpleColorsStyles.makeRule = (selector, style) => { | ||
| return selector + " {\n" + style + "\n}\n"; | ||
| }; | ||
| /** | ||
| * inverts the current index | ||
| * | ||
| * @param {string} the index | ||
| * @param {number} the inverted index | ||
| */ | ||
| window.SimpleColorsStyles.invertIndex = index => { | ||
| return window.SimpleColorsStyles.colors["grey"].length - 1 - parseInt(index); | ||
| }; | ||
| class SimpleColorsStyles extends PolymerElement { | ||
@@ -395,3 +554,3 @@ // properties available to the custom element for data binding | ||
| * life cycle, element is afixed to the DOM | ||
| */ | ||
| * / | ||
| connectedCallback() { | ||
@@ -401,14 +560,4 @@ super.connectedCallback(); | ||
| * append and register the shared styles | ||
| */ | ||
| * / | ||
| afterNextRender(this, function() { | ||
| let style = document.createElement("style"); | ||
| if (this.appendHead) { | ||
| document.head.appendChild(style); | ||
| } else { | ||
| this.parentNode.appendChild(style); | ||
| } | ||
| this.__sheet = style.sheet; | ||
| this.fullStyle = style; | ||
| this.addCssVariables(this.__sheet); | ||
| this.addAccentVariables(this.__sheet); | ||
| }); | ||
@@ -541,207 +690,15 @@ } | ||
| } | ||
| /** | ||
| * inverts the current index | ||
| * | ||
| * @param {string} the index | ||
| * @param {number} the inverted index | ||
| */ | ||
| invertIndex(index) { | ||
| return this.colors["grey"].length - 1 - parseInt(index); | ||
| } | ||
| /** | ||
| * returns the maximum contrast to the index | ||
| * | ||
| * @param {string} the index | ||
| * @param {number} the index with maximum contrast | ||
| */ | ||
| maxContrastIndex(index) { | ||
| return parseInt(index) < this.colors["grey"].length / 2 | ||
| ? this.colors["grey"].length - 1 | ||
| : 0; | ||
| } | ||
| /** | ||
| * returns the maximum contrast to the shade | ||
| * | ||
| * @param {string} the shade | ||
| * @param {number} the shade with maximum contrast | ||
| */ | ||
| maxContrastShade(shade) { | ||
| return parseInt(shade) < this.colors["grey"].length / 2 + 1 | ||
| ? this.colors["grey"].length | ||
| : 1; | ||
| } | ||
| /** | ||
| * returns a variable based on color name, shade, and fixed theme | ||
| * | ||
| * @param {string} the color name | ||
| * @param {number} the color shade | ||
| * @param {boolean} the color shade | ||
| * @returns {string} the CSS Variable | ||
| */ | ||
| makeVariable(color = "grey", shade = 1, theme = "default") { | ||
| return ["--simple-colors", theme, "theme", color, shade].join("-"); | ||
| } | ||
| /** | ||
| * gets the correct hexCode for a color shade, | ||
| * depending on whether or not the list is dark (inverted) | ||
| */ | ||
| getHex(hexcodes, index, dark) { | ||
| if (dark) { | ||
| return hexcodes[this.invertIndex(this.colors, index)]; | ||
| } else { | ||
| return hexcodes[index]; | ||
| } | ||
| } | ||
| /** | ||
| * adds all CSS variables for a given theme (default, dark, or light) | ||
| */ | ||
| addThemeVariables(theme, dark) { | ||
| let str = []; | ||
| for (var name in this.colors) { | ||
| str.push(this.addColorShades(theme, name, this.colors[name], dark)); | ||
| } | ||
| return str.join(""); | ||
| } | ||
| /** | ||
| * adds CSS variables for all shades of contrast for a given theme+color | ||
| * and assigns a hex code to it | ||
| * | ||
| * @returns {string} | ||
| */ | ||
| addColorShades(theme, color, hexcodes, dark) { | ||
| let str = []; | ||
| for (let i = 0; i < hexcodes.length; i++) { | ||
| let cssvar = this.makeVariable(color, i + 1, theme), | ||
| hex = dark ? hexcodes[this.invertIndex(i)] : hexcodes[i]; | ||
| str.push(cssvar + ":" + hex + "; "); | ||
| } | ||
| return str.join(""); | ||
| } | ||
| /** | ||
| * adds all CSS variables as styles for :host and :host([dark]) selectors | ||
| * | ||
| * @returns {string} | ||
| */ | ||
| addCssVariables(sheet) { | ||
| if (typeof sheet !== typeof undefined) { | ||
| let greys = this.colors["grey"]; | ||
| sheet.insertRule( | ||
| this.makeRule( | ||
| "html", | ||
| this.addColorShades("default", "accent", greys, false) + | ||
| this.addThemeVariables("default", false) | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| sheet.insertRule( | ||
| this.makeRule( | ||
| "html", | ||
| this.addColorShades("fixed", "accent", greys, false) + | ||
| this.addThemeVariables("fixed", false) | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| sheet.insertRule( | ||
| this.makeRule( | ||
| "[dark]", | ||
| this.addColorShades("default", "accent", greys, true) + | ||
| this.addThemeVariables("default", true) | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| return sheet; | ||
| } | ||
| } | ||
| /** | ||
| * adds all CSS accent color variables as styles for :host([accent-color]]) selectors | ||
| * | ||
| * @returns {object} | ||
| */ | ||
| addAccentVariables(sheet) { | ||
| if (typeof sheet !== typeof undefined) { | ||
| for (let color in this.colors) { | ||
| sheet.insertRule( | ||
| this.makeRule( | ||
| '[accent-color="' + color + '"]', | ||
| [ | ||
| this.addColorShades( | ||
| "default", | ||
| "accent", | ||
| this.colors[color], | ||
| false | ||
| ), | ||
| this.addColorShades("fixed", "accent", this.colors[color], false) | ||
| ].join("") | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| sheet.insertRule( | ||
| this.makeRule( | ||
| '[dark][accent-color="' + color + '"]', | ||
| [ | ||
| this.addColorShades("default", "accent", this.colors[color], true) | ||
| ].join("") | ||
| ), | ||
| sheet.cssRules.length | ||
| ); | ||
| } | ||
| return sheet; | ||
| } | ||
| } | ||
| /** | ||
| * Make style element that can be appended into things | ||
| */ | ||
| makeStyleElement() { | ||
| let style = document.createElement("style"); | ||
| style.appendChild(document.createTextNode(this.getAccentVariablesText())); | ||
| return style; | ||
| } | ||
| /** | ||
| * generate accent variables as text | ||
| */ | ||
| getAccentVariablesText() { | ||
| let text = ""; | ||
| for (let color in this.colors) { | ||
| text += this.makeRule( | ||
| ':host([accent-color="' + color + '"])', | ||
| [ | ||
| this.addColorShades("default", "accent", this.colors[color], false), | ||
| this.addColorShades("fixed", "accent", this.colors[color], false) | ||
| ].join("") | ||
| ); | ||
| text += this.makeRule( | ||
| ':host([dark][accent-color="' + color + '"])', | ||
| [ | ||
| this.addColorShades("default", "accent", this.colors[color], true) | ||
| ].join("") | ||
| ); | ||
| } | ||
| return text; | ||
| } | ||
| makeRule(selector, style) { | ||
| return selector + " {\n" + style + "\n}\n"; | ||
| } | ||
| } | ||
| window.customElements.define(SimpleColorsStyles.tag, SimpleColorsStyles); | ||
| export { SimpleColorsStyles }; | ||
| /** | ||
| * Checks to see if there is an instance available, and if not appends one | ||
| */ | ||
| window.SimpleColorsStyles.requestAvailability = function() { | ||
| window.SimpleColorsStyles.requestAvailability = () => { | ||
| if (window.SimpleColorsStyles.instance == null) { | ||
| window.SimpleColorsStyles.instance = document.createElement( | ||
| "simple-colors-styles" | ||
| ); | ||
| window.SimpleColorsStyles.instance.appendHead = true; | ||
| let style = document.createElement("style"); | ||
| document.head.appendChild(style); | ||
| window.SimpleColorsStyles.addCssVariables(style.sheet); | ||
| window.SimpleColorsStyles.addAccentVariables(style.sheet); | ||
| window.SimpleColorsStyles.instance = style.sheet; | ||
| } | ||
| document.body.appendChild(window.SimpleColorsStyles.instance); | ||
| return window.SimpleColorsStyles.instance; | ||
| }; |
@@ -19,3 +19,3 @@ { | ||
| }, | ||
| "version": "2.1.1", | ||
| "version": "2.1.2", | ||
| "description": "Automated conversion of simple-colors/", | ||
@@ -29,3 +29,2 @@ "repository": { | ||
| "umd": "simple-colors.umd.js", | ||
| "amd": "simple-colors.amd.js", | ||
| "scripts": { | ||
@@ -45,3 +44,3 @@ "test": "../../node_modules/.bin/wct --configFile ../../wct.conf.json node_modules/@lrnwebcomponents/simple-colors/test/", | ||
| "dependencies": { | ||
| "@lrnwebcomponents/simple-picker": "^2.1.1", | ||
| "@lrnwebcomponents/simple-picker": "^2.1.2", | ||
| "@polymer/iron-icons": "^3.0.1", | ||
@@ -52,4 +51,4 @@ "@polymer/polymer": "^3.2.0" | ||
| "@lrnwebcomponents/deduping-fix": "^2.1.1", | ||
| "@lrnwebcomponents/simple-modal": "^2.1.1", | ||
| "@lrnwebcomponents/storybook-utilities": "^2.1.1", | ||
| "@lrnwebcomponents/simple-modal": "^2.1.2", | ||
| "@lrnwebcomponents/storybook-utilities": "^2.1.2", | ||
| "@polymer/iron-component-page": "github:PolymerElements/iron-component-page", | ||
@@ -73,3 +72,3 @@ "@polymer/iron-demo-helpers": "^3.1.0", | ||
| ], | ||
| "gitHead": "377805ee041d6205232182b01f8e05a177ef3bf7" | ||
| "gitHead": "d857f1d834ec0bd10fee57ad11f60eb37416db07" | ||
| } |
@@ -19,2 +19,5 @@ { | ||
| }, | ||
| "sass": { | ||
| "minify": true | ||
| }, | ||
| "html": { | ||
@@ -21,0 +24,0 @@ "minify": true |
| /** | ||
| * Copyright 2018 The Pennsylvania State University | ||
| * @license Apache-2.0, see License.md for full text. | ||
| */import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element.js";import{SimpleColorsStyles}from"./lib/simple-colors-styles.js";/** | ||
| */ | ||
| import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
| import "./lib/simple-colors-styles.js"; | ||
| /** | ||
| * `simple-colors` | ||
@@ -18,16 +21,76 @@ * `a shared set of styles for @lrnwebcomponents` | ||
| * @demo demo/extending.html extending simple-colors | ||
| */class SimpleColors extends PolymerElement{// render function | ||
| static get template(){return html` | ||
| */ | ||
| class SimpleColors extends PolymerElement { | ||
| // render function | ||
| static get template() { | ||
| return html` | ||
| <style></style> | ||
| <slot></slot> | ||
| `}// properties available to the custom element for data binding | ||
| static get properties(){return{/** | ||
| `; | ||
| } | ||
| // properties available to the custom element for data binding | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * a selected accent-color: grey, red, pink, purple, etc. | ||
| */accentColor:{name:"accentColor",type:"String",value:"grey",reflectToAttribute:!0,notify:!0},/** | ||
| */ | ||
| accentColor: { | ||
| name: "accentColor", | ||
| type: "String", | ||
| value: "grey", | ||
| reflectToAttribute: true, | ||
| notify: true | ||
| }, | ||
| /** | ||
| * make the default theme dark? | ||
| */dark:{name:"dark",type:"Boolean",value:!1,reflectToAttribute:!0,notify:!0},/** | ||
| */ | ||
| dark: { | ||
| name: "dark", | ||
| type: "Boolean", | ||
| value: false, | ||
| reflectToAttribute: true, | ||
| notify: true | ||
| }, | ||
| /** | ||
| * make the default theme dark? | ||
| */colors:{name:"colors",type:"Object",value:window.SimpleColorsStyles.colors,notify:!0}}}static get tag(){return"simple-colors"}constructor(){super();this.__utils=window.SimpleColorsStyles.requestAvailability()}/** | ||
| * life cycle, element is ready | ||
| */ready(){super.ready();this.shadowRoot.insertBefore(new SimpleColorsStyles().makeStyleElement(),this.shadowRoot.children[0])}/** | ||
| */ | ||
| colors: { | ||
| name: "colors", | ||
| type: "Object", | ||
| value: window.SimpleColorsStyles.colors, | ||
| notify: true | ||
| }, | ||
| /** | ||
| * styles inherited based on an ancestor's accent and dark attributes. | ||
| */ | ||
| inheritStyles: { | ||
| name: "inheritStyles", | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| } | ||
| }; | ||
| } | ||
| static get tag() { | ||
| return "simple-colors"; | ||
| } | ||
| ready() { | ||
| super.ready(); | ||
| let styles = window.SimpleColorsStyles.requestAvailability(); | ||
| if (!this.inheritStyles) { | ||
| let style = document.createElement("style"), | ||
| ruleList = styles.cssRules; | ||
| this.shadowRoot.appendChild(style); | ||
| for (let rule of ruleList) { | ||
| let text = rule.cssText; | ||
| style.innerText += text; | ||
| } | ||
| } | ||
| } | ||
| /** | ||
| * returns the maximum contrast to the shade | ||
@@ -37,3 +100,8 @@ * | ||
| * @param {number} the shade with maximum contrast | ||
| */maxContrastShade(shade){return this.__utils.maxContrastShade(shade)}/** | ||
| */ | ||
| maxContrastShade(shade) { | ||
| return this.__utils.maxContrastShade(shade); | ||
| } | ||
| /** | ||
| * gets the current shade | ||
@@ -43,3 +111,8 @@ * | ||
| * @param {number} the inverted shade | ||
| */invertShade(shade){return this.__utils.invertShade(shade)}/** | ||
| */ | ||
| invertShade(shade) { | ||
| return this.__utils.invertShade(shade); | ||
| } | ||
| /** | ||
| * gets the color information of a given CSS variable or class | ||
@@ -49,3 +122,8 @@ * | ||
| * @param {object} an object that includes the theme, color, and shade information | ||
| */getColorInfo(colorName){return this.__utils.getColorInfo(colorName)}/** | ||
| */ | ||
| getColorInfo(colorName) { | ||
| return this.__utils.getColorInfo(colorName); | ||
| } | ||
| /** | ||
| * returns a variable based on color name, shade, and fixed theme | ||
@@ -57,3 +135,12 @@ * | ||
| * @returns {string} the CSS Variable | ||
| */makeVariable(color="grey",shade=1,theme="default"){return this.__utils.makeVariable(color="grey",shade=1,theme="default")}/** | ||
| */ | ||
| makeVariable(color = "grey", shade = 1, theme = "default") { | ||
| return this.__utils.makeVariable( | ||
| (color = "grey"), | ||
| (shade = 1), | ||
| (theme = "default") | ||
| ); | ||
| } | ||
| /** | ||
| * for large or small text given a color and its shade, | ||
@@ -67,3 +154,8 @@ * lists all the colors and shades that would be | ||
| * @param {object} all of the WCAG 2.0 AA-compliant colors and shades | ||
| */getContrastingColors(colorName,colorShade,isLarge){return this.__utils.getContrastingColors(colorName,colorShade,isLarge)}/** | ||
| */ | ||
| getContrastingColors(colorName, colorShade, isLarge) { | ||
| return this.__utils.getContrastingColors(colorName, colorShade, isLarge); | ||
| } | ||
| /** | ||
| * for large or small text given a color and its shade, | ||
@@ -78,3 +170,13 @@ * lists all the shades of another color that would be | ||
| * @param {array} all of the WCAG 2.0 AA-compliant shades of the contrasting color | ||
| */getContrastingShades(isLarge,colorName,colorShade,contrastName){return this.__utils.getContrastingShades(isLarge,colorName,colorShade,contrastName)}/** | ||
| */ | ||
| getContrastingShades(isLarge, colorName, colorShade, contrastName) { | ||
| return this.__utils.getContrastingShades( | ||
| isLarge, | ||
| colorName, | ||
| colorShade, | ||
| contrastName | ||
| ); | ||
| } | ||
| /** | ||
| * determines if two shades are WCAG 2.0 AA-compliant for contrast | ||
@@ -88,2 +190,20 @@ * | ||
| * @param {boolean} whether or not the contrasting shade is WCAG 2.0 AA-compliant | ||
| */isContrastCompliant(isLarge,colorName,colorShade,contrastName,contrastShade){return this.__utils.isContrastCompliant(isLarge,colorName,colorShade,contrastName,contrastShade)}}customElements.define(SimpleColors.tag,SimpleColors);export{SimpleColors}; | ||
| */ | ||
| isContrastCompliant( | ||
| isLarge, | ||
| colorName, | ||
| colorShade, | ||
| contrastName, | ||
| contrastShade | ||
| ) { | ||
| return this.__utils.isContrastCompliant( | ||
| isLarge, | ||
| colorName, | ||
| colorShade, | ||
| contrastName, | ||
| contrastShade | ||
| ); | ||
| } | ||
| } | ||
| customElements.define(SimpleColors.tag, SimpleColors); | ||
| export { SimpleColors }; |
@@ -6,3 +6,3 @@ /** | ||
| import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
| import { SimpleColorsStyles } from "./lib/simple-colors-styles.js"; | ||
| import "./lib/simple-colors-styles.js"; | ||
| /** | ||
@@ -63,2 +63,11 @@ * `simple-colors` | ||
| notify: true | ||
| }, | ||
| /** | ||
| * styles inherited based on an ancestor's accent and dark attributes. | ||
| */ | ||
| inheritStyles: { | ||
| name: "inheritStyles", | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| } | ||
@@ -72,16 +81,15 @@ }; | ||
| constructor() { | ||
| super(); | ||
| this.__utils = window.SimpleColorsStyles.requestAvailability(); | ||
| } | ||
| /** | ||
| * life cycle, element is ready | ||
| */ | ||
| ready() { | ||
| super.ready(); | ||
| this.shadowRoot.insertBefore( | ||
| new SimpleColorsStyles().makeStyleElement(), | ||
| this.shadowRoot.children[0] | ||
| ); | ||
| let styles = window.SimpleColorsStyles.requestAvailability(); | ||
| if (!this.inheritStyles) { | ||
| let style = document.createElement("style"), | ||
| ruleList = styles.cssRules; | ||
| this.shadowRoot.appendChild(style); | ||
| for (let rule of ruleList) { | ||
| let text = rule.cssText; | ||
| style.innerText += text; | ||
| } | ||
| } | ||
| } | ||
@@ -88,0 +96,0 @@ |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@polymer/polymer/lib/utils/render-status.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@polymer/polymer/lib/utils/render-status.js"],t):t((e=e||self).SimpleColors={},e.polymerElement_js,e.renderStatus_js)}(this,function(e,t,n){"use strict";function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function f(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)}function l(e){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function u(e,t,n){return(u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var a=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=l(e)););return e}(e,t);if(a){var r=Object.getOwnPropertyDescriptor(a,t);return r.get?r.get.call(n):r.value}})(e,t,n||e)}window.SimpleColorsStyles={},window.SimpleColorsStyles.instance=null,window.SimpleColorsStyles.colors={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":["#ddefff","#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"]};var d=function(e){function o(){return r(this,o),c(this,l(o).apply(this,arguments))}return i(o,t.PolymerElement),f(o,[{key:"connectedCallback",value:function(){u(l(o.prototype),"connectedCallback",this).call(this),n.afterNextRender(this,function(){var e=document.createElement("style");this.appendHead?document.head.appendChild(e):this.parentNode.appendChild(e),this.__sheet=e.sheet,this.fullStyle=e,this.addCssVariables(this.__sheet),this.addAccentVariables(this.__sheet)})}},{key:"getColorInfo",value:function(e){var t=e.replace(/(simple-colors-)?(-text)?(-border)?/g,"").split("-theme-"),n=t.length>0?t[0]:"default",a=t.length>0?t[1].split("-"):t[0].split("-");return{theme:n,color:a.length>1?a.slice(1,a.length-1).join("-"):"grey",shade:a.length>1?a[a.length-1]:"1"}}},{key:"getContrastingShades",value:function(e,t,n,a){var r="grey"===t||"grey"===a?"greyColor":"colorColor",o=e?"aaLarge":"aa",f=parseInt(n)+1,i=this.contrasts[r][o][f];return Array(i.max-i.min+1).fill().map(function(e,t){return i.min+t})}},{key:"getContrastingColors",value:function(e,t,n){var a=this,r={};return Object.keys(this.colors).forEach(function(o){r[o]=a.getContrastingShades(n,e,t,o)}),r.color}},{key:"isContrastCompliant",value:function(e,t,n,a,r){var o="grey"===t||"grey"===a?"greyColor":"colorColor",f=e?"aaLarge":"aa",i=parseInt(n)+1,l=this.contrasts[o][f][i];return r>=l.min&&ontrastShade>=l.max}},{key:"indexToShade",value:function(e){return parseInt(e)+1}},{key:"shadeToIndex",value:function(e){return parseInt(e)-1}},{key:"invertShade",value:function(e){return this.colors.grey.length+1-parseInt(e)}},{key:"invertIndex",value:function(e){return this.colors.grey.length-1-parseInt(e)}},{key:"maxContrastIndex",value:function(e){return parseInt(e)<this.colors.grey.length/2?this.colors.grey.length-1:0}},{key:"maxContrastShade",value:function(e){return parseInt(e)<this.colors.grey.length/2+1?this.colors.grey.length:1}},{key:"makeVariable",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"grey",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return["--simple-colors",arguments.length>2&&void 0!==arguments[2]?arguments[2]:"default","theme",e,t].join("-")}},{key:"getHex",value:function(e,t,n){return n?e[this.invertIndex(this.colors,t)]:e[t]}},{key:"addThemeVariables",value:function(e,t){var n=[];for(var a in this.colors)n.push(this.addColorShades(e,a,this.colors[a],t));return n.join("")}},{key:"addColorShades",value:function(e,t,n,a){for(var r=[],o=0;o<n.length;o++){var f=this.makeVariable(t,o+1,e),i=a?n[this.invertIndex(o)]:n[o];r.push(f+":"+i+"; ")}return r.join("")}},{key:"addCssVariables",value:function(e){if("undefined"!==a(e)){var t=this.colors.grey;return e.insertRule(this.makeRule("html",this.addColorShades("default","accent",t,!1)+this.addThemeVariables("default",!1)),e.cssRules.length),e.insertRule(this.makeRule("html",this.addColorShades("fixed","accent",t,!1)+this.addThemeVariables("fixed",!1)),e.cssRules.length),e.insertRule(this.makeRule("[dark]",this.addColorShades("default","accent",t,!0)+this.addThemeVariables("default",!0)),e.cssRules.length),e}}},{key:"addAccentVariables",value:function(e){if("undefined"!==a(e)){for(var t in this.colors)e.insertRule(this.makeRule('[accent-color="'+t+'"]',[this.addColorShades("default","accent",this.colors[t],!1),this.addColorShades("fixed","accent",this.colors[t],!1)].join("")),e.cssRules.length),e.insertRule(this.makeRule('[dark][accent-color="'+t+'"]',[this.addColorShades("default","accent",this.colors[t],!0)].join("")),e.cssRules.length);return e}}},{key:"makeStyleElement",value:function(){var e=document.createElement("style");return e.appendChild(document.createTextNode(this.getAccentVariablesText())),e}},{key:"getAccentVariablesText",value:function(){var e="";for(var t in this.colors)e+=this.makeRule(':host([accent-color="'+t+'"])',[this.addColorShades("default","accent",this.colors[t],!1),this.addColorShades("fixed","accent",this.colors[t],!1)].join("")),e+=this.makeRule(':host([dark][accent-color="'+t+'"])',[this.addColorShades("default","accent",this.colors[t],!0)].join(""));return e}},{key:"makeRule",value:function(e,t){return e+" {\n"+t+"\n}\n"}}],[{key:"properties",get:function(){return{colors:{type:Object,value:window.SimpleColorsStyles.colors},contrasts:{type:Object,value:{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:[{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:{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}]}}}}}},{key:"tag",get:function(){return"simple-colors-styles"}}]),o}();function m(){var e,t,n=(e=["\n <style></style>\n <slot></slot>\n "],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return m=function(){return n},n}window.customElements.define(d.tag,d),window.SimpleColorsStyles.requestAvailability=function(){return null==window.SimpleColorsStyles.instance&&(window.SimpleColorsStyles.instance=document.createElement("simple-colors-styles"),window.SimpleColorsStyles.instance.appendHead=!0),document.body.appendChild(window.SimpleColorsStyles.instance),window.SimpleColorsStyles.instance};var h=function(e){function n(){var e;return r(this,n),(e=c(this,l(n).call(this))).__utils=window.SimpleColorsStyles.requestAvailability(),e}return i(n,t.PolymerElement),f(n,null,[{key:"template",get:function(){return t.html(m())}},{key:"properties",get:function(){return{accentColor:{name:"accentColor",type:"String",value:"grey",reflectToAttribute:!0,notify:!0},dark:{name:"dark",type:"Boolean",value:!1,reflectToAttribute:!0,notify:!0},colors:{name:"colors",type:"Object",value:window.SimpleColorsStyles.colors,notify:!0}}}},{key:"tag",get:function(){return"simple-colors"}}]),f(n,[{key:"ready",value:function(){u(l(n.prototype),"ready",this).call(this),this.shadowRoot.insertBefore((new d).makeStyleElement(),this.shadowRoot.children[0])}},{key:"maxContrastShade",value:function(e){return this.__utils.maxContrastShade(e)}},{key:"invertShade",value:function(e){return this.__utils.invertShade(e)}},{key:"getColorInfo",value:function(e){return this.__utils.getColorInfo(e)}},{key:"makeVariable",value:function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0],arguments.length>1&&void 0!==arguments[1]&&arguments[1],arguments.length>2&&void 0!==arguments[2]&&arguments[2];return this.__utils.makeVariable("grey",1,"default")}},{key:"getContrastingColors",value:function(e,t,n){return this.__utils.getContrastingColors(e,t,n)}},{key:"getContrastingShades",value:function(e,t,n,a){return this.__utils.getContrastingShades(e,t,n,a)}},{key:"isContrastCompliant",value:function(e,t,n,a,r){return this.__utils.isContrastCompliant(e,t,n,a,r)}}]),n}();customElements.define(h.tag,h),e.SimpleColors=h,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@polymer/polymer/lib/utils/render-status.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@polymer/polymer/lib/utils/render-status.js"],t):t((e=e||self).SimpleColors={},e.polymerElement_js)}(this,function(e,t){"use strict";function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){for(var o=0;o<t.length;o++){var f=t[o];f.enumerable=f.enumerable||!1,f.configurable=!0,"value"in f&&(f.writable=!0),Object.defineProperty(e,f.key,f)}}function n(e,t,o){return t&&l(e.prototype,t),o&&l(e,o),e}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function d(e,t,o){return(d="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,o){var f=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=i(e)););return e}(e,t);if(f){var l=Object.getOwnPropertyDescriptor(f,t);return l.get?l.get.call(o):l.value}})(e,t,o||e)}window.SimpleColorsStyles={},window.SimpleColorsStyles.instance=null,window.SimpleColorsStyles.colors={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":["#ddefff","#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"]},window.SimpleColorsStyles.makeVariable=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"grey",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return["--simple-colors",arguments.length>2&&void 0!==arguments[2]?arguments[2]:"default","theme",e,t].join("-")},window.SimpleColorsStyles.addThemeVariables=function(e,t){var o=[];for(var f in window.SimpleColorsStyles.colors)o.push(window.SimpleColorsStyles.addColorShades(e,f,window.SimpleColorsStyles.colors[f],t));return o.join("")},window.SimpleColorsStyles.addColorShades=function(e,t,o,f){for(var l=[],n=0;n<o.length;n++){var r=window.SimpleColorsStyles.makeVariable(t,n+1,e),i=f?o[window.SimpleColorsStyles.invertIndex(n)]:o[n];l.push(r+":"+i+"; ")}return l.join("")},window.SimpleColorsStyles.addCssVariables=function(e){if("undefined"!==o(e)){var t=window.SimpleColorsStyles.colors.grey;return e.insertRule(window.SimpleColorsStyles.makeRule("html",window.SimpleColorsStyles.addColorShades("default","accent",t,!1)+window.SimpleColorsStyles.addThemeVariables("default",!1)),e.cssRules.length),e.insertRule(window.SimpleColorsStyles.makeRule("body",window.SimpleColorsStyles.addColorShades("fixed","accent",t,!1)+window.SimpleColorsStyles.addThemeVariables("fixed",!1)),e.cssRules.length),e.insertRule(window.SimpleColorsStyles.makeRule("body[dark], [dark]",window.SimpleColorsStyles.addColorShades("default","accent",t,!0)+window.SimpleColorsStyles.addThemeVariables("default",!0)),e.cssRules.length),e}},window.SimpleColorsStyles.addAccentVariables=function(e){if("undefined"!==o(e)){for(var t in window.SimpleColorsStyles.colors)e.insertRule(window.SimpleColorsStyles.makeRule('body[accent-color="'.concat(t,'"], [accent-color="').concat(t,'"]'),[window.SimpleColorsStyles.addColorShades("default","accent",window.SimpleColorsStyles.colors[t],!1),window.SimpleColorsStyles.addColorShades("fixed","accent",window.SimpleColorsStyles.colors[t],!1)].join("")),e.cssRules.length),e.insertRule(window.SimpleColorsStyles.makeRule('body[dark][accent-color="'.concat(t,'"], [dark][accent-color="').concat(t,'"]'),[window.SimpleColorsStyles.addColorShades("default","accent",window.SimpleColorsStyles.colors[t],!0)].join("")),e.cssRules.length);return e}},window.SimpleColorsStyles.makeRule=function(e,t){return e+" {\n"+t+"\n}\n"},window.SimpleColorsStyles.invertIndex=function(e){return window.SimpleColorsStyles.colors.grey.length-1-parseInt(e)};function c(){var e,t,o=(e=["\n <style></style>\n <slot></slot>\n "],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return c=function(){return o},o}window.SimpleColorsStyles.requestAvailability=function(){if(null==window.SimpleColorsStyles.instance){var e=document.createElement("style");document.head.appendChild(e),window.SimpleColorsStyles.addCssVariables(e.sheet),window.SimpleColorsStyles.addAccentVariables(e.sheet),window.SimpleColorsStyles.instance=e.sheet}return window.SimpleColorsStyles.instance};var u=function(e){function o(){return f(this,o),s(this,i(o).apply(this,arguments))}return r(o,t.PolymerElement),n(o,[{key:"ready",value:function(){d(i(o.prototype),"ready",this).call(this);var e=window.SimpleColorsStyles.requestAvailability();if(!this.inheritStyles){var t=document.createElement("style"),f=e.cssRules;this.shadowRoot.appendChild(t);var l=!0,n=!1,r=void 0;try{for(var a,s=f[Symbol.iterator]();!(l=(a=s.next()).done);l=!0){var c=a.value.cssText;t.innerText+=c}}catch(e){n=!0,r=e}finally{try{l||null==s.return||s.return()}finally{if(n)throw r}}}}},{key:"maxContrastShade",value:function(e){return this.__utils.maxContrastShade(e)}},{key:"invertShade",value:function(e){return this.__utils.invertShade(e)}},{key:"getColorInfo",value:function(e){return this.__utils.getColorInfo(e)}},{key:"makeVariable",value:function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0],arguments.length>1&&void 0!==arguments[1]&&arguments[1],arguments.length>2&&void 0!==arguments[2]&&arguments[2];return this.__utils.makeVariable("grey",1,"default")}},{key:"getContrastingColors",value:function(e,t,o){return this.__utils.getContrastingColors(e,t,o)}},{key:"getContrastingShades",value:function(e,t,o,f){return this.__utils.getContrastingShades(e,t,o,f)}},{key:"isContrastCompliant",value:function(e,t,o,f,l){return this.__utils.isContrastCompliant(e,t,o,f,l)}}],[{key:"template",get:function(){return t.html(c())}},{key:"properties",get:function(){return{accentColor:{name:"accentColor",type:"String",value:"grey",reflectToAttribute:!0,notify:!0},dark:{name:"dark",type:"Boolean",value:!1,reflectToAttribute:!0,notify:!0},colors:{name:"colors",type:"Object",value:window.SimpleColorsStyles.colors,notify:!0},inheritStyles:{name:"inheritStyles",type:Boolean,value:!1,reflectToAttribute:!0}}}},{key:"tag",get:function(){return"simple-colors"}}]),o}();customElements.define(u.tag,u),e.SimpleColors=u,Object.defineProperty(e,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=simple-colors.umd.js.map |
@@ -6,3 +6,3 @@ /** | ||
| import { html, PolymerElement } from "@polymer/polymer/polymer-element.js"; | ||
| import { SimpleColorsStyles } from "./lib/simple-colors-styles.js"; | ||
| import "./lib/simple-colors-styles.js"; | ||
| /** | ||
@@ -63,2 +63,11 @@ * `simple-colors` | ||
| notify: true | ||
| }, | ||
| /** | ||
| * styles inherited based on an ancestor's accent and dark attributes. | ||
| */ | ||
| inheritStyles: { | ||
| name: "inheritStyles", | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| } | ||
@@ -72,16 +81,15 @@ }; | ||
| constructor() { | ||
| super(); | ||
| this.__utils = window.SimpleColorsStyles.requestAvailability(); | ||
| } | ||
| /** | ||
| * life cycle, element is ready | ||
| */ | ||
| ready() { | ||
| super.ready(); | ||
| this.shadowRoot.insertBefore( | ||
| new SimpleColorsStyles().makeStyleElement(), | ||
| this.shadowRoot.children[0] | ||
| ); | ||
| let styles = window.SimpleColorsStyles.requestAvailability(); | ||
| if (!this.inheritStyles) { | ||
| let style = document.createElement("style"), | ||
| ruleList = styles.cssRules; | ||
| this.shadowRoot.appendChild(style); | ||
| for (let rule of ruleList) { | ||
| let text = rule.cssText; | ||
| style.innerText += text; | ||
| } | ||
| } | ||
| } | ||
@@ -88,0 +96,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of medium supply chain risk alerts
- decreased by-20%
4
Worsened metrics
- Total package byte prevSize
- decreased by-2.79%
588241
- Number of package files
- decreased by-3.12%
31
- Lines of code
- decreased by-1.44%
15235