@parthi033/ui-foundation 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/pn-button.cjs.entry.js +1 -1
- package/dist/collection/components/pn-button/pn-button.css +45 -13
- package/dist/components/pn-button.js +1 -1
- package/dist/esm/pn-button.entry.js +1 -1
- package/dist/ui-foundation/p-ee0d4bc3.entry.js +1 -0
- package/dist/ui-foundation/ui-foundation.esm.js +1 -1
- package/package.json +1 -1
- package/dist/ui-foundation/p-f0c74d2f.entry.js +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-B8EYjYZ7.js');
|
|
4
4
|
|
|
5
|
-
const pnButtonCss = () =>
|
|
5
|
+
const pnButtonCss = () => `:root{--color-primary:#7009d1;--color-primary-hover:#5d02b3;--color-primary-text:#ffffff;--color-secondary-bg:#F3E8FD;--color-secondary-hover:#f7f5f9;--color-secondary-text:#4A008F;--btn-disabled-bg:#e5e7eb;--btn-disabled-text:#9ca3af;--btn-disabled-border:#d1d5db}:root.dark{--color-primary:#2d016e;--color-primary-hover:#2d0174;--color-primary-text:#ffffff;--color-secondary-bg:#362f3e;--color-secondary-hover:#4d435d;--color-secondary-text:#ffffff;--btn-disabled-bg:#bcbbbb;--btn-disabled-text:#6f6e6e;--btn-disabled-border:#555555}.btn{padding:0.5rem 1rem;font-weight:600;background:transparent;border:0;cursor:pointer}.btn.primary{background-color:var(--color-primary);color:var(--color-primary-text);border:1px solid var(--color-primary)}.btn.primary:hover,.btn.primary:focus,.btn.primary:active{background-color:var(--color-primary-hover)}.btn.secondary{background-color:var(--color-secondary-bg);color:var(--color-secondary-text);border:1px solid var(--color-primary)}.btn.secondary:hover,.btn.secondary:focus,.btn.secondary:active{background-color:var(--color-secondary-hover)}.btn.rounded{border-radius:4px}.btn.rounded{border-radius:4px}.btn.disabled{background-color:var(--btn-disabled-bg);color:var(--btn-disabled-text);border-color:var(--btn-disabled-border);cursor:not-allowed}`;
|
|
6
6
|
|
|
7
7
|
const PnButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1,7 +1,40 @@
|
|
|
1
1
|
/* ============================
|
|
2
2
|
Global Design Tokens
|
|
3
3
|
============================ */
|
|
4
|
-
|
|
4
|
+
:root {
|
|
5
|
+
/* Primary */
|
|
6
|
+
--color-primary: #7009d1;
|
|
7
|
+
--color-primary-hover: #5d02b3;
|
|
8
|
+
--color-primary-text: #ffffff;
|
|
9
|
+
/* Secondary */
|
|
10
|
+
--color-secondary-bg: #F3E8FD;
|
|
11
|
+
--color-secondary-hover: #f7f5f9;
|
|
12
|
+
--color-secondary-text: #4A008F;
|
|
13
|
+
/* Disabled */
|
|
14
|
+
--btn-disabled-bg: #e5e7eb;
|
|
15
|
+
--btn-disabled-text: #9ca3af;
|
|
16
|
+
--btn-disabled-border: #d1d5db;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Dark Theme */
|
|
20
|
+
:root.dark {
|
|
21
|
+
/* Primary */
|
|
22
|
+
--color-primary: #2d016e;
|
|
23
|
+
--color-primary-hover: #2d0174;
|
|
24
|
+
--color-primary-text: #ffffff;
|
|
25
|
+
/* Secondary */
|
|
26
|
+
--color-secondary-bg: #362f3e;
|
|
27
|
+
--color-secondary-hover: #4d435d;
|
|
28
|
+
--color-secondary-text: #ffffff;
|
|
29
|
+
/* Disabled */
|
|
30
|
+
--btn-disabled-bg: #bcbbbb;
|
|
31
|
+
--btn-disabled-text: #6f6e6e;
|
|
32
|
+
--btn-disabled-border: #555555;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* General variables */
|
|
36
|
+
/* Secondary */
|
|
37
|
+
/* Disabled */
|
|
5
38
|
/* Base Text */
|
|
6
39
|
/* Spacing */
|
|
7
40
|
/* Misc */
|
|
@@ -13,20 +46,20 @@ Global Design Tokens
|
|
|
13
46
|
cursor: pointer;
|
|
14
47
|
}
|
|
15
48
|
.btn.primary {
|
|
16
|
-
background-color:
|
|
17
|
-
color:
|
|
18
|
-
border: 1px solid
|
|
49
|
+
background-color: var(--color-primary);
|
|
50
|
+
color: var(--color-primary-text);
|
|
51
|
+
border: 1px solid var(--color-primary);
|
|
19
52
|
}
|
|
20
53
|
.btn.primary:hover, .btn.primary:focus, .btn.primary:active {
|
|
21
|
-
background-color:
|
|
54
|
+
background-color: var(--color-primary-hover);
|
|
22
55
|
}
|
|
23
56
|
.btn.secondary {
|
|
24
|
-
background-color:
|
|
25
|
-
color:
|
|
26
|
-
border: 1px solid
|
|
57
|
+
background-color: var(--color-secondary-bg);
|
|
58
|
+
color: var(--color-secondary-text);
|
|
59
|
+
border: 1px solid var(--color-primary);
|
|
27
60
|
}
|
|
28
61
|
.btn.secondary:hover, .btn.secondary:focus, .btn.secondary:active {
|
|
29
|
-
background-color:
|
|
62
|
+
background-color: var(--color-secondary-hover);
|
|
30
63
|
}
|
|
31
64
|
.btn.rounded {
|
|
32
65
|
border-radius: 4px;
|
|
@@ -35,9 +68,8 @@ Global Design Tokens
|
|
|
35
68
|
border-radius: 4px;
|
|
36
69
|
}
|
|
37
70
|
.btn.disabled {
|
|
38
|
-
background-color:
|
|
39
|
-
color:
|
|
40
|
-
border-color:
|
|
71
|
+
background-color: var(--btn-disabled-bg);
|
|
72
|
+
color: var(--btn-disabled-text);
|
|
73
|
+
border-color: var(--btn-disabled-border);
|
|
41
74
|
cursor: not-allowed;
|
|
42
|
-
opacity: 0.7;
|
|
43
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as r,p as o,H as
|
|
1
|
+
import{t as r,p as o,H as e,h as t}from"./p-DIhfYQQy.js";const d=o(class extends e{constructor(r){super(),!1!==r&&this.__registerHost()}label;type="primary";rounded=!1;render(){return t("button",{key:"cbe817a5769ef625f4bc46b9b6224884c40e4d17",class:`btn ${this.type} ${this.rounded?"rounded":""}`,disabled:"disabled"===this.type},this.label)}static get style(){return":root{--color-primary:#7009d1;--color-primary-hover:#5d02b3;--color-primary-text:#ffffff;--color-secondary-bg:#F3E8FD;--color-secondary-hover:#f7f5f9;--color-secondary-text:#4A008F;--btn-disabled-bg:#e5e7eb;--btn-disabled-text:#9ca3af;--btn-disabled-border:#d1d5db}:root.dark{--color-primary:#2d016e;--color-primary-hover:#2d0174;--color-primary-text:#ffffff;--color-secondary-bg:#362f3e;--color-secondary-hover:#4d435d;--color-secondary-text:#ffffff;--btn-disabled-bg:#bcbbbb;--btn-disabled-text:#6f6e6e;--btn-disabled-border:#555555}.btn{padding:0.5rem 1rem;font-weight:600;background:transparent;border:0;cursor:pointer}.btn.primary{background-color:var(--color-primary);color:var(--color-primary-text);border:1px solid var(--color-primary)}.btn.primary:hover,.btn.primary:focus,.btn.primary:active{background-color:var(--color-primary-hover)}.btn.secondary{background-color:var(--color-secondary-bg);color:var(--color-secondary-text);border:1px solid var(--color-primary)}.btn.secondary:hover,.btn.secondary:focus,.btn.secondary:active{background-color:var(--color-secondary-hover)}.btn.rounded{border-radius:4px}.btn.rounded{border-radius:4px}.btn.disabled{background-color:var(--btn-disabled-bg);color:var(--btn-disabled-text);border-color:var(--btn-disabled-border);cursor:not-allowed}"}},[512,"pn-button",{label:[1],type:[1],rounded:[4]}]);function a(){"undefined"!=typeof customElements&&["pn-button"].forEach((o=>{"pn-button"===o&&(customElements.get(r(o))||customElements.define(r(o),d))}))}a();const b=d,n=a;export{b as PnButton,n as defineCustomElement}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-BLqr1F3e.js';
|
|
2
2
|
|
|
3
|
-
const pnButtonCss = () =>
|
|
3
|
+
const pnButtonCss = () => `:root{--color-primary:#7009d1;--color-primary-hover:#5d02b3;--color-primary-text:#ffffff;--color-secondary-bg:#F3E8FD;--color-secondary-hover:#f7f5f9;--color-secondary-text:#4A008F;--btn-disabled-bg:#e5e7eb;--btn-disabled-text:#9ca3af;--btn-disabled-border:#d1d5db}:root.dark{--color-primary:#2d016e;--color-primary-hover:#2d0174;--color-primary-text:#ffffff;--color-secondary-bg:#362f3e;--color-secondary-hover:#4d435d;--color-secondary-text:#ffffff;--btn-disabled-bg:#bcbbbb;--btn-disabled-text:#6f6e6e;--btn-disabled-border:#555555}.btn{padding:0.5rem 1rem;font-weight:600;background:transparent;border:0;cursor:pointer}.btn.primary{background-color:var(--color-primary);color:var(--color-primary-text);border:1px solid var(--color-primary)}.btn.primary:hover,.btn.primary:focus,.btn.primary:active{background-color:var(--color-primary-hover)}.btn.secondary{background-color:var(--color-secondary-bg);color:var(--color-secondary-text);border:1px solid var(--color-primary)}.btn.secondary:hover,.btn.secondary:focus,.btn.secondary:active{background-color:var(--color-secondary-hover)}.btn.rounded{border-radius:4px}.btn.rounded{border-radius:4px}.btn.disabled{background-color:var(--btn-disabled-bg);color:var(--btn-disabled-text);border-color:var(--btn-disabled-border);cursor:not-allowed}`;
|
|
4
4
|
|
|
5
5
|
const PnButton = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r,h as o}from"./p-BLqr1F3e.js";const e=class{constructor(o){r(this,o)}label;type="primary";rounded=!1;render(){return o("button",{key:"cbe817a5769ef625f4bc46b9b6224884c40e4d17",class:`btn ${this.type} ${this.rounded?"rounded":""}`,disabled:"disabled"===this.type},this.label)}};e.style=":root{--color-primary:#7009d1;--color-primary-hover:#5d02b3;--color-primary-text:#ffffff;--color-secondary-bg:#F3E8FD;--color-secondary-hover:#f7f5f9;--color-secondary-text:#4A008F;--btn-disabled-bg:#e5e7eb;--btn-disabled-text:#9ca3af;--btn-disabled-border:#d1d5db}:root.dark{--color-primary:#2d016e;--color-primary-hover:#2d0174;--color-primary-text:#ffffff;--color-secondary-bg:#362f3e;--color-secondary-hover:#4d435d;--color-secondary-text:#ffffff;--btn-disabled-bg:#bcbbbb;--btn-disabled-text:#6f6e6e;--btn-disabled-border:#555555}.btn{padding:0.5rem 1rem;font-weight:600;background:transparent;border:0;cursor:pointer}.btn.primary{background-color:var(--color-primary);color:var(--color-primary-text);border:1px solid var(--color-primary)}.btn.primary:hover,.btn.primary:focus,.btn.primary:active{background-color:var(--color-primary-hover)}.btn.secondary{background-color:var(--color-secondary-bg);color:var(--color-secondary-text);border:1px solid var(--color-primary)}.btn.secondary:hover,.btn.secondary:focus,.btn.secondary:active{background-color:var(--color-secondary-hover)}.btn.rounded{border-radius:4px}.btn.rounded{border-radius:4px}.btn.disabled{background-color:var(--btn-disabled-bg);color:var(--btn-disabled-text);border-color:var(--btn-disabled-border);cursor:not-allowed}";export{e as pn_button}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as
|
|
1
|
+
import{p as e,b as t}from"./p-BLqr1F3e.js";export{s as setNonce}from"./p-BLqr1F3e.js";import{g as o}from"./p-DQuL1Twl.js";(()=>{const t=import.meta.url,o={};return""!==t&&(o.resourcesUrl=new URL(".",t).href),e(o)})().then((async e=>(await o(),t([["p-0684162b",[[513,"my-component",{first:[1],middle:[1],last:[1]}]]],["p-ee0d4bc3",[[512,"pn-button",{label:[1],type:[1],rounded:[4]}]]]],e))));
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r,h as o}from"./p-BLqr1F3e.js";const d=class{constructor(o){r(this,o)}label;type="primary";rounded=!1;render(){return o("button",{key:"cbe817a5769ef625f4bc46b9b6224884c40e4d17",class:`btn ${this.type} ${this.rounded?"rounded":""}`,disabled:"disabled"===this.type},this.label)}};d.style=".btn{padding:0.5rem 1rem;font-weight:600;background:transparent;border:0;cursor:pointer}.btn.primary{background-color:#7009d1;color:#ffffff;border:1px solid #7009d1}.btn.primary:hover,.btn.primary:focus,.btn.primary:active{background-color:#5d02b3}.btn.secondary{background-color:#F3E8FD;color:#4A008F;border:1px solid #7009d1}.btn.secondary:hover,.btn.secondary:focus,.btn.secondary:active{background-color:#f7f5f9}.btn.rounded{border-radius:4px}.btn.rounded{border-radius:4px}.btn.disabled{background-color:#e5e7eb;color:#9ca3af;border-color:#d1d5db;cursor:not-allowed;opacity:0.7}";export{d as pn_button}
|