From 7f1cf3383eaab675d77d56a62ec9dd08927ad4a0 Mon Sep 17 00:00:00 2001 From: Mark Caron Date: Fri, 7 Sep 2018 17:36:38 -0400 Subject: [PATCH] Updating RH-CTA, its README, and CP-Theme's README --- elements/rh-cta/README.md | 49 +++++++++++++++++++++++++++++-- elements/rh-cta/demo/index.html | 2 +- elements/rh-cta/rh-cta.js | 6 ++-- elements/rh-cta/rh-cta.js.map | 2 +- elements/rh-cta/rh-cta.umd.js | 2 +- elements/rh-cta/rh-cta.umd.js.map | 2 +- elements/rh-cta/src/rh-cta.scss | 6 ++-- themes/cp-theme/README.md | 43 ++++++++++++++++++++++++++- 8 files changed, 99 insertions(+), 13 deletions(-) diff --git a/elements/rh-cta/README.md b/elements/rh-cta/README.md index 091203de6e..a725b5532b 100644 --- a/elements/rh-cta/README.md +++ b/elements/rh-cta/README.md @@ -1,17 +1,62 @@ -# WIP 🐣: RHElements Cta Element +# WIP 🐣: RHElements CTA Element + +`rh-cta` is a call-to-action (CTA) element, that stands out from regular hypertext links, and is used for linking users to webpages. + +_Note: `rh-cta` is not a button, though it may look like one visually._ ## Usage ```html + GitHub + + + Learn more about RHElements + + + Red Hat + ``` ## Slots ### Default slot -We expect an anchor tag, ``, to be the first child inside rh-cta element. +We expect an anchor tag, `` with an `href`, to be the first child inside `rh-cta` element. + +## Styling + +| Theme Var Hook | Description | Default | +| -------------- | ----------- | ------- | +| --rh-theme--color--ui-link | Link color for default CTA | $rh-color--ui-link | +| --rh-theme--color--ui-link--hover | Hover color for default CTA | $rh-color--ui-link--hover | +| --rh-theme--color--ui-link--focus | Focus color for default CTA | $rh-color--ui-link--focus | +| --rh-theme--color--ui-accent | Color for Primary CTA | $rh-color--ui-accent | +| --rh-theme--color--ui-accent--hover | Hover color for Primary CTA | $rh-color--ui-accent--hover | +| --rh-theme--color--ui-accent--text | Text color for Primary CTA | $rh-color--ui-accent--text | +| --rh-theme--color--ui-accent--text--hover | Hover text color for Primary CTA | $rh-color--ui-accent--text--hover | +| --rh-theme--color--ui-base | Border & text color for Secondary CTA | $rh-color--ui-base | +| --rh-theme--color--ui-base--hover | Hover color for Secondary CTA | $rh-color--ui-base--hover | +| --rh-theme--color--ui-base--text | Background color for Secondary CTA | $rh-color--ui-base--text | +| --rh-theme--color--ui-base--text--hover | Hover text color for Secondary CTA | $rh-color--ui-base--text--hover | +| --rh-theme--color--text--on-dark | Link color for default CTA with `on="dark"` | $rh-color--text--on-dark | +| --rh-theme--color--ui-link--on-dark--hover | Hover color for default CTA with `on="dark"` | $rh-color--ui-link--on-dark--hover | + +### Testing Theme Var Hooks + +If you'd like to checkout how theming is possible using our CSS Var hooks, try adding the following to the `` of `./demo/index.html` before running `npm run test`. Feel free to customize the colors too! + +```html + +``` ## Test diff --git a/elements/rh-cta/demo/index.html b/elements/rh-cta/demo/index.html index 406ddb9aff..4d176bfcf9 100644 --- a/elements/rh-cta/demo/index.html +++ b/elements/rh-cta/demo/index.html @@ -4,8 +4,8 @@ RHElements: rh-cta Demo - + diff --git a/elements/rh-cta/rh-cta.js b/elements/rh-cta/rh-cta.js index d5531458ad..6830824c29 100644 --- a/elements/rh-cta/rh-cta.js +++ b/elements/rh-cta/rh-cta.js @@ -105,10 +105,10 @@ class RhCta extends RHElement { color: var(--rh-cta--aux--hover); } :host([on="dark"]) { - --rh-cta--main: var(--rh-theme--color--ui-accent--text, #fff); + --rh-cta--main: var(--rh-theme--color--text--on-dark, #fff); --rh-cta--main--hover: var(--rh-theme--color--ui-link--on-dark--hover, #cce6ff); - --rh-cta--aux: var(--rh-theme--color--ui-link--on-dark, #99ccff); - --rh-cta--aux--hover: var(--rh-theme--color--ui-accent--text--hover, #fff); } + --rh-cta--aux: transparent; + --rh-cta--aux--hover: transparent; } :host([on="dark"][priority="primary"]) { --rh-cta--main: var(--rh-theme--color--ui-accent--text, #fff); diff --git a/elements/rh-cta/rh-cta.js.map b/elements/rh-cta/rh-cta.js.map index 3692e40845..ae8132e90a 100644 --- a/elements/rh-cta/rh-cta.js.map +++ b/elements/rh-cta/rh-cta.js.map @@ -1 +1 @@ -{"version":3,"file":"rh-cta.js","sources":["rh-cta.js"],"sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport RHElement from \"../rhelement/rhelement.js\";\n\nclass RhCta extends RHElement {\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"rh-cta\";\n }\n\n get styleUrl() {\n return \"rh-cta.scss\";\n }\n\n get templateUrl() {\n return \"rh-cta.html\";\n }\n\n constructor() {\n super(RhCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nRHElement.create(RhCta);\n\nexport default RhCta;\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;AAqBA,AAEA;AACA,MAAM,KAAK,SAAS,SAAS,CAAC;EAC5B,IAAI,IAAI,GAAG;IACT,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAoHC,CAAC,CAAC;GACZ;;EAED,WAAW,GAAG,GAAG;IACf,OAAO,QAAQ,CAAC;GACjB;;EAED,IAAI,QAAQ,GAAG;IACb,OAAO,aAAa,CAAC;GACtB;;EAED,IAAI,WAAW,GAAG;IAChB,OAAO,aAAa,CAAC;GACtB;;EAED,WAAW,GAAG;IACZ,KAAK,CAAC,KAAK,CAAC,CAAC;GACd;;EAED,iBAAiB,GAAG;IAClB,KAAK,CAAC,iBAAiB,EAAE,CAAC;;IAE1B,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;;IAEpC,IAAI,CAAC,UAAU,EAAE;MACf,OAAO,CAAC,IAAI;QACV,8DAA8D;OAC/D,CAAC;KACH,MAAM,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;MACjE,OAAO,CAAC,IAAI;QACV,8DAA8D;OAC/D,CAAC;KACH,MAAM;MACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;KACrC;GACF;;EAED,oBAAoB,GAAG,EAAE;CAC1B;;AAED,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;;;"} \ No newline at end of file +{"version":3,"file":"rh-cta.js","sources":["rh-cta.js"],"sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport RHElement from \"../rhelement/rhelement.js\";\n\nclass RhCta extends RHElement {\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"rh-cta\";\n }\n\n get styleUrl() {\n return \"rh-cta.scss\";\n }\n\n get templateUrl() {\n return \"rh-cta.html\";\n }\n\n constructor() {\n super(RhCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nRHElement.create(RhCta);\n\nexport default RhCta;\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;AAqBA,AAEA;AACA,MAAM,KAAK,SAAS,SAAS,CAAC;EAC5B,IAAI,IAAI,GAAG;IACT,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAoHC,CAAC,CAAC;GACZ;;EAED,WAAW,GAAG,GAAG;IACf,OAAO,QAAQ,CAAC;GACjB;;EAED,IAAI,QAAQ,GAAG;IACb,OAAO,aAAa,CAAC;GACtB;;EAED,IAAI,WAAW,GAAG;IAChB,OAAO,aAAa,CAAC;GACtB;;EAED,WAAW,GAAG;IACZ,KAAK,CAAC,KAAK,CAAC,CAAC;GACd;;EAED,iBAAiB,GAAG;IAClB,KAAK,CAAC,iBAAiB,EAAE,CAAC;;IAE1B,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;;IAEpC,IAAI,CAAC,UAAU,EAAE;MACf,OAAO,CAAC,IAAI;QACV,8DAA8D;OAC/D,CAAC;KACH,MAAM,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;MACjE,OAAO,CAAC,IAAI;QACV,8DAA8D;OAC/D,CAAC;KACH,MAAM;MACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;KACrC;GACF;;EAED,oBAAoB,GAAG,EAAE;CAC1B;;AAED,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;;;"} \ No newline at end of file diff --git a/elements/rh-cta/rh-cta.umd.js b/elements/rh-cta/rh-cta.umd.js index 6831381691..2dcc28ed23 100644 --- a/elements/rh-cta/rh-cta.umd.js +++ b/elements/rh-cta/rh-cta.umd.js @@ -1,2 +1,2 @@ -!function(r,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../rhelement/rhelement.umd.js")):"function"==typeof define&&define.amd?define(["../rhelement/rhelement.umd.js"],t):r.RhCta=t(r.RHElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o=function(){function o(r,t){for(var e=0;e\n:host {\n --rh-cta--main: var(--rh-theme--color--ui-link, #06c);\n --rh-cta--main--hover: var(--rh-theme--color--ui-link--hover, #003366);\n --rh-cta--main--focus: var(--rh-theme--color--ui-link--focus, #003366);\n --rh-cta--main--visited: var(--rh-theme--color--ui-link--visited, rebeccapurple);\n --rh-cta--aux: transparent;\n --rh-cta--aux--hover: transparent;\n display: inline-block;\n font-weight: bold; }\n :host ::slotted(a) {\n line-height: inherit;\n color: var(--rh-cta--main); }\n :host ::slotted(a)::after {\n display: block;\n margin-left: 0.25rem;\n vertical-align: middle;\n border-style: solid;\n border-width: 0.313em 0.313em 0;\n border-color: transparent;\n border-top-color: var(--rh-cta--main);\n transform: rotate(-90deg);\n display: inline-block;\n content: ""; }\n :host ::slotted(a:hover) {\n color: var(--rh-cta--main--hover); }\n :host ::slotted(a:hover)::after {\n border-top-color: var(--rh-cta--main--hover); }\n :host ::slotted(a:focus) {\n color: var(--rh-cta--main--focus); }\n :host ::slotted(a:focus)::after {\n border-top-color: var(--rh-cta--main--focus); }\n\n:host([priority="primary"]) {\n --rh-cta--main: var(--rh-theme--color--ui-accent, #fe460d);\n --rh-cta--main--hover: var(--rh-theme--color--ui-accent--hover, #a42701);\n --rh-cta--aux: var(--rh-theme--color--ui-accent--text, #fff);\n --rh-cta--aux--hover: var(--rh-theme--color--ui-accent--text--hover, #fff); }\n :host([priority="primary"]) ::slotted(a) {\n display: inline-block;\n padding: 8px 32px;\n border-radius: 5em;\n border: 1px solid transparent;\n text-decoration: none;\n line-height: 1.2;\n border-color: var(--rh-cta--main);\n background: var(--rh-cta--main);\n color: var(--rh-cta--aux); }\n :host([priority="primary"]) ::slotted(a)::after {\n display: none; }\n :host([priority="primary"]) ::slotted(a:hover),\n :host([priority="primary"]) ::slotted(a:focus) {\n border-color: var(--rh-cta--main--hover);\n background: var(--rh-cta--main--hover);\n color: var(--rh-cta--aux--hover); }\n\n:host([priority="secondary"]) {\n --rh-cta--main: var(--rh-theme--color--ui-base, #0477a4);\n --rh-cta--main--hover: var(--rh-theme--color--ui-base--hover, #022f40);\n --rh-cta--aux: var(--rh-theme--color--ui-base--text, #fff);\n --rh-cta--aux--hover: var(--rh-theme--color--ui-base--text--hover, #fff); }\n :host([priority="secondary"]) ::slotted(a) {\n display: inline-block;\n padding: 8px 32px;\n border-radius: 5em;\n border: 1px solid var(--rh-cta--main);\n text-decoration: none;\n line-height: 1.2;\n border-color: var(--rh-cta--main);\n background: var(--rh-cta--aux);\n color: var(--rh-cta--main); }\n :host([priority="secondary"]) ::slotted(a)::after {\n display: none; }\n :host([priority="secondary"]) ::slotted(a:hover),\n :host([priority="secondary"]) ::slotted(a:focus) {\n border-color: var(--rh-cta--main--hover);\n background: var(--rh-cta--main--hover);\n color: var(--rh-cta--aux--hover); }\n\n:host([on="dark"]) {\n --rh-cta--main: var(--rh-theme--color--ui-accent--text, #fff);\n --rh-cta--main--hover: var(--rh-theme--color--ui-link--on-dark--hover, #cce6ff);\n --rh-cta--aux: var(--rh-theme--color--ui-link--on-dark, #99ccff);\n --rh-cta--aux--hover: var(--rh-theme--color--ui-accent--text--hover, #fff); }\n\n:host([on="dark"][priority="primary"]) {\n --rh-cta--main: var(--rh-theme--color--ui-accent--text, #fff);\n --rh-cta--main--hover: var(--rh-theme--color--ui-accent--text--hover, #fff);\n --rh-cta--aux: var(--rh-theme--color--ui-accent, #fe460d);\n --rh-cta--aux--hover: var(--rh-theme--color--ui-accent--hover, #a42701); }\n\n:host([on="dark"][priority="secondary"]) {\n --rh-cta--main: var(--rh-theme--color--ui-base--text, #fff);\n --rh-cta--main--hover: var(--rh-theme--color--ui-base--text--hover, #fff);\n --rh-cta--aux: transparent;\n --rh-cta--aux--hover: var(--rh-theme--color--ui-base--hover, #022f40); }\n\n:host([color="base"]) {\n --rh-cta--main: var(--rh-theme--color--ui-base, #0477a4) !important;\n --rh-cta--main--hover: var(--rh-theme--color--ui-base--hover, #022f40) !important;\n --rh-cta--aux: var(--rh-theme--color--ui-base--text, #fff) !important;\n --rh-cta--aux--hover: var(--rh-theme--color--ui-base--text--hover, #fff) !important; }\n\n:host([color="complement"]) {\n --rh-cta--main: var(--rh-theme--color--ui-complement, #464646) !important;\n --rh-cta--main--hover: var(--rh-theme--color--ui-complement--hover, #131313) !important;\n --rh-cta--aux: var(--rh-theme--color--ui-complement--text, #fff) !important;\n --rh-cta--aux--hover: var(--rh-theme--color--ui-complement--text--hover, #fff) !important; }\n\n:host([color="accent"]) {\n --rh-cta--main: var(--rh-theme--color--ui-accent, #fe460d) !important;\n --rh-cta--main--hover: var(--rh-theme--color--ui-accent--hover, #a42701) !important;\n --rh-cta--aux: var(--rh-theme--color--ui-accent--text, #fff) !important;\n --rh-cta--aux--hover: var(--rh-theme--color--ui-accent--text--hover, #fff) !important; }\n\n'}},{key:"styleUrl",get:function(){return"rh-cta.scss"}},{key:"templateUrl",get:function(){return"rh-cta.html"}}],[{key:"tag",get:function(){return"rh-cta"}}]),o(t,[{key:"connectedCallback",value:function(){(function r(t,e,o){null===t&&(t=Function.prototype);var n=Object.getOwnPropertyDescriptor(t,e);if(void 0===n){var a=Object.getPrototypeOf(t);return null===a?void 0:r(a,e,o)}if("value"in n)return n.value;var c=n.get;return void 0!==c?c.call(o):void 0})(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this);var r=this.children[0];r?r&&"a"!==r.tagName.toLowerCase()?console.warn("The first child in the light DOM must be an anchor tag ()"):this.link=this.querySelector("a"):console.warn("The first child in the light DOM must be an anchor tag ()")}},{key:"disconnectedCallback",value:function(){}}]),t}();return e.create(r),r}); +!function(r,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../rhelement/rhelement.umd.js")):"function"==typeof define&&define.amd?define(["../rhelement/rhelement.umd.js"],t):r.RhCta=t(r.RHElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var o=function(){function o(r,t){for(var e=0;e\n:host {\n --rh-cta--main: var(--rh-theme--color--ui-link, #06c);\n --rh-cta--main--hover: var(--rh-theme--color--ui-link--hover, #003366);\n --rh-cta--main--focus: var(--rh-theme--color--ui-link--focus, #003366);\n --rh-cta--main--visited: var(--rh-theme--color--ui-link--visited, rebeccapurple);\n --rh-cta--aux: transparent;\n --rh-cta--aux--hover: transparent;\n display: inline-block;\n font-weight: bold; }\n :host ::slotted(a) {\n line-height: inherit;\n color: var(--rh-cta--main); }\n :host ::slotted(a)::after {\n display: block;\n margin-left: 0.25rem;\n vertical-align: middle;\n border-style: solid;\n border-width: 0.313em 0.313em 0;\n border-color: transparent;\n border-top-color: var(--rh-cta--main);\n transform: rotate(-90deg);\n display: inline-block;\n content: ""; }\n :host ::slotted(a:hover) {\n color: var(--rh-cta--main--hover); }\n :host ::slotted(a:hover)::after {\n border-top-color: var(--rh-cta--main--hover); }\n :host ::slotted(a:focus) {\n color: var(--rh-cta--main--focus); }\n :host ::slotted(a:focus)::after {\n border-top-color: var(--rh-cta--main--focus); }\n\n:host([priority="primary"]) {\n --rh-cta--main: var(--rh-theme--color--ui-accent, #fe460d);\n --rh-cta--main--hover: var(--rh-theme--color--ui-accent--hover, #a42701);\n --rh-cta--aux: var(--rh-theme--color--ui-accent--text, #fff);\n --rh-cta--aux--hover: var(--rh-theme--color--ui-accent--text--hover, #fff); }\n :host([priority="primary"]) ::slotted(a) {\n display: inline-block;\n padding: 8px 32px;\n border-radius: 5em;\n border: 1px solid transparent;\n text-decoration: none;\n line-height: 1.2;\n border-color: var(--rh-cta--main);\n background: var(--rh-cta--main);\n color: var(--rh-cta--aux); }\n :host([priority="primary"]) ::slotted(a)::after {\n display: none; }\n :host([priority="primary"]) ::slotted(a:hover),\n :host([priority="primary"]) ::slotted(a:focus) {\n border-color: var(--rh-cta--main--hover);\n background: var(--rh-cta--main--hover);\n color: var(--rh-cta--aux--hover); }\n\n:host([priority="secondary"]) {\n --rh-cta--main: var(--rh-theme--color--ui-base, #0477a4);\n --rh-cta--main--hover: var(--rh-theme--color--ui-base--hover, #022f40);\n --rh-cta--aux: var(--rh-theme--color--ui-base--text, #fff);\n --rh-cta--aux--hover: var(--rh-theme--color--ui-base--text--hover, #fff); }\n :host([priority="secondary"]) ::slotted(a) {\n display: inline-block;\n padding: 8px 32px;\n border-radius: 5em;\n border: 1px solid var(--rh-cta--main);\n text-decoration: none;\n line-height: 1.2;\n border-color: var(--rh-cta--main);\n background: var(--rh-cta--aux);\n color: var(--rh-cta--main); }\n :host([priority="secondary"]) ::slotted(a)::after {\n display: none; }\n :host([priority="secondary"]) ::slotted(a:hover),\n :host([priority="secondary"]) ::slotted(a:focus) {\n border-color: var(--rh-cta--main--hover);\n background: var(--rh-cta--main--hover);\n color: var(--rh-cta--aux--hover); }\n\n:host([on="dark"]) {\n --rh-cta--main: var(--rh-theme--color--text--on-dark, #fff);\n --rh-cta--main--hover: var(--rh-theme--color--ui-link--on-dark--hover, #cce6ff);\n --rh-cta--aux: transparent;\n --rh-cta--aux--hover: transparent; }\n\n:host([on="dark"][priority="primary"]) {\n --rh-cta--main: var(--rh-theme--color--ui-accent--text, #fff);\n --rh-cta--main--hover: var(--rh-theme--color--ui-accent--text--hover, #fff);\n --rh-cta--aux: var(--rh-theme--color--ui-accent, #fe460d);\n --rh-cta--aux--hover: var(--rh-theme--color--ui-accent--hover, #a42701); }\n\n:host([on="dark"][priority="secondary"]) {\n --rh-cta--main: var(--rh-theme--color--ui-base--text, #fff);\n --rh-cta--main--hover: var(--rh-theme--color--ui-base--text--hover, #fff);\n --rh-cta--aux: transparent;\n --rh-cta--aux--hover: var(--rh-theme--color--ui-base--hover, #022f40); }\n\n:host([color="base"]) {\n --rh-cta--main: var(--rh-theme--color--ui-base, #0477a4) !important;\n --rh-cta--main--hover: var(--rh-theme--color--ui-base--hover, #022f40) !important;\n --rh-cta--aux: var(--rh-theme--color--ui-base--text, #fff) !important;\n --rh-cta--aux--hover: var(--rh-theme--color--ui-base--text--hover, #fff) !important; }\n\n:host([color="complement"]) {\n --rh-cta--main: var(--rh-theme--color--ui-complement, #464646) !important;\n --rh-cta--main--hover: var(--rh-theme--color--ui-complement--hover, #131313) !important;\n --rh-cta--aux: var(--rh-theme--color--ui-complement--text, #fff) !important;\n --rh-cta--aux--hover: var(--rh-theme--color--ui-complement--text--hover, #fff) !important; }\n\n:host([color="accent"]) {\n --rh-cta--main: var(--rh-theme--color--ui-accent, #fe460d) !important;\n --rh-cta--main--hover: var(--rh-theme--color--ui-accent--hover, #a42701) !important;\n --rh-cta--aux: var(--rh-theme--color--ui-accent--text, #fff) !important;\n --rh-cta--aux--hover: var(--rh-theme--color--ui-accent--text--hover, #fff) !important; }\n\n'}},{key:"styleUrl",get:function(){return"rh-cta.scss"}},{key:"templateUrl",get:function(){return"rh-cta.html"}}],[{key:"tag",get:function(){return"rh-cta"}}]),o(t,[{key:"connectedCallback",value:function(){(function r(t,e,o){null===t&&(t=Function.prototype);var n=Object.getOwnPropertyDescriptor(t,e);if(void 0===n){var a=Object.getPrototypeOf(t);return null===a?void 0:r(a,e,o)}if("value"in n)return n.value;var c=n.get;return void 0!==c?c.call(o):void 0})(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this);var r=this.children[0];r?r&&"a"!==r.tagName.toLowerCase()?console.warn("The first child in the light DOM must be an anchor tag ()"):this.link=this.querySelector("a"):console.warn("The first child in the light DOM must be an anchor tag ()")}},{key:"disconnectedCallback",value:function(){}}]),t}();return e.create(r),r}); //# sourceMappingURL=rh-cta.umd.js.map diff --git a/elements/rh-cta/rh-cta.umd.js.map b/elements/rh-cta/rh-cta.umd.js.map index ec85c9446e..e35857d29a 100644 --- a/elements/rh-cta/rh-cta.umd.js.map +++ b/elements/rh-cta/rh-cta.umd.js.map @@ -1 +1 @@ -{"version":3,"file":"rh-cta.umd.js","sources":["rh-cta.umd.js"],"sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport RHElement from \"../rhelement/rhelement.umd.js\";\n\nclass RhCta extends RHElement {\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"rh-cta\";\n }\n\n get styleUrl() {\n return \"rh-cta.scss\";\n }\n\n get templateUrl() {\n return \"rh-cta.html\";\n }\n\n constructor() {\n super(RhCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nRHElement.create(RhCta);\n\nexport default RhCta;\n"],"names":["RhCta","RHElement","firstChild","this","children","tagName","toLowerCase","warn","link","querySelector","create"],"mappings":"6iBAwBMA,gWAsIIA,uUAtIUC,43KA8HT,wDAIA,kDARA,2ZAkBDC,EAAaC,KAAKC,SAAS,GAE5BF,EAIMA,GAAmD,MAArCA,EAAWG,QAAQC,sBAClCC,KACN,qEAGGC,KAAOL,KAAKM,cAAc,aARvBF,KACN,gIAcRN,EAAUS,OAAOV"} \ No newline at end of file +{"version":3,"file":"rh-cta.umd.js","sources":["rh-cta.umd.js"],"sourcesContent":["/*\n * Copyright 2018 Red Hat, Inc.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n */\n\nimport RHElement from \"../rhelement/rhelement.umd.js\";\n\nclass RhCta extends RHElement {\n get html() {\n return `\n\n`;\n }\n\n static get tag() {\n return \"rh-cta\";\n }\n\n get styleUrl() {\n return \"rh-cta.scss\";\n }\n\n get templateUrl() {\n return \"rh-cta.html\";\n }\n\n constructor() {\n super(RhCta);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n const firstChild = this.children[0];\n\n if (!firstChild) {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else if (firstChild && firstChild.tagName.toLowerCase() !== \"a\") {\n console.warn(\n \"The first child in the light DOM must be an anchor tag ()\"\n );\n } else {\n this.link = this.querySelector(\"a\");\n }\n }\n\n disconnectedCallback() {}\n}\n\nRHElement.create(RhCta);\n\nexport default RhCta;\n"],"names":["RhCta","RHElement","firstChild","this","children","tagName","toLowerCase","warn","link","querySelector","create"],"mappings":"6iBAwBMA,gWAsIIA,uUAtIUC,2yKA8HT,wDAIA,kDARA,2ZAkBDC,EAAaC,KAAKC,SAAS,GAE5BF,EAIMA,GAAmD,MAArCA,EAAWG,QAAQC,sBAClCC,KACN,qEAGGC,KAAOL,KAAKM,cAAc,aARvBF,KACN,gIAcRN,EAAUS,OAAOV"} \ No newline at end of file diff --git a/elements/rh-cta/src/rh-cta.scss b/elements/rh-cta/src/rh-cta.scss index 064fd27314..e0f8282498 100644 --- a/elements/rh-cta/src/rh-cta.scss +++ b/elements/rh-cta/src/rh-cta.scss @@ -140,10 +140,10 @@ $rh-cta--animation-timing: $rh-global--animation-timing; /// ON DARK /// =========================================================================== :host([on="dark"]) { - --rh-cta--main: #{rh-var(ui-accent--text)}; + --rh-cta--main: #{rh-var(text--on-dark)}; --rh-cta--main--hover: #{rh-var(ui-link--on-dark--hover)}; - --rh-cta--aux: #{rh-var(ui-link--on-dark)}; - --rh-cta--aux--hover: #{rh-var(ui-accent--text--hover)}; + --rh-cta--aux: transparent; + --rh-cta--aux--hover: transparent; } :host([on="dark"][priority="primary"]) { diff --git a/themes/cp-theme/README.md b/themes/cp-theme/README.md index a4c974f65a..a9868bc610 100644 --- a/themes/cp-theme/README.md +++ b/themes/cp-theme/README.md @@ -1 +1,42 @@ -# cp-theme +# # WIP 🐣: Customer Portal Theme for RHElements + +Styles RHElements for the Red Hat Customer Portal. + +## Usage + +`cp-theme` requires [Overpass font][overpass] to be included via CDN. + +### RequireJS / UMD +```html + + +``` + +### W3C Spec +```html + + +``` + +## Test + + npm run test + +## Build + + npm run build + +## Demo + +From the RHElements root directory, run: + + npm start + +## Code style + +Cta (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save. + +[overpass]: http://overpassfont.org/ +[prettier]: https://github.com/prettier/prettier/ +[prettier-ed]: https://prettier.io/docs/en/editors.html +[web-component-tester]: https://github.com/Polymer/web-component-tester