@usecapsule/core-components 1.0.13 → 2.0.0-dev.dropdown
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +86 -41
- package/css/capsule-core.css.map +1 -1
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/capsule.esm.js.map +1 -1
- package/dist/capsule/index.esm.js +1 -1
- package/dist/capsule/index.esm.js.map +1 -1
- package/dist/capsule/p-0462f723.js +2 -0
- package/dist/capsule/p-0462f723.js.map +1 -0
- package/dist/capsule/p-0cab90fa.entry.js +2 -0
- package/dist/capsule/{p-1dc07cd7.entry.js.map → p-0cab90fa.entry.js.map} +1 -1
- package/dist/capsule/{p-11048392.entry.js → p-193ac141.entry.js} +2 -2
- package/dist/capsule/p-6fb7c4d1.js +3 -0
- package/dist/capsule/p-6fb7c4d1.js.map +1 -0
- package/dist/capsule/{p-62e7869a.entry.js → p-a95ec4df.entry.js} +2 -2
- package/dist/capsule/p-bea93fae.entry.js +29 -0
- package/dist/capsule/p-bea93fae.entry.js.map +1 -0
- package/dist/capsule/p-c2bf050b.js +2 -0
- package/dist/capsule/p-c2bf050b.js.map +1 -0
- package/dist/capsule/p-cb8dc0a4.entry.js +2 -0
- package/dist/capsule/p-d7be092d.entry.js +10 -0
- package/dist/capsule/p-d7be092d.entry.js.map +1 -0
- package/dist/cjs/_commonjsHelpers-b3309d7b.js +12 -0
- package/dist/cjs/_commonjsHelpers-b3309d7b.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +2 -2
- package/dist/cjs/constants-4bb85cc5.js +12 -0
- package/dist/cjs/constants-4bb85cc5.js.map +1 -0
- package/dist/cjs/{cpsl-alert_17.cjs.entry.js → cpsl-alert_18.cjs.entry.js} +3838 -537
- package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +1 -0
- package/dist/cjs/cpsl-animation.cjs.entry.js +20129 -0
- package/dist/cjs/cpsl-animation.cjs.entry.js.map +1 -0
- package/dist/cjs/cpsl-col.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-grid.cjs.entry.js +3 -3
- package/dist/cjs/cpsl-info-box.cjs.entry.js +3 -3
- package/dist/cjs/cpsl-info-box.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-row.cjs.entry.js +2 -2
- package/dist/cjs/{index-2a026742.js → index-3fccb5b4.js} +24 -3
- package/dist/cjs/index-3fccb5b4.js.map +1 -0
- package/dist/cjs/index.cjs.js +358 -0
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/assets/icons/capsule-rings-dark.svg +34 -0
- package/dist/collection/assets/icons/capsule.svg +4 -4
- package/dist/collection/assets/icons/chevron-up.svg +3 -0
- package/dist/collection/assets/icons/hero-email.svg +8 -30
- package/dist/collection/assets/icons/hero-lock.svg +4 -34
- package/dist/collection/assets/icons/hero-passkey.svg +9 -17
- package/dist/collection/assets/icons/hero-phone.svg +4 -15
- package/dist/collection/assets/icons/hero-wallet.svg +5 -44
- package/dist/collection/assets/icons/index.js +5 -2
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/assets/icons/more-login-options.svg +10 -10
- package/dist/collection/assets/icons/plus-circle.svg +5 -0
- package/dist/collection/assets/icons/wallet.svg +5 -0
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
- package/dist/collection/components/cpsl-animation/cpsl-animation.css +17 -0
- package/dist/collection/components/cpsl-animation/cpsl-animation.js +102 -0
- package/dist/collection/components/cpsl-animation/cpsl-animation.js.map +1 -0
- package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js +29 -0
- package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js +37 -0
- package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js.map +1 -0
- package/dist/collection/components/cpsl-button/cpsl-button.css +3 -0
- package/dist/collection/components/cpsl-button/cpsl-button.js +2 -2
- package/dist/collection/components/cpsl-button/cpsl-button.js.map +1 -1
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +1 -1
- package/dist/collection/components/cpsl-col/cpsl-col.js +1 -1
- package/dist/collection/components/cpsl-divider/cpsl-divider.js +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.css +88 -0
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +113 -0
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -0
- package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js +29 -0
- package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.e2e.js.map +1 -0
- package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js +37 -0
- package/dist/collection/components/cpsl-dropdown/test/cpsl-dropdown.spec.js.map +1 -0
- package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
- package/dist/collection/components/cpsl-icon/cpsl-icon.css +14 -0
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -3
- package/dist/collection/components/cpsl-icon/cpsl-icon.js.map +1 -1
- package/dist/collection/components/cpsl-info-box/cpsl-info-box.css +1 -1
- package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.css +12 -7
- package/dist/collection/components/cpsl-input/cpsl-input.js +8 -6
- package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
- package/dist/collection/components/cpsl-modal/cpsl-modal.css +46 -4
- package/dist/collection/components/cpsl-modal/cpsl-modal.js +341 -24
- package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +30 -13
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.js.map +1 -1
- package/dist/collection/components/cpsl-pill/cpsl-pill.css +3 -3
- package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
- package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css +3 -3
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css +3 -3
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
- package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css +11 -9
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.css +2 -2
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.css +17 -16
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +2 -2
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +1 -1
- package/dist/collection/components/cpsl-text/cpsl-text.css +101 -0
- package/dist/collection/components/cpsl-text/cpsl-text.js +110 -1
- package/dist/collection/components/cpsl-text/cpsl-text.js.map +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css +3 -0
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
- package/dist/collection/constants.js +6 -0
- package/dist/collection/constants.js.map +1 -0
- package/dist/collection/index.js +1 -0
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/interface.js.map +1 -1
- package/dist/collection/utils/theme/generateBorderRadii.js +56 -0
- package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -0
- package/dist/collection/utils/theme/generateFont.js +28 -0
- package/dist/collection/utils/theme/generateFont.js.map +1 -0
- package/dist/collection/utils/theme/generatePalette.js +46 -0
- package/dist/collection/utils/theme/generatePalette.js.map +1 -0
- package/dist/collection/utils/theme/generateTheme.js +11 -0
- package/dist/collection/utils/theme/generateTheme.js.map +1 -0
- package/dist/collection/utils/theme/utils.js +21 -0
- package/dist/collection/utils/theme/utils.js.map +1 -0
- package/dist/esm/_commonjsHelpers-1789f0cf.js +9 -0
- package/dist/esm/_commonjsHelpers-1789f0cf.js.map +1 -0
- package/dist/esm/capsule.js +3 -3
- package/dist/esm/constants-7b49abd5.js +9 -0
- package/dist/esm/constants-7b49abd5.js.map +1 -0
- package/dist/esm/{cpsl-alert_17.entry.js → cpsl-alert_18.entry.js} +3837 -537
- package/dist/esm/cpsl-alert_18.entry.js.map +1 -0
- package/dist/esm/cpsl-animation.entry.js +20125 -0
- package/dist/esm/cpsl-animation.entry.js.map +1 -0
- package/dist/esm/cpsl-col.entry.js +2 -2
- package/dist/esm/cpsl-grid.entry.js +3 -3
- package/dist/esm/cpsl-info-box.entry.js +3 -3
- package/dist/esm/cpsl-info-box.entry.js.map +1 -1
- package/dist/esm/cpsl-row.entry.js +2 -2
- package/dist/esm/{index-7c2f5cb9.js → index-f00e090c.js} +24 -3
- package/dist/esm/index-f00e090c.js.map +1 -0
- package/dist/esm/index.js +355 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/types/assets/icons/index.d.ts +4 -1
- package/dist/types/components/cpsl-animation/cpsl-animation.d.ts +9 -0
- package/dist/types/components/cpsl-dropdown/cpsl-dropdown.d.ts +25 -0
- package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +26 -5
- package/dist/types/components/cpsl-overlay/cpsl-overlay.d.ts +2 -2
- package/dist/types/components/cpsl-text/cpsl-text.d.ts +4 -0
- package/dist/types/components.d.ts +170 -13
- package/dist/types/constants.d.ts +3 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/interface.d.ts +137 -0
- package/dist/types/utils/theme/generateBorderRadii.d.ts +2 -0
- package/dist/types/utils/theme/generateFont.d.ts +2 -0
- package/dist/types/utils/theme/generatePalette.d.ts +7 -0
- package/dist/types/utils/theme/generateTheme.d.ts +2 -0
- package/dist/types/utils/theme/utils.d.ts +5 -0
- package/package.json +5 -3
- package/dist/capsule/p-0e2fbb7f.entry.js +0 -20
- package/dist/capsule/p-0e2fbb7f.entry.js.map +0 -1
- package/dist/capsule/p-1dc07cd7.entry.js +0 -2
- package/dist/capsule/p-5c020abe.entry.js +0 -2
- package/dist/capsule/p-9647dd63.js +0 -3
- package/dist/capsule/p-9647dd63.js.map +0 -1
- package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +0 -1
- package/dist/cjs/index-2a026742.js.map +0 -1
- package/dist/collection/assets/icons/more-login-options-dark.svg +0 -13
- package/dist/esm/cpsl-alert_17.entry.js.map +0 -1
- package/dist/esm/index-7c2f5cb9.js.map +0 -1
- /package/dist/capsule/{p-11048392.entry.js.map → p-193ac141.entry.js.map} +0 -0
- /package/dist/capsule/{p-62e7869a.entry.js.map → p-a95ec4df.entry.js.map} +0 -0
- /package/dist/capsule/{p-5c020abe.entry.js.map → p-cb8dc0a4.entry.js.map} +0 -0
- /package/dist/types/Users/{taylorbosch → vinay}/Documents/GitHub/Capsule/component-library/core/.stencil/scripts/buildIconLibrary.d.ts +0 -0
@@ -1,7 +1,58 @@
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
2
2
|
export class CpslText {
|
3
|
+
constructor() {
|
4
|
+
this.color = 'primary';
|
5
|
+
this.variant = 'bodyM';
|
6
|
+
this.weight = 'regular';
|
7
|
+
}
|
8
|
+
get Content() {
|
9
|
+
switch (this.variant) {
|
10
|
+
case 'headingXS': {
|
11
|
+
return (h("h6", null, h("slot", null)));
|
12
|
+
}
|
13
|
+
case 'headingS': {
|
14
|
+
return (h("h5", null, h("slot", null)));
|
15
|
+
}
|
16
|
+
case 'headingM': {
|
17
|
+
return (h("h4", null, h("slot", null)));
|
18
|
+
}
|
19
|
+
case 'headingL': {
|
20
|
+
return (h("h3", null, h("slot", null)));
|
21
|
+
}
|
22
|
+
case 'headingXL': {
|
23
|
+
return (h("h2", null, h("slot", null)));
|
24
|
+
}
|
25
|
+
case 'heading2XL': {
|
26
|
+
return (h("h1", null, h("slot", null)));
|
27
|
+
}
|
28
|
+
default: {
|
29
|
+
return (h("p", null, h("slot", null)));
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
3
33
|
render() {
|
4
|
-
return (h(Host, { key: '
|
34
|
+
return (h(Host, { key: '33b70ccfe3929f306d0a9b956ec2a4e16bf751b8', class: {
|
35
|
+
'primary': this.color === 'primary',
|
36
|
+
'secondary': this.color === 'secondary',
|
37
|
+
'subtle': this.color === 'subtle',
|
38
|
+
'inverted': this.color === 'inverted',
|
39
|
+
'error': this.color === 'error',
|
40
|
+
'medium': this.weight === 'medium',
|
41
|
+
'semi-bold': this.weight === 'semiBold',
|
42
|
+
'bold': this.weight === 'bold',
|
43
|
+
'body-2xs': this.variant === 'body2XS',
|
44
|
+
'body-xs': this.variant === 'bodyXS',
|
45
|
+
'body-s': this.variant === 'bodyS',
|
46
|
+
'body-m': this.variant === 'bodyM',
|
47
|
+
'body-l': this.variant === 'bodyL',
|
48
|
+
'body-xl': this.variant === 'bodyXL',
|
49
|
+
'heading-xs': this.variant === 'headingXS',
|
50
|
+
'heading-s': this.variant === 'headingS',
|
51
|
+
'heading-m': this.variant === 'headingM',
|
52
|
+
'heading-l': this.variant === 'headingL',
|
53
|
+
'heading-xl': this.variant === 'headingXL',
|
54
|
+
'heading-2xl': this.variant === 'heading2XL',
|
55
|
+
} }, this.Content));
|
5
56
|
}
|
6
57
|
static get is() { return "cpsl-text"; }
|
7
58
|
static get encapsulation() { return "shadow"; }
|
@@ -15,5 +66,63 @@ export class CpslText {
|
|
15
66
|
"$": ["cpsl-text.css"]
|
16
67
|
};
|
17
68
|
}
|
69
|
+
static get properties() {
|
70
|
+
return {
|
71
|
+
"color": {
|
72
|
+
"type": "string",
|
73
|
+
"mutable": false,
|
74
|
+
"complexType": {
|
75
|
+
"original": "'primary' | 'secondary' | 'subtle' | 'inverted' | 'error'",
|
76
|
+
"resolved": "\"error\" | \"inverted\" | \"primary\" | \"secondary\" | \"subtle\"",
|
77
|
+
"references": {}
|
78
|
+
},
|
79
|
+
"required": false,
|
80
|
+
"optional": true,
|
81
|
+
"docs": {
|
82
|
+
"tags": [],
|
83
|
+
"text": "The color of text.\nOptions are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\nDefault is: `\"primary\"`."
|
84
|
+
},
|
85
|
+
"attribute": "color",
|
86
|
+
"reflect": false,
|
87
|
+
"defaultValue": "'primary'"
|
88
|
+
},
|
89
|
+
"variant": {
|
90
|
+
"type": "string",
|
91
|
+
"mutable": false,
|
92
|
+
"complexType": {
|
93
|
+
"original": "'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL'",
|
94
|
+
"resolved": "\"body2XS\" | \"bodyL\" | \"bodyM\" | \"bodyS\" | \"bodyXL\" | \"bodyXS\" | \"heading2XL\" | \"headingL\" | \"headingM\" | \"headingS\" | \"headingXL\" | \"headingXS\"",
|
95
|
+
"references": {}
|
96
|
+
},
|
97
|
+
"required": false,
|
98
|
+
"optional": true,
|
99
|
+
"docs": {
|
100
|
+
"tags": [],
|
101
|
+
"text": "The variant of text.\nOptions are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\nDefault is: `\"bodyM\"`."
|
102
|
+
},
|
103
|
+
"attribute": "variant",
|
104
|
+
"reflect": false,
|
105
|
+
"defaultValue": "'bodyM'"
|
106
|
+
},
|
107
|
+
"weight": {
|
108
|
+
"type": "string",
|
109
|
+
"mutable": false,
|
110
|
+
"complexType": {
|
111
|
+
"original": "'regular' | 'medium' | 'semiBold' | 'bold'",
|
112
|
+
"resolved": "\"bold\" | \"medium\" | \"regular\" | \"semiBold\"",
|
113
|
+
"references": {}
|
114
|
+
},
|
115
|
+
"required": false,
|
116
|
+
"optional": true,
|
117
|
+
"docs": {
|
118
|
+
"tags": [],
|
119
|
+
"text": "The weight of text.\nOptions are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\nDefault is: `\"regular\"`."
|
120
|
+
},
|
121
|
+
"attribute": "weight",
|
122
|
+
"reflect": false,
|
123
|
+
"defaultValue": "'regular'"
|
124
|
+
}
|
125
|
+
};
|
126
|
+
}
|
18
127
|
}
|
19
128
|
//# sourceMappingURL=cpsl-text.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;
|
1
|
+
{"version":3,"file":"cpsl-text.js","sourceRoot":"","sources":["../../../../src/components/cpsl-text/cpsl-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;qBAMyD,SAAS;uBAO+E,OAAO;sBAO7G,SAAS;;IAEvE,IAAY,OAAO;QACjB,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YACrB,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,WAAW,CAAC,CAAC,CAAC;gBACjB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,OAAO,CACL;oBACE,eAAa,CACV,CACN,CAAC;YACJ,CAAC;YACD,OAAO,CAAC,CAAC,CAAC;gBACR,OAAO,CACL;oBACE,eAAa,CACX,CACL,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBACnC,WAAW,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;gBACvC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACjC,UAAU,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;gBACrC,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAE/B,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;gBAClC,WAAW,EAAE,IAAI,CAAC,MAAM,KAAK,UAAU;gBACvC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;gBAE9B,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACtC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBAClC,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;gBACpC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACxC,YAAY,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;aAC7C,IAEA,IAAI,CAAC,OAAO,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cpsl-text',\n styleUrl: 'cpsl-text.scss',\n shadow: true,\n})\nexport class CpslText {\n /**\n * The color of text.\n * Options are: `\"primary\"`, `\"secondary\", `\"subtle\", `\"inverted\", `\"error\".\n * Default is: `\"primary\"`.\n */\n @Prop() color?: 'primary' | 'secondary' | 'subtle' | 'inverted' | 'error' = 'primary';\n\n /**\n * The variant of text.\n * Options are: `\"body2XS\"`, `\"bodyXS\", `\"bodyS\", `\"bodyM\", `\"bodyL\", `\"bodyXL\", `\"headingXS\", `\"headingS\", `\"headingM\", `\"headingL\", `\"headingXL\", `\"heading2XL\".\n * Default is: `\"bodyM\"`.\n */\n @Prop() variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL' = 'bodyM';\n\n /**\n * The weight of text.\n * Options are: `\"regular\"`, `\"medium\", `\"semiBold\", `\"bold\".\n * Default is: `\"regular\"`.\n */\n @Prop() weight?: 'regular' | 'medium' | 'semiBold' | 'bold' = 'regular';\n\n private get Content() {\n switch (this.variant) {\n case 'headingXS': {\n return (\n <h6>\n <slot></slot>\n </h6>\n );\n }\n case 'headingS': {\n return (\n <h5>\n <slot></slot>\n </h5>\n );\n }\n case 'headingM': {\n return (\n <h4>\n <slot></slot>\n </h4>\n );\n }\n case 'headingL': {\n return (\n <h3>\n <slot></slot>\n </h3>\n );\n }\n case 'headingXL': {\n return (\n <h2>\n <slot></slot>\n </h2>\n );\n }\n case 'heading2XL': {\n return (\n <h1>\n <slot></slot>\n </h1>\n );\n }\n default: {\n return (\n <p>\n <slot></slot>\n </p>\n );\n }\n }\n }\n\n render() {\n return (\n <Host\n class={{\n // COLORS\n 'primary': this.color === 'primary',\n 'secondary': this.color === 'secondary',\n 'subtle': this.color === 'subtle',\n 'inverted': this.color === 'inverted',\n 'error': this.color === 'error',\n // WEIGHTS\n 'medium': this.weight === 'medium',\n 'semi-bold': this.weight === 'semiBold',\n 'bold': this.weight === 'bold',\n // SIZES\n 'body-2xs': this.variant === 'body2XS',\n 'body-xs': this.variant === 'bodyXS',\n 'body-s': this.variant === 'bodyS',\n 'body-m': this.variant === 'bodyM',\n 'body-l': this.variant === 'bodyL',\n 'body-xl': this.variant === 'bodyXL',\n 'heading-xs': this.variant === 'headingXS',\n 'heading-s': this.variant === 'headingS',\n 'heading-m': this.variant === 'headingM',\n 'heading-l': this.variant === 'headingL',\n 'heading-xl': this.variant === 'headingXL',\n 'heading-2xl': this.variant === 'heading2XL',\n }}\n >\n {this.Content}\n </Host>\n );\n }\n}\n"]}
|
@@ -67,6 +67,9 @@
|
|
67
67
|
:host :hover {
|
68
68
|
--button-background-color: var(--cpsl-color-tile-button-surface-hover);
|
69
69
|
}
|
70
|
+
:host :active {
|
71
|
+
--button-background-color: var(--cpsl-color-tile-button-surface-pressed);
|
72
|
+
}
|
70
73
|
|
71
74
|
.button-native {
|
72
75
|
border-radius: var(--button-border-radius);
|
@@ -5,7 +5,7 @@ export class CpslTileButton {
|
|
5
5
|
this.icon = undefined;
|
6
6
|
}
|
7
7
|
render() {
|
8
|
-
return (h(Host, { key: '
|
8
|
+
return (h(Host, { key: '61cbce3574220ee8009ab95c3e37d80535543d1c' }, h("button", { key: '50169b226155e2b06014c415dd522dfc0deb799c', class: "button-native" }, h("cpsl-icon", { key: '9ee77a4d725f4bec258ae753365a1f5aca733ff5', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: 'b01617dbca7322d9cc8f58c30680cd5f3ed0f576' }))));
|
9
9
|
}
|
10
10
|
static get is() { return "cpsl-tile-button"; }
|
11
11
|
static get encapsulation() { return "shadow"; }
|
@@ -43,7 +43,7 @@ export class CpslTileButton {
|
|
43
43
|
"mutable": false,
|
44
44
|
"complexType": {
|
45
45
|
"original": "IconType",
|
46
|
-
"resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"
|
46
|
+
"resolved": "\"key\" | \"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"capsuleRings\" | \"capsule\" | \"check\" | \"chevronUp\" | \"clock\" | \"close\" | \"clubhouseBrand\" | \"clubhouse\" | \"copy\" | \"discordBrand\" | \"discord\" | \"downloadCloud\" | \"dribbbleBrand\" | \"dribbble\" | \"eyeOff\" | \"eye\" | \"facebookBrand\" | \"facebook\" | \"figmaBrand\" | \"figma\" | \"githubBrand\" | \"github\" | \"googleBrand\" | \"google\" | \"helpCircle\" | \"heroEmail\" | \"heroLock\" | \"heroPasskey\" | \"heroPhone\" | \"heroWallet\" | \"infoCircle\" | \"instagramBrand\" | \"instagram\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"plusCircle\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"wallet\" | \"youtubeBrand\" | \"youtube\"",
|
47
47
|
"references": {
|
48
48
|
"IconType": {
|
49
49
|
"location": "import",
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAE/B,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC","sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n foregroundColor: '#121212',\n backgroundColor: '#FAFAFA',\n};\n"]}
|
package/dist/collection/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export * from './components';\n\nexport { generateTheme } from './utils/theme/generateTheme';\nexport type { Theme, BorderRadius } from './interface';\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n | 'on'\n | 'off'\n | 'name'\n | 'honorific-prefix'\n | 'given-name'\n | 'additional-name'\n | 'family-name'\n | 'honorific-suffix'\n | 'nickname'\n | 'email'\n | 'username'\n | 'new-password'\n | 'current-password'\n | 'one-time-code'\n | 'organization-title'\n | 'organization'\n | 'street-address'\n | 'address-line1'\n | 'address-line2'\n | 'address-line3'\n | 'address-level4'\n | 'address-level3'\n | 'address-level2'\n | 'address-level1'\n | 'country'\n | 'country-name'\n | 'postal-code'\n | 'cc-name'\n | 'cc-given-name'\n | 'cc-additional-name'\n | 'cc-family-name'\n | 'cc-family-name'\n | 'cc-number'\n | 'cc-exp'\n | 'cc-exp-month'\n | 'cc-exp-year'\n | 'cc-csc'\n | 'cc-type'\n | 'transaction-currency'\n | 'transaction-amount'\n | 'language'\n | 'bday'\n | 'bday-day'\n | 'bday-month'\n | 'bday-year'\n | 'sex'\n | 'tel'\n | 'tel-country-code'\n | 'tel-national'\n | 'tel-area-code'\n | 'tel-local'\n | 'tel-extension'\n | 'impp'\n | 'url'\n | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n"]}
|
1
|
+
{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../src/interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from './assets/icons';\n\nexport type PredefinedColors = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type AutocompleteTypes =\n | 'on'\n | 'off'\n | 'name'\n | 'honorific-prefix'\n | 'given-name'\n | 'additional-name'\n | 'family-name'\n | 'honorific-suffix'\n | 'nickname'\n | 'email'\n | 'username'\n | 'new-password'\n | 'current-password'\n | 'one-time-code'\n | 'organization-title'\n | 'organization'\n | 'street-address'\n | 'address-line1'\n | 'address-line2'\n | 'address-line3'\n | 'address-level4'\n | 'address-level3'\n | 'address-level2'\n | 'address-level1'\n | 'country'\n | 'country-name'\n | 'postal-code'\n | 'cc-name'\n | 'cc-given-name'\n | 'cc-additional-name'\n | 'cc-family-name'\n | 'cc-family-name'\n | 'cc-number'\n | 'cc-exp'\n | 'cc-exp-month'\n | 'cc-exp-year'\n | 'cc-csc'\n | 'cc-type'\n | 'transaction-currency'\n | 'transaction-amount'\n | 'language'\n | 'bday'\n | 'bday-day'\n | 'bday-month'\n | 'bday-year'\n | 'sex'\n | 'tel'\n | 'tel-country-code'\n | 'tel-national'\n | 'tel-area-code'\n | 'tel-local'\n | 'tel-extension'\n | 'impp'\n | 'url'\n | 'photo';\n\nexport type TextFieldTypes = 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'time' | 'week' | 'month' | 'datetime-local';\n\nexport type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type Color = LiteralUnion<PredefinedColors, string>;\n\nexport type CssClassMap = { [className: string]: boolean };\n\nexport type IconType = keyof typeof Icons;\n\nexport type Theme = {\n foregroundColor?: string;\n backgroundColor?: string;\n borderRadius?: BorderRadius;\n font?: string;\n customPalette?: CustomPalette;\n customFontSizes?: CustomFontSizes;\n};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';\n\nexport interface CustomFontSizes {\n body2XS?: string;\n bodyXS?: string;\n bodyS?: string;\n bodyM?: string;\n bodyL?: string;\n bodyXL?: string;\n headingXS?: string;\n headingS?: string;\n headingM?: string;\n headingL?: string;\n headingXL?: string;\n heading2XL?: string;\n}\n\nexport interface CustomPalette {\n text?: {\n primary?: string;\n secondary?: string;\n subtle?: string;\n inverted?: string;\n error?: string;\n };\n modal?: {\n surface?: {\n main?: string;\n footer?: string;\n };\n border?: string;\n };\n input?: {\n surface?: {\n disabled?: string;\n default?: string;\n };\n border?: {\n placeholder?: string;\n active?: string;\n error?: string;\n };\n };\n tileButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n };\n border?: string;\n };\n primaryButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n secondaryButton?: {\n surface?: {\n default?: string;\n hover?: string;\n pressed?: string;\n disabled?: string;\n };\n border?: {\n default?: string;\n disabled?: string;\n };\n outline?: string;\n };\n divider?: string;\n spinner?: {\n path?: string;\n circle?: string;\n };\n pill?: {\n text?: string;\n container?: {\n background?: string;\n border?: string;\n };\n };\n progressIndicator?: {\n active?: string;\n next?: string;\n previous?: string;\n };\n qr?: {\n fill?: string;\n background?: string;\n border?: string;\n };\n slideButton?: {\n slider?: {\n background?: string;\n border?: string;\n text?: string;\n container?: {\n start?: {\n background?: string;\n border?: string;\n };\n end?: {\n background?: string;\n border?: string;\n };\n };\n };\n start?: {\n text?: string;\n };\n end?: {\n text?: string;\n };\n };\n alert?: {\n surface?: {\n error?: string;\n };\n border?: {\n error?: string;\n };\n };\n}\n"]}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
export const generateBorderRadii = ({ borderRadius }) => {
|
2
|
+
if (!Boolean(borderRadius)) {
|
3
|
+
return;
|
4
|
+
}
|
5
|
+
let smallRadius = 8;
|
6
|
+
let mediumRadius = 16;
|
7
|
+
let largeRadius = 24;
|
8
|
+
const fullRadius = 1000;
|
9
|
+
let isFull = false;
|
10
|
+
let isNone = false;
|
11
|
+
switch (borderRadius) {
|
12
|
+
case 'none': {
|
13
|
+
isNone = true;
|
14
|
+
smallRadius = 0;
|
15
|
+
mediumRadius = 0;
|
16
|
+
largeRadius = 0;
|
17
|
+
break;
|
18
|
+
}
|
19
|
+
case 'xs': {
|
20
|
+
smallRadius = 4;
|
21
|
+
mediumRadius = 12;
|
22
|
+
largeRadius = 20;
|
23
|
+
break;
|
24
|
+
}
|
25
|
+
case 'md': {
|
26
|
+
smallRadius = 12;
|
27
|
+
mediumRadius = 20;
|
28
|
+
largeRadius = 28;
|
29
|
+
break;
|
30
|
+
}
|
31
|
+
case 'lg': {
|
32
|
+
smallRadius = 16;
|
33
|
+
mediumRadius = 24;
|
34
|
+
largeRadius = 32;
|
35
|
+
break;
|
36
|
+
}
|
37
|
+
case 'full': {
|
38
|
+
smallRadius = 16;
|
39
|
+
mediumRadius = 24;
|
40
|
+
largeRadius = 32;
|
41
|
+
isFull = true;
|
42
|
+
break;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);
|
46
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);
|
47
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);
|
48
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);
|
49
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);
|
50
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);
|
51
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);
|
52
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);
|
53
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);
|
54
|
+
document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);
|
55
|
+
};
|
56
|
+
//# sourceMappingURL=generateBorderRadii.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"generateBorderRadii.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateBorderRadii.ts"],"names":[],"mappings":"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","sourcesContent":["import { Theme } from '../../interface';\n\nexport const generateBorderRadii = ({ borderRadius }: Pick<Theme, 'borderRadius'>) => {\n if (!Boolean(borderRadius)) {\n return;\n }\n\n let smallRadius = 8;\n let mediumRadius = 16;\n let largeRadius = 24;\n const fullRadius = 1000;\n let isFull = false;\n let isNone = false;\n\n switch (borderRadius) {\n case 'none': {\n isNone = true;\n smallRadius = 0;\n mediumRadius = 0;\n largeRadius = 0;\n break;\n }\n case 'xs': {\n smallRadius = 4;\n mediumRadius = 12;\n largeRadius = 20;\n break;\n }\n case 'md': {\n smallRadius = 12;\n mediumRadius = 20;\n largeRadius = 28;\n break;\n }\n case 'lg': {\n smallRadius = 16;\n mediumRadius = 24;\n largeRadius = 32;\n break;\n }\n case 'full': {\n smallRadius = 16;\n mediumRadius = 24;\n largeRadius = 32;\n isFull = true;\n break;\n }\n }\n\n document.documentElement.style.setProperty('--cpsl-border-radius-input', `${isFull ? fullRadius : smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-alert', `${smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-tabs', `${isFull ? fullRadius : smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-primary-button', `${isFull ? fullRadius : smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-secondary-button', `${isFull ? fullRadius : smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-tile-button', `${smallRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-modal', `${mediumRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-pill', `${isNone ? 0 : fullRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-qr-code', `${largeRadius}px`);\n document.documentElement.style.setProperty('--cpsl-border-radius-info-box', `${smallRadius}px`);\n};\n"]}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
const FONT_NAME_MAP = {
|
2
|
+
body2XS: 'body-2xs',
|
3
|
+
bodyXS: 'body-xs',
|
4
|
+
bodyS: 'body-s',
|
5
|
+
bodyM: 'body-m',
|
6
|
+
bodyL: 'body-l',
|
7
|
+
bodyXL: 'body-xl',
|
8
|
+
headingXS: 'heading-xs',
|
9
|
+
headingS: 'heading-s',
|
10
|
+
headingM: 'heading-m',
|
11
|
+
headingL: 'heading-l',
|
12
|
+
headingXL: 'heading-xl',
|
13
|
+
heading2XL: 'heading-2xl',
|
14
|
+
};
|
15
|
+
export const generateFont = ({ font, customFontSizes }) => {
|
16
|
+
if (Boolean(font)) {
|
17
|
+
document.documentElement.style.setProperty('--cpsl-default-font', font);
|
18
|
+
}
|
19
|
+
Object.entries(FONT_NAME_MAP).forEach(([key, value]) => {
|
20
|
+
if (customFontSizes === null || customFontSizes === void 0 ? void 0 : customFontSizes[key]) {
|
21
|
+
document.documentElement.style.setProperty(`--cpsl-font-size-${value}`, customFontSizes[key]);
|
22
|
+
}
|
23
|
+
else {
|
24
|
+
document.documentElement.style.removeProperty(`--cpsl-font-size-${value}`);
|
25
|
+
}
|
26
|
+
});
|
27
|
+
};
|
28
|
+
//# sourceMappingURL=generateFont.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"generateFont.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateFont.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,UAAU;IACnB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,aAAa;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,eAAe,EAA2C,EAAE,EAAE;IACjG,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAClB,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;IAC1E,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACrD,IAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,GAAG,CAAC,EAAE,CAAC;YAC3B,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,KAAK,EAAE,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;QAChG,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,oBAAoB,KAAK,EAAE,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { Theme } from '../../interface';\n\nconst FONT_NAME_MAP = {\n body2XS: 'body-2xs',\n bodyXS: 'body-xs',\n bodyS: 'body-s',\n bodyM: 'body-m',\n bodyL: 'body-l',\n bodyXL: 'body-xl',\n headingXS: 'heading-xs',\n headingS: 'heading-s',\n headingM: 'heading-m',\n headingL: 'heading-l',\n headingXL: 'heading-xl',\n heading2XL: 'heading-2xl',\n};\n\nexport const generateFont = ({ font, customFontSizes }: Pick<Theme, 'font' | 'customFontSizes'>) => {\n if (Boolean(font)) {\n document.documentElement.style.setProperty('--cpsl-default-font', font);\n }\n\n Object.entries(FONT_NAME_MAP).forEach(([key, value]) => {\n if (customFontSizes?.[key]) {\n document.documentElement.style.setProperty(`--cpsl-font-size-${value}`, customFontSizes[key]);\n } else {\n document.documentElement.style.removeProperty(`--cpsl-font-size-${value}`);\n }\n });\n};\n"]}
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import { mix, readableColorIsBlack } from "color2k";
|
2
|
+
import { getCssColors, isColor } from "./utils";
|
3
|
+
import { DEFAULT_THEME } from "../../constants";
|
4
|
+
const MIXES = [0, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];
|
5
|
+
export const generatePalette = ({ foregroundColor, backgroundColor, customPalette }) => {
|
6
|
+
if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {
|
7
|
+
foregroundColor = DEFAULT_THEME.foregroundColor;
|
8
|
+
}
|
9
|
+
if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {
|
10
|
+
backgroundColor = DEFAULT_THEME.backgroundColor;
|
11
|
+
}
|
12
|
+
const isDarkBackground = !readableColorIsBlack(backgroundColor);
|
13
|
+
const palette = {
|
14
|
+
foregroundColors: [],
|
15
|
+
backgroundColors: [],
|
16
|
+
isDarkBackground,
|
17
|
+
};
|
18
|
+
const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';
|
19
|
+
const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';
|
20
|
+
MIXES.forEach(value => {
|
21
|
+
palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));
|
22
|
+
palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));
|
23
|
+
});
|
24
|
+
document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);
|
25
|
+
document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[1]);
|
26
|
+
document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[2]);
|
27
|
+
document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[3]);
|
28
|
+
document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[4]);
|
29
|
+
document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[5]);
|
30
|
+
document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[6]);
|
31
|
+
document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[7]);
|
32
|
+
document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);
|
33
|
+
document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[1]);
|
34
|
+
document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[2]);
|
35
|
+
document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[3]);
|
36
|
+
document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[4]);
|
37
|
+
document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[5]);
|
38
|
+
document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[6]);
|
39
|
+
document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[7]);
|
40
|
+
if (Boolean(customPalette)) {
|
41
|
+
const cssColorVars = getCssColors(customPalette);
|
42
|
+
Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
|
43
|
+
}
|
44
|
+
return palette;
|
45
|
+
};
|
46
|
+
//# sourceMappingURL=generatePalette.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"generatePalette.js","sourceRoot":"","sources":["../../../../src/utils/theme/generatePalette.ts"],"names":[],"mappings":"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","sourcesContent":["import { mix, readableColorIsBlack } from 'color2k';\nimport { Theme } from '../../interface';\nimport { getCssColors, isColor } from './utils';\nimport { DEFAULT_THEME } from '../../constants';\n\nexport type Palette = {\n foregroundColors: string[];\n backgroundColors: string[];\n isDarkBackground: boolean;\n};\n\nconst MIXES = [0, 0.08, 0.16, 0.32, 0.48, 0.64, 0.8, 0.96];\n\nexport const generatePalette = ({ foregroundColor, backgroundColor, customPalette }: Pick<Theme, 'foregroundColor' | 'backgroundColor' | 'customPalette'>): Palette => {\n if (!Boolean(foregroundColor) || !isColor(foregroundColor)) {\n foregroundColor = DEFAULT_THEME.foregroundColor;\n }\n if (!Boolean(backgroundColor) || !isColor(backgroundColor)) {\n backgroundColor = DEFAULT_THEME.backgroundColor;\n }\n\n const isDarkBackground = !readableColorIsBlack(backgroundColor);\n\n const palette: Palette = {\n foregroundColors: [],\n backgroundColors: [],\n isDarkBackground,\n };\n\n const backgroundMixColor = isDarkBackground ? '#FFFFFF' : '#000000';\n const foregroundMixColor = isDarkBackground ? '#000000' : '#FFFFFF';\n\n MIXES.forEach(value => {\n palette.foregroundColors.push(mix(foregroundColor, foregroundMixColor, value));\n palette.backgroundColors.push(mix(backgroundColor, backgroundMixColor, value));\n });\n\n // BACKGROUND\n document.documentElement.style.setProperty('--cpsl-color-background-0', palette.backgroundColors[0]);\n document.documentElement.style.setProperty('--cpsl-color-background-8', palette.backgroundColors[1]);\n document.documentElement.style.setProperty('--cpsl-color-background-16', palette.backgroundColors[2]);\n document.documentElement.style.setProperty('--cpsl-color-background-32', palette.backgroundColors[3]);\n document.documentElement.style.setProperty('--cpsl-color-background-48', palette.backgroundColors[4]);\n document.documentElement.style.setProperty('--cpsl-color-background-64', palette.backgroundColors[5]);\n document.documentElement.style.setProperty('--cpsl-color-background-80', palette.backgroundColors[6]);\n document.documentElement.style.setProperty('--cpsl-color-background-96', palette.backgroundColors[7]);\n\n // FOREGROUND\n document.documentElement.style.setProperty('--cpsl-color-foreground-0', palette.foregroundColors[0]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-8', palette.foregroundColors[1]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-16', palette.foregroundColors[2]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-32', palette.foregroundColors[3]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-48', palette.foregroundColors[4]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-64', palette.foregroundColors[5]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-80', palette.foregroundColors[6]);\n document.documentElement.style.setProperty('--cpsl-color-foreground-96', palette.foregroundColors[7]);\n\n if (Boolean(customPalette)) {\n const cssColorVars = getCssColors(customPalette);\n Object.entries(cssColorVars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));\n }\n\n return palette;\n};\n"]}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { DEFAULT_THEME } from "../../constants";
|
2
|
+
import { generateBorderRadii } from "./generateBorderRadii";
|
3
|
+
import { generateFont } from "./generateFont";
|
4
|
+
import { generatePalette } from "./generatePalette";
|
5
|
+
export const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius, customFontSizes, }) => {
|
6
|
+
const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });
|
7
|
+
generateFont({ font, customFontSizes });
|
8
|
+
generateBorderRadii({ borderRadius });
|
9
|
+
return palette.isDarkBackground;
|
10
|
+
};
|
11
|
+
//# sourceMappingURL=generateTheme.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"generateTheme.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,eAAe,GAAG,aAAa,CAAC,eAAe,EAC/C,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,eAAe,GACT,EAAW,EAAE;IACnB,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;IAErF,YAAY,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;IAExC,mBAAmB,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC,gBAAgB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { DEFAULT_THEME } from '../../constants';\nimport { Theme } from '../../interface';\nimport { generateBorderRadii } from './generateBorderRadii';\nimport { generateFont } from './generateFont';\nimport { generatePalette } from './generatePalette';\n\n/**\n * Generates css theme variables.\n * @returns @boolean Whether background is dark or not.\n */\nexport const generateTheme = ({\n foregroundColor = DEFAULT_THEME.foregroundColor,\n backgroundColor = DEFAULT_THEME.backgroundColor,\n font,\n customPalette,\n borderRadius,\n customFontSizes,\n}: Theme): boolean => {\n const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });\n\n generateFont({ font, customFontSizes });\n\n generateBorderRadii({ borderRadius });\n\n return palette.isDarkBackground;\n};\n"]}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
export const isColor = strColor => {
|
2
|
+
const s = new Option().style;
|
3
|
+
s.color = strColor;
|
4
|
+
return s.color !== '';
|
5
|
+
};
|
6
|
+
const toKebabCase = (pascal) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();
|
7
|
+
const buildVars = (prev, obj) => {
|
8
|
+
let resp = {};
|
9
|
+
for (const k in obj) {
|
10
|
+
const name = `${prev}-${toKebabCase(k)}`;
|
11
|
+
if (typeof obj[k] === 'object' && obj[k] !== null) {
|
12
|
+
resp = Object.assign(Object.assign({}, resp), buildVars(name, obj[k]));
|
13
|
+
}
|
14
|
+
else {
|
15
|
+
resp[name] = obj[k];
|
16
|
+
}
|
17
|
+
}
|
18
|
+
return resp;
|
19
|
+
};
|
20
|
+
export const getCssColors = (customPalette) => buildVars('--cpsl-color', customPalette);
|
21
|
+
//# sourceMappingURL=utils.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/utils/theme/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAE;IAChC,MAAM,CAAC,GAAG,IAAI,MAAM,EAAE,CAAC,KAAK,CAAC;IAC7B,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC;IACnB,OAAO,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;AACxB,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AAGpG,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,GAAQ,EAA2B,EAAE;IACpE,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;QACpB,MAAM,IAAI,GAAG,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;YAClD,IAAI,mCAAQ,IAAI,GAAK,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAE,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,aAA4B,EAA2B,EAAE,CAAC,SAAS,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC","sourcesContent":["import { CustomPalette } from '../../interface';\n\nexport const isColor = strColor => {\n const s = new Option().style;\n s.color = strColor;\n return s.color !== '';\n};\n\nconst toKebabCase = (pascal: string) => pascal.replace(/([a-z0–9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// This function handles arrays and objects\nconst buildVars = (prev: string, obj: any): { [k: string]: string } => {\n let resp = {};\n\n for (const k in obj) {\n const name = `${prev}-${toKebabCase(k)}`;\n if (typeof obj[k] === 'object' && obj[k] !== null) {\n resp = { ...resp, ...buildVars(name, obj[k]) };\n } else {\n resp[name] = obj[k];\n }\n }\n\n return resp;\n};\n\nexport const getCssColors = (customPalette: CustomPalette): { [k: string]: string } => buildVars('--cpsl-color', customPalette);\n"]}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
2
|
+
|
3
|
+
function getDefaultExportFromCjs (x) {
|
4
|
+
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
5
|
+
}
|
6
|
+
|
7
|
+
export { commonjsGlobal as c, getDefaultExportFromCjs as g };
|
8
|
+
|
9
|
+
//# sourceMappingURL=_commonjsHelpers-1789f0cf.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"file":"_commonjsHelpers-1789f0cf.js","mappings":";;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
package/dist/esm/capsule.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
2
|
-
export { s as setNonce } from './index-
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-f00e090c.js';
|
2
|
+
export { s as setNonce } from './index-f00e090c.js';
|
3
3
|
import { g as globalScripts } from './app-globals-0f993ce5.js';
|
4
4
|
|
5
5
|
/*
|
@@ -16,7 +16,7 @@ const patchBrowser = () => {
|
|
16
16
|
|
17
17
|
patchBrowser().then(async (options) => {
|
18
18
|
await globalScripts();
|
19
|
-
return bootstrapLazy([["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-
|
19
|
+
return bootstrapLazy([["cpsl-animation",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box",[[1,"cpsl-info-box"]]],["cpsl-row",[[1,"cpsl-row"]]],["cpsl-alert_18",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"items":[16],"isOpen":[32],"selectedItem":[32]},null,{"isOpen":["handleOpenChange"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
|
20
20
|
});
|
21
21
|
|
22
22
|
//# sourceMappingURL=capsule.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"file":"constants-7b49abd5.js","mappings":"MAEa,WAAW,GAAG,IAAI;MAElB,aAAa,GAAU;IAClC,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;;;;;","names":[],"sources":["src/constants.ts"],"sourcesContent":["import { Theme } from './interface';\n\nexport const MOBILE_SIZE = 480;\n\nexport const DEFAULT_THEME: Theme = {\n foregroundColor: '#121212',\n backgroundColor: '#FAFAFA',\n};\n"],"version":3}
|