@usecapsule/core-components 1.0.13 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (158) hide show
  1. package/css/capsule-core.css +74 -41
  2. package/css/capsule-core.css.map +1 -1
  3. package/dist/capsule/capsule.esm.js +1 -1
  4. package/dist/capsule/capsule.esm.js.map +1 -1
  5. package/dist/capsule/index.esm.js +1 -1
  6. package/dist/capsule/index.esm.js.map +1 -1
  7. package/dist/capsule/p-0462f723.js +2 -0
  8. package/dist/capsule/p-0462f723.js.map +1 -0
  9. package/dist/capsule/p-202a85c9.entry.js +29 -0
  10. package/dist/capsule/p-202a85c9.entry.js.map +1 -0
  11. package/dist/capsule/p-68c73705.entry.js +2 -0
  12. package/dist/capsule/{p-1dc07cd7.entry.js.map → p-68c73705.entry.js.map} +1 -1
  13. package/dist/capsule/p-6fb7c4d1.js +3 -0
  14. package/dist/capsule/p-6fb7c4d1.js.map +1 -0
  15. package/dist/capsule/{p-11048392.entry.js → p-91412151.entry.js} +2 -2
  16. package/dist/capsule/{p-62e7869a.entry.js → p-a95ec4df.entry.js} +2 -2
  17. package/dist/capsule/p-c2bf050b.js +2 -0
  18. package/dist/capsule/p-c2bf050b.js.map +1 -0
  19. package/dist/capsule/p-d7be092d.entry.js +10 -0
  20. package/dist/capsule/p-d7be092d.entry.js.map +1 -0
  21. package/dist/capsule/p-f604b591.entry.js +2 -0
  22. package/dist/cjs/_commonjsHelpers-b3309d7b.js +12 -0
  23. package/dist/cjs/_commonjsHelpers-b3309d7b.js.map +1 -0
  24. package/dist/cjs/capsule.cjs.js +2 -2
  25. package/dist/cjs/constants-4bb85cc5.js +12 -0
  26. package/dist/cjs/constants-4bb85cc5.js.map +1 -0
  27. package/dist/cjs/cpsl-alert_17.cjs.entry.js +3748 -554
  28. package/dist/cjs/cpsl-alert_17.cjs.entry.js.map +1 -1
  29. package/dist/cjs/cpsl-animation.cjs.entry.js +20129 -0
  30. package/dist/cjs/cpsl-animation.cjs.entry.js.map +1 -0
  31. package/dist/cjs/cpsl-col.cjs.entry.js +2 -2
  32. package/dist/cjs/cpsl-grid.cjs.entry.js +3 -3
  33. package/dist/cjs/cpsl-info-box.cjs.entry.js +3 -3
  34. package/dist/cjs/cpsl-info-box.cjs.entry.js.map +1 -1
  35. package/dist/cjs/cpsl-row.cjs.entry.js +2 -2
  36. package/dist/cjs/{index-2a026742.js → index-3fccb5b4.js} +22 -1
  37. package/dist/cjs/index-3fccb5b4.js.map +1 -0
  38. package/dist/cjs/index.cjs.js +338 -0
  39. package/dist/cjs/index.cjs.js.map +1 -1
  40. package/dist/cjs/loader.cjs.js +2 -2
  41. package/dist/collection/assets/icons/capsule-rings-dark.svg +34 -0
  42. package/dist/collection/assets/icons/capsule.svg +4 -4
  43. package/dist/collection/assets/icons/hero-email.svg +8 -30
  44. package/dist/collection/assets/icons/hero-lock.svg +4 -34
  45. package/dist/collection/assets/icons/hero-passkey.svg +9 -17
  46. package/dist/collection/assets/icons/hero-phone.svg +4 -15
  47. package/dist/collection/assets/icons/hero-wallet.svg +5 -44
  48. package/dist/collection/assets/icons/index.js +4 -2
  49. package/dist/collection/assets/icons/index.js.map +1 -1
  50. package/dist/collection/assets/icons/more-login-options.svg +10 -10
  51. package/dist/collection/assets/icons/plus-circle.svg +5 -0
  52. package/dist/collection/assets/icons/wallet.svg +5 -0
  53. package/dist/collection/collection-manifest.json +1 -0
  54. package/dist/collection/components/cpsl-alert/cpsl-alert.js +1 -1
  55. package/dist/collection/components/cpsl-animation/cpsl-animation.css +17 -0
  56. package/dist/collection/components/cpsl-animation/cpsl-animation.js +102 -0
  57. package/dist/collection/components/cpsl-animation/cpsl-animation.js.map +1 -0
  58. package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js +29 -0
  59. package/dist/collection/components/cpsl-animation/test/cpsl-animation.e2e.js.map +1 -0
  60. package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js +37 -0
  61. package/dist/collection/components/cpsl-animation/test/cpsl-animation.spec.js.map +1 -0
  62. package/dist/collection/components/cpsl-button/cpsl-button.css +3 -0
  63. package/dist/collection/components/cpsl-button/cpsl-button.js +2 -2
  64. package/dist/collection/components/cpsl-button/cpsl-button.js.map +1 -1
  65. package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +1 -1
  66. package/dist/collection/components/cpsl-col/cpsl-col.js +1 -1
  67. package/dist/collection/components/cpsl-divider/cpsl-divider.js +1 -1
  68. package/dist/collection/components/cpsl-grid/cpsl-grid.js +2 -2
  69. package/dist/collection/components/cpsl-icon/cpsl-icon.css +14 -0
  70. package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -3
  71. package/dist/collection/components/cpsl-icon/cpsl-icon.js.map +1 -1
  72. package/dist/collection/components/cpsl-info-box/cpsl-info-box.css +1 -1
  73. package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
  74. package/dist/collection/components/cpsl-input/cpsl-input.css +9 -4
  75. package/dist/collection/components/cpsl-input/cpsl-input.js +8 -6
  76. package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
  77. package/dist/collection/components/cpsl-modal/cpsl-modal.css +46 -4
  78. package/dist/collection/components/cpsl-modal/cpsl-modal.js +341 -24
  79. package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +1 -1
  80. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +30 -13
  81. package/dist/collection/components/cpsl-overlay/cpsl-overlay.js.map +1 -1
  82. package/dist/collection/components/cpsl-pill/cpsl-pill.css +3 -3
  83. package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
  84. package/dist/collection/components/cpsl-progress-indicator/cpsl-progress-indicator.css +3 -3
  85. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css +3 -3
  86. package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +1 -1
  87. package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
  88. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css +11 -9
  89. package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
  90. package/dist/collection/components/cpsl-spinner/cpsl-spinner.css +2 -2
  91. package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +2 -2
  92. package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
  93. package/dist/collection/components/cpsl-tabs/cpsl-tabs.css +17 -16
  94. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +2 -2
  95. package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +1 -1
  96. package/dist/collection/components/cpsl-text/cpsl-text.js +1 -1
  97. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css +3 -0
  98. package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
  99. package/dist/collection/constants.js +6 -0
  100. package/dist/collection/constants.js.map +1 -0
  101. package/dist/collection/index.js +1 -0
  102. package/dist/collection/index.js.map +1 -1
  103. package/dist/collection/interface.js.map +1 -1
  104. package/dist/collection/utils/theme/generateBorderRadii.js +56 -0
  105. package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -0
  106. package/dist/collection/utils/theme/generateFont.js +7 -0
  107. package/dist/collection/utils/theme/generateFont.js.map +1 -0
  108. package/dist/collection/utils/theme/generatePalette.js +46 -0
  109. package/dist/collection/utils/theme/generatePalette.js.map +1 -0
  110. package/dist/collection/utils/theme/generateTheme.js +12 -0
  111. package/dist/collection/utils/theme/generateTheme.js.map +1 -0
  112. package/dist/collection/utils/theme/utils.js +21 -0
  113. package/dist/collection/utils/theme/utils.js.map +1 -0
  114. package/dist/esm/_commonjsHelpers-1789f0cf.js +9 -0
  115. package/dist/esm/_commonjsHelpers-1789f0cf.js.map +1 -0
  116. package/dist/esm/capsule.js +3 -3
  117. package/dist/esm/constants-7b49abd5.js +9 -0
  118. package/dist/esm/constants-7b49abd5.js.map +1 -0
  119. package/dist/esm/cpsl-alert_17.entry.js +3747 -553
  120. package/dist/esm/cpsl-alert_17.entry.js.map +1 -1
  121. package/dist/esm/cpsl-animation.entry.js +20125 -0
  122. package/dist/esm/cpsl-animation.entry.js.map +1 -0
  123. package/dist/esm/cpsl-col.entry.js +2 -2
  124. package/dist/esm/cpsl-grid.entry.js +3 -3
  125. package/dist/esm/cpsl-info-box.entry.js +3 -3
  126. package/dist/esm/cpsl-info-box.entry.js.map +1 -1
  127. package/dist/esm/cpsl-row.entry.js +2 -2
  128. package/dist/esm/{index-7c2f5cb9.js → index-f00e090c.js} +22 -1
  129. package/dist/esm/index-f00e090c.js.map +1 -0
  130. package/dist/esm/index.js +335 -0
  131. package/dist/esm/index.js.map +1 -1
  132. package/dist/esm/loader.js +3 -3
  133. package/dist/types/assets/icons/index.d.ts +3 -1
  134. package/dist/types/components/cpsl-animation/cpsl-animation.d.ts +9 -0
  135. package/dist/types/components/cpsl-modal/cpsl-modal.d.ts +26 -5
  136. package/dist/types/components/cpsl-overlay/cpsl-overlay.d.ts +2 -2
  137. package/dist/types/components.d.ts +117 -13
  138. package/dist/types/constants.d.ts +3 -0
  139. package/dist/types/index.d.ts +2 -0
  140. package/dist/types/interface.d.ts +122 -0
  141. package/dist/types/utils/theme/generateBorderRadii.d.ts +2 -0
  142. package/dist/types/utils/theme/generateFont.d.ts +2 -0
  143. package/dist/types/utils/theme/generatePalette.d.ts +7 -0
  144. package/dist/types/utils/theme/generateTheme.d.ts +3 -0
  145. package/dist/types/utils/theme/utils.d.ts +5 -0
  146. package/package.json +5 -2
  147. package/dist/capsule/p-0e2fbb7f.entry.js +0 -20
  148. package/dist/capsule/p-0e2fbb7f.entry.js.map +0 -1
  149. package/dist/capsule/p-1dc07cd7.entry.js +0 -2
  150. package/dist/capsule/p-5c020abe.entry.js +0 -2
  151. package/dist/capsule/p-9647dd63.js +0 -3
  152. package/dist/capsule/p-9647dd63.js.map +0 -1
  153. package/dist/cjs/index-2a026742.js.map +0 -1
  154. package/dist/collection/assets/icons/more-login-options-dark.svg +0 -13
  155. package/dist/esm/index-7c2f5cb9.js.map +0 -1
  156. /package/dist/capsule/{p-11048392.entry.js.map → p-91412151.entry.js.map} +0 -0
  157. /package/dist/capsule/{p-62e7869a.entry.js.map → p-a95ec4df.entry.js.map} +0 -0
  158. /package/dist/capsule/{p-5c020abe.entry.js.map → p-f604b591.entry.js.map} +0 -0
package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js CHANGED
@@ -32,7 +32,7 @@ export class CpslQrCode {
32
32
  qrCode.append(container);
33
33
  }
34
34
  render() {
35
- return (h(Host, { key: 'c26c87e8a22d8134a60f9efebd1e27169d59cb0c' }, h("div", { key: 'd9a8ede7f1ffbcd80d58b916d38f38fea7fc4f74', id: "qr-container", class: "qr-container" })));
35
+ return (h(Host, { key: '5d582e113aff18956f54928d914685e1bef923a6' }, h("div", { key: '5a81f7e78bf5263b1409c3ba348694acbee6b49a', id: "qr-container", class: "qr-container" })));
36
36
  }
37
37
  static get is() { return "cpsl-qr-code"; }
38
38
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-row/cpsl-row.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Host, h } from "@stencil/core";
2
2
  export class CpslRow {
3
3
  render() {
4
- return (h(Host, { key: '6b0ced877619502c78baeccaceaf68f1feed6ea7' }, h("slot", { key: 'd132ce91967ad16904886baa14149ac8990d314f' })));
4
+ return (h(Host, { key: '7b7158e94f4d805c1d67fc96588ef34151e76d5a' }, h("slot", { key: '987a473c46bb7c2be19a35dc54d5ebc2522d9e0a' })));
5
5
  }
6
6
  static get is() { return "cpsl-row"; }
7
7
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.css CHANGED
@@ -59,19 +59,20 @@
59
59
  --slider-container-height: 44px;
60
60
  --slider-container-border-width: 1px;
61
61
  --slider-container-box-shadow: 0px 0px 4px 0px var(--cpsl-color-alpha-black-10) inset;
62
- --slider-container-start-background-color: var(--cpsl-color-foreground-senary);
63
- --slider-container-end-background-color: var(--cpsl-color-foreground-primary);
64
- --slider-container-border-color: var(--cpsl-color-foreground-quinary);
62
+ --slider-container-start-background-color: var(--cpsl-color-slideButton-slider-container-start-background);
63
+ --slider-container-end-background-color: var(--cpsl-color-slideButton-slider-container-end-background);
64
+ --slider-container-start-border-color: var(--cpsl-color-slideButton-slider-container-start-border);
65
+ --slider-container-end-border-color: var(--cpsl-color-slideButton-slider-container-end-border);
65
66
  /* SLIDER VARS */
66
67
  --slider-border-width: 1px;
67
68
  --slider-box-shadow: 3px 0px 4px 0px var(--cpsl-color-alpha-black-16);
68
- --slider-border-color: var(--cpsl-color-foreground-quinary);
69
- --slider-background-color: var(--cpsl-color-foreground-primary);
70
- --slider-color: var(--cpsl-color-text-inverted);
69
+ --slider-border-color: var(--cpsl-color-slideButton-slider-border);
70
+ --slider-background-color: var(--cpsl-color-slideButton-slider-background);
71
+ --slider-color: var(--cpsl-color-slideButton-slider-text);
71
72
  /* START TEXT VARS */
72
- --start-text-color: var(--cpsl-color-text-secondary);
73
+ --start-text-color: var(--cpsl-color-slideButton-start-text);
73
74
  /* END TEXT VARS */
74
- --end-text-color: var(--cpsl-color-text-inverted);
75
+ --end-text-color: var(--cpsl-color-slideButton-end-text);
75
76
  font-family: var(--cpsl-font-family, inherit);
76
77
  display: block;
77
78
  }
@@ -87,7 +88,6 @@
87
88
  height: var(--slider-container-height);
88
89
  border-width: var(--slider-container-border-width);
89
90
  border-style: solid;
90
- border-color: var(--slider-container-border-color);
91
91
  border-radius: calc(var(--slider-container-height) / 2);
92
92
  box-shadow: var(--slider-container-box-shadow);
93
93
  }
@@ -102,11 +102,13 @@
102
102
 
103
103
  .start-slider-container-background {
104
104
  background-color: var(--slider-container-start-background-color);
105
+ border-color: var(--slider-container-start-border-color);
105
106
  opacity: 100%;
106
107
  }
107
108
 
108
109
  .end-slider-container-background {
109
110
  background-color: var(--slider-container-end-background-color);
111
+ border-color: var(--slider-container-end-border-color);
110
112
  opacity: 0%;
111
113
  }
112
114
 
package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js CHANGED
@@ -114,7 +114,7 @@ export class CpslSlideButton {
114
114
  return this.el.shadowRoot.getElementById('end-icon');
115
115
  }
116
116
  render() {
117
- return (h(Host, { key: '393258461f583632bd2f0c98787790cd0ce1f8a7' }, h("div", { key: '655dfa975fc02ba1d01f09589c34b15bb50c4659', id: "slider-container", class: "slider-container" }, h("div", { key: '7971c73bd81c8ac3e7e8e561754f7df2a2d855c4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '9e6f364011c1f75ab35de04019c43d5d3044b1e4', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '31eb370862bc888bf866f5b972740a655234bccc', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: 'eb54452bb2fdbc202d1fe5c8fb77235b66255372', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: '121f213932a0a9d178fa680406fc20c2aa8d6a69', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '81a41d0ef2a1340fe8b9b29c7304352330cc7594', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'b584c9d5fed842cc5a9b2897601d7184a3addaf8', id: "end-text", class: "end-text" }, this.endText))));
117
+ return (h(Host, { key: 'd01cbdfa0b7e8f17ebb3a1f7ba49aded0ec70de6' }, h("div", { key: '37fd16cc1f2d7fb26929438a382f0684195d16f9', id: "slider-container", class: "slider-container" }, h("div", { key: '2504155ec8fb97a2daea8c1856db4332edf69fd4', id: "start-slider-container-background", class: { 'start-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: '475d235f0c1ea7ac8551c81cf94ca0dd657d3d74', id: "end-slider-container-background", class: { 'end-slider-container-background': true, 'slider-container-background': true } }), h("div", { key: 'c534e20d7d609392ef2f52e20b7b66a3cbb2d207', id: "slider", class: { slider: true, disabled: this.disabled } }, h("cpsl-icon", { key: '76ea202fba460ab3083ba48e673582bf37440544', id: "start-icon", class: { 'start-icon': true, 'icon': true }, icon: this.startIcon }), h("cpsl-icon", { key: 'dd92b0769644334cdba131523099cabc49b6f4e9', id: "end-icon", class: { 'end-icon': true, 'icon': true }, icon: this.endIcon })), h("span", { key: '97ff537baacce0bc3a2c31cc25fefc6078015f54', id: "start-text", class: { 'start-text': true, 'disabled': this.disabled } }, this.startText), h("span", { key: 'c51e4d97e30e6b03adcf9fb9567a75f865822c9d', id: "end-text", class: "end-text" }, this.endText))));
118
118
  }
119
119
  static get is() { return "cpsl-slide-button"; }
120
120
  static get encapsulation() { return "shadow"; }
@@ -152,7 +152,7 @@ export class CpslSlideButton {
152
152
  "mutable": false,
153
153
  "complexType": {
154
154
  "original": "IconType",
155
- "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\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptionsDark\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"youtubeBrand\" | \"youtube\"",
155
+ "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"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\" | \"key\" | \"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\"",
156
156
  "references": {
157
157
  "IconType": {
158
158
  "location": "import",
@@ -192,7 +192,7 @@ export class CpslSlideButton {
192
192
  "mutable": false,
193
193
  "complexType": {
194
194
  "original": "IconType",
195
- "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\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptionsDark\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"youtubeBrand\" | \"youtube\"",
195
+ "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"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\" | \"key\" | \"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\"",
196
196
  "references": {
197
197
  "IconType": {
198
198
  "location": "import",
package/dist/collection/components/cpsl-spinner/cpsl-spinner.css CHANGED
@@ -54,8 +54,8 @@
54
54
  * }
55
55
  */
56
56
  :host {
57
- --path-color: var(--cpsl-color-foreground-ternary);
58
- --circle-color: var(--cpsl-color-text-primary);
57
+ --path-color: var(--cpsl-color-spinner-path);
58
+ --circle-color: var(--cpsl-color-spinner-circle);
59
59
  display: flex;
60
60
  justify-content: center;
61
61
  align-items: center;
package/dist/collection/components/cpsl-spinner/cpsl-spinner.js CHANGED
@@ -5,13 +5,13 @@ export class CpslSpinner {
5
5
  this.speed = 1;
6
6
  }
7
7
  render() {
8
- return (h(Host, { key: 'c67c084c1bae79ba255ca736de4721d1f6ea928d', style: {
8
+ return (h(Host, { key: 'ccfa5727ea42f54e265ed2fc40632c608485a980', style: {
9
9
  'height': `${this.size}px`,
10
10
  'width': `${this.size}px`,
11
11
  'animation': `spin ${this.speed}s linear infinite`,
12
12
  '-webkit-animation': `spin ${this.speed}s linear infinite`,
13
13
  '-moz-animation': `spin ${this.speed}s linear infinite`,
14
- } }, h("svg", { key: 'a14c9a8d895fb713fd1a8533bca04fa6e60017d7', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: '5aaaf7cf5c649b717329266517e5ea1f39fccce8', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: 'a1a60d4f565a1cffb99177d4159a793621e7b288', cx: "45", cy: "27", r: "5" }))));
14
+ } }, h("svg", { key: '507b1f733ae8bdf6d53966b1b64d687911f7c8a3', height: this.size, width: this.size, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 54 54", fill: "none" }, h("path", { key: 'ea462771d440975eea28cc13f2eb787c827746be', d: "M43.1586 17C39.8082 11.5978 33.8243 8 27 8C16.5066 8 8 16.5066 8 27C8 37.4934 16.5066 46 27 46C33.8242 46 39.8082 42.4022 43.1586 37", "stroke-width": "6", "stroke-linecap": "round" }), h("circle", { key: '1e60ac891f97076ad558fb83f51c552f34626370', cx: "45", cy: "27", r: "5" }))));
15
15
  }
16
16
  static get is() { return "cpsl-spinner"; }
17
17
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-tab/cpsl-tab.js CHANGED
@@ -21,7 +21,7 @@ export class CpslTab {
21
21
  }
22
22
  }
23
23
  render() {
24
- return (h(Host, { key: 'd55a11bba84bea2f0d24c6190a84467aea4ac2d3', onClick: this.onTabClicked }, h("div", { key: '31e58097fd53e0286c6652eed32cb39b50e9ebf2', class: { 'tab-container': true } }, h("slot", { key: '01cdeb08c1f468de22ce7d01c6e5b8396231860e' }))));
24
+ return (h(Host, { key: '482701b2915c5e5e30c3ee8c13ef35ef4c7cfcb8', onClick: this.onTabClicked }, h("div", { key: '583db91ddbbf32225880b03d8521b117a85f5bf1', class: { 'tab-container': true } }, h("slot", { key: 'a1596c1858376a41ee72d4133966fd7ed75e79c0' }))));
25
25
  }
26
26
  static get is() { return "cpsl-tab"; }
27
27
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-tabs/cpsl-tabs.css CHANGED
@@ -58,12 +58,13 @@
58
58
  --tab-bottom-padding: 5px;
59
59
  --tab-left-padding: 16px;
60
60
  --tab-right-padding: 16px;
61
- --font-size: 12px;
62
- --line-height: 24px;
63
- --border-width: 1px;
64
- --border-color: var(--cpsl-color-input-border-placeholder);
65
- --tabs-background-color: var(--cpsl-color-background-subtle);
66
- --slider-background-color: var(--cpsl-color-background-primary);
61
+ --tabs-border-radius: var(--cpsl-border-radius-tabs);
62
+ --tabs-font-size: 12px;
63
+ --tabs-line-height: 24px;
64
+ --tabs-border-width: 1px;
65
+ --tabs-border-color: var(--cpsl-color-tabs-border);
66
+ --tabs-background-color: var(--cpsl-color-tabs-background);
67
+ --slider-background-color: var(--cpsl-color-tabs-slider-background);
67
68
  display: inline-block;
68
69
  max-width: 100%;
69
70
  font-family: var(--cpsl-font-family, inherit);
@@ -78,13 +79,13 @@
78
79
  display: flex;
79
80
  overflow-x: scroll;
80
81
  overflow-y: hidden;
81
- border-width: var(--border-width);
82
+ border-width: var(--tabs-border-width);
82
83
  border-style: solid;
83
- border-color: var(--border-color);
84
- border-radius: var(--border-radius, 10000px);
84
+ border-color: var(--tabs-border-color);
85
+ border-radius: var(--tabs-border-radius);
85
86
  background-color: var(--tabs-background-color);
86
- font-size: var(--font-size);
87
- line-height: var(--line-height);
87
+ font-size: var(--tabs-font-size);
88
+ line-height: var(--tabs-line-height);
88
89
  -ms-overflow-style: none;
89
90
  scrollbar-width: none;
90
91
  }
@@ -94,13 +95,13 @@
94
95
 
95
96
  .slider {
96
97
  position: absolute;
97
- top: calc(var(--border-width) * -1);
98
- bottom: calc(var(--border-width) * -1);
98
+ top: calc(var(--tabs-border-width) * -1);
99
+ bottom: calc(var(--tabs-border-width) * -1);
99
100
  left: -1px;
100
- border-width: var(--border-width);
101
+ border-width: var(--tabs-border-width);
101
102
  border-style: solid;
102
- border-color: var(--border-color);
103
- border-radius: var(--border-radius, 10000px);
103
+ border-color: var(--tabs-border-color);
104
+ border-radius: var(--tabs-border-radius);
104
105
  background-color: var(--slider-background-color);
105
106
  box-shadow: -1px 0px 2px 0px var(--cpsl-color-alpha-black-10), 1px 0px 2px 0px var(--cpsl-color-alpha-black-10);
106
107
  }
package/dist/collection/components/cpsl-tabs/cpsl-tabs.js CHANGED
@@ -44,9 +44,9 @@ export class CpslTabs {
44
44
  }
45
45
  render() {
46
46
  const tabsPosition = this.el.getBoundingClientRect();
47
- const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);
47
+ const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);
48
48
  const selectedTabRect = this.selectedTabRect;
49
- return (h(Host, { key: '0ed728859b1d8e218bda3fdc4022cdd061552d8d', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: 'b2cc2886ff4523c227b713385577375df9c1b4e7', class: "tabs-container" }, h("slot", { key: '591895925b58373da582610cf775d1828179b395' }), h("div", { key: '57bd7718e0525fdd20eaa5b005fc8d33408f45f8', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
49
+ return (h(Host, { key: 'db244b5a0ed262508ff5e5ca45e8f61cfcd6df35', class: { 'full-width': this.fullWidth }, onCpslTabButtonClick: this.onTabClicked }, h("div", { key: '9acd1dcaab946f97d68d5fe625859c245b6fbebc', class: "tabs-container" }, h("slot", { key: '6e58a5354af8118118773c9a296f06b90067d416' }), h("div", { key: '87a9977e13ccc5b3993d459284ce4dc886eb1103', class: { slider: true, loaded: this.loaded }, style: { width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` } }))));
50
50
  }
51
51
  static get is() { return "cpsl-tabs"; }
52
52
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cpsl-tabs.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tabs/cpsl-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Event, Prop, EventEmitter, State, Watch } from '@stencil/core';\nimport { TabClickEventDetail } from '../cpsl-tab/tab-interface';\nimport { TabsChangedEventDetail } from './tabs-interface';\n\n@Component({\n tag: 'cpsl-tabs',\n styleUrl: 'cpsl-tabs.scss',\n shadow: true,\n})\nexport class CpslTabs {\n @Element() el!: HTMLCpslTabsElement;\n\n @State() selectedTabRect?: DOMRect;\n @State() loaded: boolean = false;\n\n /**\n * Whether or not the tabs take the full width of their container.\n */\n @Prop() fullWidth?: boolean;\n\n /**\n * The selected tab component\n */\n @Prop() selectedTab?: string;\n\n /**\n * Emitted when a tab is changed\n */\n @Event() cpslTabsChanged!: EventEmitter<TabsChangedEventDetail>;\n\n /**\n * Emitted when tabs are initialized\n * @internal\n */\n @Event() cpslTabsInit!: EventEmitter<TabsChangedEventDetail>;\n\n @Watch('fullWidth')\n updateSlider() {\n // Allow component to condense or expand before recalculating silder\n setTimeout(() => {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }, 50);\n }\n\n @Watch('selectedTab')\n updateTab(newValue?: string, oldValue?: string) {\n if (Boolean(newValue) && !Boolean(oldValue)) {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }\n }\n\n componentWillLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n this.cpslTabsInit.emit({\n tab: this.selectedTab,\n });\n }\n\n componentDidLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n // Allow slider to be rendered with the correct initial style before the transition is added\n setTimeout(() => {\n this.loaded = true;\n }, 50);\n }\n\n private get tabs() {\n return Array.from(this.el.querySelectorAll('cpsl-tab'));\n }\n\n private onTabClicked = (ev: CustomEvent<TabClickEventDetail>) => {\n const { tab } = ev.detail;\n\n if (tab !== this.selectedTab) {\n this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();\n\n this.cpslTabsChanged.emit({\n tab,\n });\n }\n };\n\n render() {\n const tabsPosition = this.el.getBoundingClientRect();\n // Get border width as a number\n const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--border-width').slice(0, -2);\n const selectedTabRect = this.selectedTabRect;\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} onCpslTabButtonClick={this.onTabClicked}>\n <div class=\"tabs-container\">\n <slot></slot>\n <div\n class={{ slider: true, loaded: this.loaded }}\n style={{ width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` }}\n />\n </div>\n </Host>\n );\n }\n}\n\nconst getTab = (tabs: HTMLCpslTabElement[], tab: string | HTMLCpslTabElement): HTMLCpslTabElement | undefined => {\n const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;\n\n return tabEl;\n};\n"]}
1
+ {"version":3,"file":"cpsl-tabs.js","sourceRoot":"","sources":["../../../../src/components/cpsl-tabs/cpsl-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, h, Event, Prop, EventEmitter, State, Watch } from '@stencil/core';\nimport { TabClickEventDetail } from '../cpsl-tab/tab-interface';\nimport { TabsChangedEventDetail } from './tabs-interface';\n\n@Component({\n tag: 'cpsl-tabs',\n styleUrl: 'cpsl-tabs.scss',\n shadow: true,\n})\nexport class CpslTabs {\n @Element() el!: HTMLCpslTabsElement;\n\n @State() selectedTabRect?: DOMRect;\n @State() loaded: boolean = false;\n\n /**\n * Whether or not the tabs take the full width of their container.\n */\n @Prop() fullWidth?: boolean;\n\n /**\n * The selected tab component\n */\n @Prop() selectedTab?: string;\n\n /**\n * Emitted when a tab is changed\n */\n @Event() cpslTabsChanged!: EventEmitter<TabsChangedEventDetail>;\n\n /**\n * Emitted when tabs are initialized\n * @internal\n */\n @Event() cpslTabsInit!: EventEmitter<TabsChangedEventDetail>;\n\n @Watch('fullWidth')\n updateSlider() {\n // Allow component to condense or expand before recalculating silder\n setTimeout(() => {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }, 50);\n }\n\n @Watch('selectedTab')\n updateTab(newValue?: string, oldValue?: string) {\n if (Boolean(newValue) && !Boolean(oldValue)) {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab).getBoundingClientRect();\n }\n }\n\n componentWillLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n this.cpslTabsInit.emit({\n tab: this.selectedTab,\n });\n }\n\n componentDidLoad() {\n this.selectedTabRect = getTab(this.tabs, this.selectedTab)?.getBoundingClientRect() ?? ({ width: 0, x: 0 } as DOMRect);\n\n // Allow slider to be rendered with the correct initial style before the transition is added\n setTimeout(() => {\n this.loaded = true;\n }, 50);\n }\n\n private get tabs() {\n return Array.from(this.el.querySelectorAll('cpsl-tab'));\n }\n\n private onTabClicked = (ev: CustomEvent<TabClickEventDetail>) => {\n const { tab } = ev.detail;\n\n if (tab !== this.selectedTab) {\n this.selectedTabRect = getTab(this.tabs, tab).getBoundingClientRect();\n\n this.cpslTabsChanged.emit({\n tab,\n });\n }\n };\n\n render() {\n const tabsPosition = this.el.getBoundingClientRect();\n // Get border width as a number\n const tabsBorderWidth = +getComputedStyle(this.el).getPropertyValue('--tabs-border-width').slice(0, -2);\n const selectedTabRect = this.selectedTabRect;\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} onCpslTabButtonClick={this.onTabClicked}>\n <div class=\"tabs-container\">\n <slot></slot>\n <div\n class={{ slider: true, loaded: this.loaded }}\n style={{ width: `${selectedTabRect.width}px`, left: `${selectedTabRect.x - tabsPosition.x - tabsBorderWidth * 2}px` }}\n />\n </div>\n </Host>\n );\n }\n}\n\nconst getTab = (tabs: HTMLCpslTabElement[], tab: string | HTMLCpslTabElement): HTMLCpslTabElement | undefined => {\n const tabEl = typeof tab === 'string' ? tabs.find(t => t.tab === tab) : tab;\n\n return tabEl;\n};\n"]}
package/dist/collection/components/cpsl-text/cpsl-text.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { Host, h } from "@stencil/core";
2
2
  export class CpslText {
3
3
  render() {
4
- return (h(Host, { key: '72726bc3a58e3089f02b70d494ead181eb34f2d3' }, h("slot", { key: '8f8b009bc13ea9bb7824b51c622b115c6b103a9c' })));
4
+ return (h(Host, { key: '14b6b911fe1c66fa0dbc118207755123110fd85a' }, h("slot", { key: 'ebf8c3b818cc85fd06bc4feb3d7c2b21818fcc9c' })));
5
5
  }
6
6
  static get is() { return "cpsl-text"; }
7
7
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css CHANGED
@@ -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);
package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js CHANGED
@@ -5,7 +5,7 @@ export class CpslTileButton {
5
5
  this.icon = undefined;
6
6
  }
7
7
  render() {
8
- return (h(Host, { key: 'db1693ec8a607410ba6bb5fbe15b4acaec26ff84' }, h("button", { key: '6da2c97b58e7ee13c86a386461831ed93fa3fee9', class: "button-native" }, h("cpsl-icon", { key: '0dbe6348fedb418151384747bac7f902b31d6c9a', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '8d15a91f86b060edefcf3ae359df2ceb2e1b4a76' }))));
8
+ return (h(Host, { key: 'f86ee8387b40817115e680cad78b3cab4af7b35f' }, h("button", { key: '7fa11eeed97fd89c8d5640cb270403c6bab8cda1', class: "button-native" }, h("cpsl-icon", { key: '0b605c0839dd930cc97a70fd867619929c3ce5af', exportparts: "icon", src: this.src, icon: this.icon }), h("slot", { key: '8c3fe5d96e1443cd7a454589cdb279a684773a83' }))));
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\" | \"key\" | \"linkedinBrand\" | \"linkedin\" | \"mail\" | \"moreLoginOptionsDark\" | \"moreLoginOptions\" | \"phone\" | \"pintrestBrand\" | \"pintrest\" | \"redditBrand\" | \"reddit\" | \"signalBrand\" | \"signal\" | \"snapchatBrand\" | \"snapchat\" | \"telegramBrand\" | \"telegram\" | \"tikTokBrand\" | \"tikTok\" | \"tumblrBrand\" | \"tumblr\" | \"twitterBrand\" | \"twitter\" | \"youtubeBrand\" | \"youtube\"",
46
+ "resolved": "\"alertCircle\" | \"angelListBrand\" | \"angelList\" | \"appleBrand\" | \"apple\" | \"arrowNarrow\" | \"arrow\" | \"backupKit\" | \"capsuleLogo\" | \"capsuleRingsDark\" | \"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\" | \"key\" | \"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",
package/dist/collection/constants.js ADDED
@@ -0,0 +1,6 @@
1
+ export const MOBILE_SIZE = 480;
2
+ export const DEFAULT_THEME = {
3
+ foregroundColor: '#121212',
4
+ backgroundColor: '#FAFAFA',
5
+ };
6
+ //# sourceMappingURL=constants.js.map
package/dist/collection/constants.js.map ADDED
@@ -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,2 +1,3 @@
1
1
  export * from './components';
2
+ export { default as generateTheme } from './utils/theme/generateTheme';
2
3
  //# sourceMappingURL=index.js.map
package/dist/collection/index.js.map 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,OAAO,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export * from './components';\n\nexport { default as generateTheme } from './utils/theme/generateTheme';\nexport type { Theme, BorderRadius } from './interface';\n"]}
package/dist/collection/interface.js.map CHANGED
@@ -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};\n\nexport type BorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';\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"]}
package/dist/collection/utils/theme/generateBorderRadii.js ADDED
@@ -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
package/dist/collection/utils/theme/generateBorderRadii.js.map ADDED
@@ -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"]}
package/dist/collection/utils/theme/generateFont.js ADDED
@@ -0,0 +1,7 @@
1
+ export const generateFont = ({ font }) => {
2
+ if (!Boolean(font)) {
3
+ return;
4
+ }
5
+ document.documentElement.style.setProperty('--cpsl-default-font', font);
6
+ };
7
+ //# sourceMappingURL=generateFont.js.map
package/dist/collection/utils/theme/generateFont.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generateFont.js","sourceRoot":"","sources":["../../../../src/utils/theme/generateFont.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAuB,EAAE,EAAE;IAC5D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QACnB,OAAO;IACT,CAAC;IAED,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;AAC1E,CAAC,CAAC","sourcesContent":["import { Theme } from '../../interface';\n\nexport const generateFont = ({ font }: Pick<Theme, 'font'>) => {\n if (!Boolean(font)) {\n return;\n }\n\n document.documentElement.style.setProperty('--cpsl-default-font', font);\n};\n"]}
package/dist/collection/utils/theme/generatePalette.js ADDED
@@ -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
package/dist/collection/utils/theme/generatePalette.js.map ADDED
@@ -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"]}
package/dist/collection/utils/theme/generateTheme.js ADDED
@@ -0,0 +1,12 @@
1
+ import { DEFAULT_THEME } from "../../constants";
2
+ import { generateBorderRadii } from "./generateBorderRadii";
3
+ import { generateFont } from "./generateFont";
4
+ import { generatePalette } from "./generatePalette";
5
+ const generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius }) => {
6
+ const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });
7
+ generateFont({ font });
8
+ generateBorderRadii({ borderRadius });
9
+ return palette.isDarkBackground;
10
+ };
11
+ export default generateTheme;
12
+ //# sourceMappingURL=generateTheme.js.map
package/dist/collection/utils/theme/generateTheme.js.map ADDED
@@ -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,aAAa,GAAG,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC,eAAe,EAAE,eAAe,GAAG,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAS,EAAW,EAAE;IAChL,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC,CAAC;IAErF,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAEvB,mBAAmB,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;IAEtC,OAAO,OAAO,CAAC,gBAAgB,CAAC;AAClC,CAAC,CAAC;AAEF,eAAe,aAAa,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 */\nconst generateTheme = ({ foregroundColor = DEFAULT_THEME.foregroundColor, backgroundColor = DEFAULT_THEME.backgroundColor, font, customPalette, borderRadius }: Theme): boolean => {\n const palette = generatePalette({ foregroundColor, backgroundColor, customPalette });\n\n generateFont({ font });\n\n generateBorderRadii({ borderRadius });\n\n return palette.isDarkBackground;\n};\n\nexport default generateTheme;\n"]}
package/dist/collection/utils/theme/utils.js ADDED
@@ -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
package/dist/collection/utils/theme/utils.js.map ADDED
@@ -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"]}
package/dist/esm/_commonjsHelpers-1789f0cf.js ADDED
@@ -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
package/dist/esm/_commonjsHelpers-1789f0cf.js.map ADDED
@@ -0,0 +1 @@
1
+ {"file":"_commonjsHelpers-1789f0cf.js","mappings":";;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}