@usecapsule/core-components 3.3.0-dev.2 → 3.3.0-dev.5
Sign up to get free protection for your applications and to get access to all the features.
- package/css/capsule-core.css +25 -10
- 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-0e558c7f.entry.js +10 -0
- package/dist/capsule/{p-05cb769b.entry.js.map → p-0e558c7f.entry.js.map} +1 -1
- package/dist/capsule/{p-69c3c53b.entry.js → p-1bd11889.entry.js} +2 -2
- package/dist/capsule/{p-69c3c53b.entry.js.map → p-1bd11889.entry.js.map} +1 -1
- package/dist/capsule/p-32cdf894.entry.js +2 -0
- package/dist/capsule/p-32cdf894.entry.js.map +1 -0
- package/dist/capsule/p-3b042fd1.entry.js +2 -0
- package/dist/capsule/p-5965b15e.entry.js +2 -0
- package/dist/capsule/{p-c1aa1ffb.entry.js.map → p-5965b15e.entry.js.map} +1 -1
- package/dist/capsule/{p-742bda0b.entry.js → p-5d62e610.entry.js} +2 -2
- package/dist/capsule/p-60508b1e.entry.js +20 -0
- package/dist/capsule/p-60508b1e.entry.js.map +1 -0
- package/dist/cjs/capsule.cjs.js +1 -1
- package/dist/cjs/{cpsl-alert_33.cjs.entry.js → cpsl-alert_34.cjs.entry.js} +17028 -13461
- package/dist/cjs/cpsl-alert_34.cjs.entry.js.map +1 -0
- package/dist/cjs/cpsl-animation.cjs.entry.js +3 -2
- package/dist/cjs/cpsl-animation.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-hero.cjs.entry.js +9 -6
- package/dist/cjs/cpsl-hero.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-identicon.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-info-box.cjs.entry.js +2 -2
- package/dist/cjs/cpsl-info-box.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-modal-v2.cjs.entry.js +1 -1
- package/dist/cjs/cpsl-modal-v2.cjs.entry.js.map +1 -1
- package/dist/cjs/cpsl-row.cjs.entry.js +1 -1
- package/dist/cjs/index-65f57499.js +2 -2
- package/dist/cjs/index.cjs.js +35 -12
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/icons/arrow-circle-broken-down-left.svg +3 -0
- package/dist/collection/assets/icons/bank.svg +3 -0
- package/dist/collection/assets/icons/credit-card.svg +3 -0
- package/dist/collection/assets/icons/dot.svg +3 -0
- package/dist/collection/assets/icons/download.svg +3 -0
- package/dist/collection/assets/icons/globe.svg +3 -0
- package/dist/collection/assets/icons/hero-alert-circle.svg +3 -0
- package/dist/collection/assets/icons/hero-checkmark-capsule.svg +11 -0
- package/dist/collection/assets/icons/hero-checkmark.svg +3 -0
- package/dist/collection/assets/icons/hero-external-connection.svg +71 -0
- package/dist/collection/assets/icons/index.js +21 -1
- package/dist/collection/assets/icons/index.js.map +1 -1
- package/dist/collection/assets/icons/link-external.svg +3 -0
- package/dist/collection/assets/icons/log-out.svg +3 -0
- package/dist/collection/assets/icons/moonpay-brand.svg +10 -0
- package/dist/collection/assets/icons/puzzle-piece.svg +3 -0
- package/dist/collection/assets/icons/qr-code-02.svg +3 -0
- package/dist/collection/assets/icons/qr-code.svg +3 -0
- package/dist/collection/assets/icons/refresh.svg +3 -3
- package/dist/collection/assets/icons/search.svg +3 -0
- package/dist/collection/assets/icons/send.svg +3 -0
- package/dist/collection/assets/icons/shield.svg +3 -0
- package/dist/collection/assets/icons/stripe-brand.svg +3 -0
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/cpsl-alert/cpsl-alert.js +2 -2
- package/dist/collection/components/cpsl-alert/cpsl-alert.js.map +1 -1
- package/dist/collection/components/{cpsl-modal/cpsl-modal.css → cpsl-auth-modal/cpsl-auth-modal.css} +33 -58
- package/dist/collection/components/{cpsl-modal/cpsl-modal.js → cpsl-auth-modal/cpsl-auth-modal.js} +11 -129
- package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js.map +1 -0
- package/dist/collection/components/cpsl-button/cpsl-button.css +89 -2
- package/dist/collection/components/cpsl-button/cpsl-button.js +6 -5
- package/dist/collection/components/cpsl-button/cpsl-button.js.map +1 -1
- package/dist/collection/components/cpsl-button/cpsl-button.stories.js.map +1 -1
- package/dist/collection/components/cpsl-card/cpsl-card.css +5 -2
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.css +3 -0
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js +11 -7
- package/dist/collection/components/cpsl-code-input/cpsl-code-input.js.map +1 -1
- package/dist/collection/components/cpsl-divider/cpsl-divider.css +2 -1
- package/dist/collection/components/cpsl-drawer/cpsl-drawer.js +1 -1
- package/dist/collection/components/cpsl-drawer/cpsl-drawer.js.map +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +2 -2
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -1
- package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js +1 -6
- package/dist/collection/components/cpsl-file-upload/cpsl-file-upload.js.map +1 -1
- package/dist/collection/components/cpsl-hero/cpsl-hero.css +136 -71
- package/dist/collection/components/cpsl-hero/cpsl-hero.js +63 -9
- package/dist/collection/components/cpsl-hero/cpsl-hero.js.map +1 -1
- package/dist/collection/components/cpsl-icon/cpsl-icon.css +8 -0
- package/dist/collection/components/cpsl-icon/cpsl-icon.js +2 -2
- package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.css +97 -0
- package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.js +121 -0
- package/dist/collection/components/cpsl-icon-group/cpsl-icon-group.js.map +1 -0
- package/dist/collection/components/cpsl-identicon/cpsl-identicon.js +1 -1
- package/dist/collection/components/cpsl-info-box/cpsl-info-box.css +1 -2
- package/dist/collection/components/cpsl-info-box/cpsl-info-box.js +1 -1
- package/dist/collection/components/cpsl-input/cpsl-input.css +21 -2
- package/dist/collection/components/cpsl-input/cpsl-input.js +100 -28
- package/dist/collection/components/cpsl-input/cpsl-input.js.map +1 -1
- package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js +1 -1
- package/dist/collection/components/cpsl-modal-v2/cpsl-modal-v2.js.map +1 -1
- package/dist/collection/components/cpsl-nav-button-group/cpsl-nav-button-group.js +1 -1
- package/dist/collection/components/cpsl-overlay/cpsl-overlay.js +1 -1
- package/dist/collection/components/cpsl-pagination/cpsl-pagination.js +1 -1
- package/dist/collection/components/cpsl-pill/cpsl-pill.js +1 -1
- package/dist/collection/components/cpsl-popover/cpsl-popover.css +2 -0
- package/dist/collection/components/cpsl-popover/cpsl-popover.js +9 -11
- package/dist/collection/components/cpsl-popover/cpsl-popover.js.map +1 -1
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.css +12 -3
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js +28 -23
- package/dist/collection/components/cpsl-qr-code/cpsl-qr-code.js.map +1 -1
- package/dist/collection/components/cpsl-radio/cpsl-radio.js +1 -1
- package/dist/collection/components/cpsl-row/cpsl-row.js +1 -1
- package/dist/collection/components/cpsl-select/cpsl-select.css +17 -0
- package/dist/collection/components/cpsl-select/cpsl-select.js +95 -5
- package/dist/collection/components/cpsl-select/cpsl-select.js.map +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js +1 -1
- package/dist/collection/components/cpsl-select-item/cpsl-select-item.js.map +1 -1
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js +3 -3
- package/dist/collection/components/cpsl-slide-button/cpsl-slide-button.js.map +1 -1
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.css +30 -8
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.js +5 -7
- package/dist/collection/components/cpsl-spinner/cpsl-spinner.js.map +1 -1
- package/dist/collection/components/cpsl-switch/cpsl-switch.js +1 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.css +24 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.js +1 -1
- package/dist/collection/components/cpsl-tab/cpsl-tab.js.map +1 -1
- package/dist/collection/components/cpsl-table/cpsl-table.js +1 -9
- package/dist/collection/components/cpsl-table/cpsl-table.js.map +1 -1
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.css +1 -4
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js +1 -4
- package/dist/collection/components/cpsl-tabs/cpsl-tabs.js.map +1 -1
- package/dist/collection/components/cpsl-text/cpsl-text.css +19 -0
- package/dist/collection/components/cpsl-text/cpsl-text.js +5 -4
- package/dist/collection/components/cpsl-text/cpsl-text.js.map +1 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.css +3 -1
- package/dist/collection/components/cpsl-tile-button/cpsl-tile-button.js +2 -2
- package/dist/collection/interface.js.map +1 -1
- package/dist/collection/utils/theme/generateBorderRadii.js +4 -3
- package/dist/collection/utils/theme/generateBorderRadii.js.map +1 -1
- package/dist/collection/utils/theme/generatePalette.js +22 -6
- package/dist/collection/utils/theme/generatePalette.js.map +1 -1
- package/dist/collection/utils/theme/generateTheme.js +9 -3
- package/dist/collection/utils/theme/generateTheme.js.map +1 -1
- package/dist/collection/utils/theme/utils.js.map +1 -1
- package/dist/esm/capsule.js +1 -1
- package/dist/esm/{cpsl-alert_33.entry.js → cpsl-alert_34.entry.js} +17029 -13463
- package/dist/esm/cpsl-alert_34.entry.js.map +1 -0
- package/dist/esm/cpsl-animation.entry.js +2 -1
- package/dist/esm/cpsl-animation.entry.js.map +1 -1
- package/dist/esm/cpsl-hero.entry.js +10 -7
- package/dist/esm/cpsl-hero.entry.js.map +1 -1
- package/dist/esm/cpsl-identicon.entry.js +1 -1
- package/dist/esm/cpsl-info-box.entry.js +2 -2
- package/dist/esm/cpsl-info-box.entry.js.map +1 -1
- package/dist/esm/cpsl-modal-v2.entry.js +1 -1
- package/dist/esm/cpsl-modal-v2.entry.js.map +1 -1
- package/dist/esm/cpsl-row.entry.js +1 -1
- package/dist/esm/index-91db3414.js +2 -2
- package/dist/esm/index.js +35 -12
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/assets/icons/index.d.ts +20 -0
- package/dist/types/components/{cpsl-modal/cpsl-modal.d.ts → cpsl-auth-modal/cpsl-auth-modal.d.ts} +3 -23
- package/dist/types/components/cpsl-button/cpsl-button.d.ts +2 -2
- package/dist/types/components/cpsl-hero/cpsl-hero.d.ts +18 -3
- package/dist/types/components/cpsl-icon-group/cpsl-icon-group.d.ts +20 -0
- package/dist/types/components/cpsl-input/cpsl-input.d.ts +13 -3
- package/dist/types/components/cpsl-popover/cpsl-popover.d.ts +2 -2
- package/dist/types/components/cpsl-qr-code/cpsl-qr-code.d.ts +1 -0
- package/dist/types/components/cpsl-select/cpsl-select.d.ts +22 -1
- package/dist/types/components/cpsl-text/cpsl-text.d.ts +1 -1
- package/dist/types/components.d.ts +222 -146
- package/dist/types/interface.d.ts +13 -0
- package/dist/types/utils/theme/generateBorderRadii.d.ts +1 -1
- package/dist/types/utils/theme/generatePalette.d.ts +4 -2
- package/dist/types/utils/theme/generateTheme.d.ts +1 -1
- package/package.json +3 -2
- package/dist/capsule/p-0462f723.js +0 -2
- package/dist/capsule/p-0462f723.js.map +0 -1
- package/dist/capsule/p-05cb769b.entry.js +0 -10
- package/dist/capsule/p-0eea90f8.entry.js +0 -2
- package/dist/capsule/p-4203888d.entry.js +0 -29
- package/dist/capsule/p-4203888d.entry.js.map +0 -1
- package/dist/capsule/p-c1aa1ffb.entry.js +0 -2
- package/dist/capsule/p-d351f076.entry.js +0 -2
- package/dist/capsule/p-d351f076.entry.js.map +0 -1
- package/dist/cjs/_commonjsHelpers-b3309d7b.js +0 -12
- package/dist/cjs/_commonjsHelpers-b3309d7b.js.map +0 -1
- package/dist/cjs/cpsl-alert_33.cjs.entry.js.map +0 -1
- package/dist/collection/components/cpsl-modal/cpsl-modal.js.map +0 -1
- package/dist/esm/_commonjsHelpers-1789f0cf.js +0 -9
- package/dist/esm/_commonjsHelpers-1789f0cf.js.map +0 -1
- package/dist/esm/cpsl-alert_33.entry.js.map +0 -1
- /package/dist/capsule/{p-0eea90f8.entry.js.map → p-3b042fd1.entry.js.map} +0 -0
- /package/dist/capsule/{p-742bda0b.entry.js.map → p-5d62e610.entry.js.map} +0 -0
package/css/capsule-core.css
CHANGED
|
@@ -100,6 +100,7 @@ body.backdrop-no-scroll {
|
|
|
100
100
|
--cpsl-color-foreground-64: rgb(171, 171, 171);
|
|
101
101
|
--cpsl-color-foreground-80: rgb(209, 209, 209);
|
|
102
102
|
--cpsl-color-foreground-96: rgb(246, 246, 246);
|
|
103
|
+
--cpsl-color-contrast: rgb(0, 0, 0);
|
|
103
104
|
--cpsl-color-utility-red: rgb(240, 68, 56);
|
|
104
105
|
--cpsl-color-utility-red-light: rgb(251, 203, 199);
|
|
105
106
|
--cpsl-color-utility-yellow: rgb(251, 188, 4);
|
|
@@ -107,12 +108,13 @@ body.backdrop-no-scroll {
|
|
|
107
108
|
--cpsl-color-utility-green: rgb(52, 168, 83);
|
|
108
109
|
--cpsl-color-utility-green-light: rgb(198, 231, 207);
|
|
109
110
|
--cpsl-color-text-primary: var(--cpsl-color-foreground-0);
|
|
110
|
-
--cpsl-color-text-secondary: var(--cpsl-color-background-
|
|
111
|
+
--cpsl-color-text-secondary: var(--cpsl-color-background-48);
|
|
111
112
|
--cpsl-color-text-tertiary: var(--cpsl-color-foreground-32);
|
|
112
113
|
--cpsl-color-text-subtle: var(--cpsl-color-background-64);
|
|
113
114
|
--cpsl-color-text-inverted: var(--cpsl-color-foreground-96);
|
|
114
115
|
--cpsl-color-text-disabled: var(--cpsl-color-foreground-48);
|
|
115
116
|
--cpsl-color-text-error: var(--cpsl-color-utility-red);
|
|
117
|
+
--cpsl-color-text-contrast: var(--cpsl-color-contrast);
|
|
116
118
|
--cpsl-color-modal-surface-main: var(--cpsl-color-background-0);
|
|
117
119
|
--cpsl-color-modal-surface-footer: var(--cpsl-color-foreground-96);
|
|
118
120
|
--cpsl-color-modal-border: var(--cpsl-color-background-8);
|
|
@@ -120,7 +122,7 @@ body.backdrop-no-scroll {
|
|
|
120
122
|
--cpsl-color-input-surface-default: var(--cpsl-color-background-4);
|
|
121
123
|
--cpsl-color-input-surface-hover: var(--cpsl-color-background-16);
|
|
122
124
|
--cpsl-color-input-border-placeholder: var(--cpsl-color-background-4);
|
|
123
|
-
--cpsl-color-input-border-active: var(--cpsl-color-foreground-0);
|
|
125
|
+
--cpsl-color-input-border-active: var(--cpsl-color-accent-0, var(--cpsl-color-foreground-0));
|
|
124
126
|
--cpsl-color-input-border-error: var(--cpsl-color-utility-red);
|
|
125
127
|
--cpsl-color-select-surface-disabled: var(--cpsl-color-background-8);
|
|
126
128
|
--cpsl-color-select-surface-default: var(--cpsl-color-background-4);
|
|
@@ -134,10 +136,10 @@ body.backdrop-no-scroll {
|
|
|
134
136
|
--cpsl-color-file-surface-drag: var(--cpsl-color-background-16);
|
|
135
137
|
--cpsl-color-file-border-placeholder: var(--cpsl-color-background-4);
|
|
136
138
|
--cpsl-color-file-border-error: var(--cpsl-color-utility-red);
|
|
137
|
-
--cpsl-color-tile-button-surface-default: var(--cpsl-color-background-
|
|
139
|
+
--cpsl-color-tile-button-surface-default: var(--cpsl-color-background-8);
|
|
138
140
|
--cpsl-color-tile-button-surface-hover: var(--cpsl-color-background-16);
|
|
139
141
|
--cpsl-color-tile-button-surface-pressed: var(--cpsl-color-background-16);
|
|
140
|
-
--cpsl-color-tile-button-border: var(--cpsl-color-background-
|
|
142
|
+
--cpsl-color-tile-button-border: var(--cpsl-color-background-8);
|
|
141
143
|
--cpsl-color-primary-button-text: var(--cpsl-color-text-inverted);
|
|
142
144
|
--cpsl-color-primary-button-surface-default: var(--cpsl-color-foreground-0);
|
|
143
145
|
--cpsl-color-primary-button-surface-hover: var(--cpsl-color-foreground-16);
|
|
@@ -147,13 +149,21 @@ body.backdrop-no-scroll {
|
|
|
147
149
|
--cpsl-color-primary-button-border-disabled: var(--cpsl-color-background-16);
|
|
148
150
|
--cpsl-color-primary-button-outline: var(--cpsl-color-foreground-32);
|
|
149
151
|
--cpsl-color-secondary-button-text: var(--cpsl-color-text-primary);
|
|
150
|
-
--cpsl-color-secondary-button-surface-default:
|
|
152
|
+
--cpsl-color-secondary-button-surface-default: var(--cpsl-color-background-0);
|
|
151
153
|
--cpsl-color-secondary-button-surface-hover: var(--cpsl-color-background-16);
|
|
152
154
|
--cpsl-color-secondary-button-surface-pressed: var(--cpsl-color-background-16);
|
|
153
155
|
--cpsl-color-secondary-button-surface-disabled: var(--cpsl-color-foreground-96);
|
|
154
156
|
--cpsl-color-secondary-button-border-default: var(--cpsl-color-background-32);
|
|
155
157
|
--cpsl-color-secondary-button-border-disabled: var(--cpsl-color-foreground-96);
|
|
156
158
|
--cpsl-color-secondary-button-outline: var(--cpsl-color-background-32);
|
|
159
|
+
--cpsl-color-tertiary-button-text: var(--cpsl-color-background-96);
|
|
160
|
+
--cpsl-color-tertiary-button-surface-default: var(--cpsl-color-background-8);
|
|
161
|
+
--cpsl-color-tertiary-button-surface-hover: var(--cpsl-color-background-16);
|
|
162
|
+
--cpsl-color-tertiary-button-surface-pressed: var(--cpsl-color-background-16);
|
|
163
|
+
--cpsl-color-tertiary-button-surface-disabled: var(--cpsl-color-background-8);
|
|
164
|
+
--cpsl-color-tertiary-button-border-default: var(--cpsl-color-background-8);
|
|
165
|
+
--cpsl-color-tertiary-button-border-disabled: var(--cpsl-color-background-8);
|
|
166
|
+
--cpsl-color-tertiary-button-outline: var(--cpsl-color-background-32);
|
|
157
167
|
--cpsl-color-destructive-button-text: var(--cpsl-color-text-error);
|
|
158
168
|
--cpsl-color-destructive-button-surface-default: transparent;
|
|
159
169
|
--cpsl-color-destructive-button-surface-hover: var(--cpsl-color-utility-red-light);
|
|
@@ -186,8 +196,8 @@ body.backdrop-no-scroll {
|
|
|
186
196
|
--cpsl-color-slideButton-slider-text: var(--cpsl-color-text-inverted);
|
|
187
197
|
--cpsl-color-slideButton-start-text: var(--cpsl-color-text-secondary);
|
|
188
198
|
--cpsl-color-slideButton-end-text: var(--cpsl-color-text-inverted);
|
|
189
|
-
--cpsl-color-tabs-border: var(--cpsl-color-background-
|
|
190
|
-
--cpsl-color-tabs-background: var(--cpsl-color-background-
|
|
199
|
+
--cpsl-color-tabs-border: var(--cpsl-color-background-16);
|
|
200
|
+
--cpsl-color-tabs-background: var(--cpsl-color-background-4);
|
|
191
201
|
--cpsl-color-tabs-slider-background: var(--cpsl-color-background-0);
|
|
192
202
|
--cpsl-color-alert-surface-error: #fee4e2;
|
|
193
203
|
--cpsl-color-alert-border-error: #f97066;
|
|
@@ -208,19 +218,24 @@ body.backdrop-no-scroll {
|
|
|
208
218
|
--cpsl-color-avatar-border: var(--cpsl-color-foreground-96);
|
|
209
219
|
--cpsl-color-card-surface: var(--cpsl-color-background-0);
|
|
210
220
|
--cpsl-color-card-border: var(--cpsl-color-background-16);
|
|
221
|
+
--cpsl-color-iconGroup-surface: var(--cpsl-color-background-0);
|
|
222
|
+
--cpsl-color-iconGroup-border: var(--cpsl-color-background-16);
|
|
223
|
+
--cpsl-color-iconGroup-icon-disabled: var(--cpsl-color-text-disabled);
|
|
224
|
+
--cpsl-color-iconGroup-icon-default: var(--cpsl-color-text-primary);
|
|
211
225
|
--cpsl-border-radius-input: 12px;
|
|
212
226
|
--cpsl-border-radius-select: 12px;
|
|
213
227
|
--cpsl-border-radius-file: 12px;
|
|
214
228
|
--cpsl-border-radius-alert: 12px;
|
|
215
|
-
--cpsl-border-radius-tabs:
|
|
229
|
+
--cpsl-border-radius-tabs: 1000px;
|
|
216
230
|
--cpsl-border-radius-primary-button: 12px;
|
|
217
231
|
--cpsl-border-radius-secondary-button: 12px;
|
|
232
|
+
--cpsl-border-radius-tertiary-button: 12px;
|
|
218
233
|
--cpsl-border-radius-destructive-button: 12px;
|
|
219
234
|
--cpsl-border-radius-tile-button: 12px;
|
|
220
235
|
--cpsl-border-radius-modal: 24px;
|
|
221
236
|
--cpsl-border-radius-pill: 1000px;
|
|
222
|
-
--cpsl-border-radius-qr-code:
|
|
223
|
-
--cpsl-border-radius-info-box:
|
|
237
|
+
--cpsl-border-radius-qr-code: 20px;
|
|
238
|
+
--cpsl-border-radius-info-box: 16px;
|
|
224
239
|
--cpsl-border-radius-table-container: 24px;
|
|
225
240
|
--cpsl-border-radius-switch: 1000px;
|
|
226
241
|
--cpsl-border-radius-checkbox: 4px;
|
package/css/capsule-core.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/themes/capsule.functions.font.scss","../src/themes/capsule.mixins.scss","../src/css/capsule-core.scss","../src/themes/capsule.globals.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC/CA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACZA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAiCF;EAvBE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAUA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAUA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AAeF;EACE;EAEA;EACA;EACA,aCjDiB;;ADmDjB;ED4PE,uBC3PuH;ED4PvH,sBC5PuH;ED6PvH,qBC7PkD;ED8PlD,oBC9PkD;ED4QpD,aC5QmB;ED6QnB,gBC7QqF;EAEnF;EACA;EACA;EACA;EACA;;AAGF;EDkPE,uBCjP0H;EDkP1H,sBClP0H;EDmP1H,qBCnPmD;EDoPnD,oBCpPmD;EDkQrD,aClQmB;EDmQnB,gBCnQuF;EACrF;EACA;EACA;;AAGF;EACE;;AAIA;EACE;EACA","file":"capsule-core.css","sourcesContent":["@use 'sass:math';\n\n$baselineSize: 16px !default;\n$baselineUnit: 1rem !default;\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font($size, $unit: $baselineUnit) {\n @return (math.div($size, $baselineSize)) * $unit;\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) {\n $baseScale: dynamic-font($size, $unit);\n $maxScale: $size * $maxScale;\n\n @return min($baseScale, $maxScale);\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) {\n $baseScale: dynamic-font($size, $unit);\n $minScale: $size * $minScale;\n\n @return max($minScale, $baseScale);\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) {\n $baseScale: dynamic-font($baseSize, $unit);\n $maxScale: $baseSize * $maxScale;\n $minScale: $baseSize * $minScale;\n\n @return clamp($minScale, $baseScale, $maxScale);\n}\n","/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n * :host {\n * background-color: green;\n * }\n * }\n */\n@mixin tablet-viewport() {\n @media screen and (min-width: 768px) {\n @content;\n }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n * :host {\n * background-color: blue;\n * }\n * }\n */\n@mixin mobile-viewport() {\n @media screen and (max-width: 767px) {\n @content;\n }\n}\n\n@mixin input-cover() {\n @include position(0, null, null, 0);\n @include margin(0);\n\n position: absolute;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background: transparent;\n cursor: pointer;\n\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin visually-hidden() {\n position: absolute;\n\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n width: 100%;\n height: 100%;\n\n margin: 0;\n padding: 0;\n\n border: 0;\n outline: 0;\n clip: rect(0 0 0 0);\n\n opacity: 0;\n overflow: hidden;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n@mixin button-state() {\n @include position(0, 0, 0, 0);\n\n position: absolute;\n\n content: '';\n\n opacity: 0;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $max: map-get($breakpoints, $name);\n @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n $rootSplit: str-split($root, ',');\n $selectors: #{add-root-selector($root, '[dir=rtl]')};\n $selectorsSplit: str-split($selectors, ',');\n\n $hostContextSelectors: ();\n $restSelectors: ();\n $dirSelectors: ();\n\n // Selectors must be split into individual selectors in case the browser\n // doesn't support a specific selector.\n // For example, Firefox and Safari doesn't support `:host-context()`.\n // If an invalid selector is used, then the entire group of selectors\n // will be ignored.\n // @link https://www.w3.org/TR/selectors-3/#grouping\n @each $selector in $selectorsSplit {\n // Group the selectors back into a single selector to optimize the output.\n @if str-index($selector, ':host-context') {\n $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n } @else {\n // Group the selectors back into a single selector to optimize the output.\n $restSelectors: append($restSelectors, $selector, comma);\n }\n }\n\n // Supported by Chrome.\n @if length($hostContextSelectors) > 0 {\n @at-root #{$hostContextSelectors} {\n @content;\n }\n }\n\n // Supported by all browsers.\n @if length($restSelectors) > 0 {\n @at-root #{$restSelectors} {\n @content;\n }\n }\n\n // If browser can support `:dir()`, then add the `:dir()` selectors.\n @supports selector(:dir(rtl)) {\n // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n // `:host-context()` is added:\n // - through the `add-root-selector()` function.\n // - first so that it takes precedence over `:dir()`.\n // For example,\n // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n // -- the app direction is changed dynamically. v17+ works fine.\n // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n // Supported by Firefox.\n @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n @content;\n }\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n @if $flip-rtl != true or $viewBox == null {\n @include multi-dir() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n } @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');\n $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');\n $flipped-url: str-replace($flipped-url, '<polygon', '<polygon #{$transform}');\n $flipped-url: url-encode($flipped-url);\n\n @include ltr() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n @include rtl() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n }\n }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n @if $start == 0 and $end == 0 {\n #{$prop}-left: $start;\n #{$prop}-right: $end;\n } @else {\n -webkit-#{$prop}-start: $start;\n #{$prop}-inline-start: $start;\n -webkit-#{$prop}-end: $end;\n #{$prop}-inline-end: $end;\n }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n @include property-horizontal($prop, $start, $end);\n #{$prop}-top: $top;\n #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n @if $start == $end {\n @include multi-dir() {\n left: $start;\n right: $end;\n }\n } @else {\n @at-root {\n @supports (inset-inline-start: 0) {\n & {\n inset-inline-start: $start;\n inset-inline-end: $end;\n }\n }\n }\n\n // TODO FW-3766\n @at-root {\n @supports not (inset-inline-start: 0) {\n & {\n @include ltr() {\n left: $start;\n right: $end;\n }\n @include rtl() {\n left: unset;\n right: unset;\n\n left: $end;\n right: $start;\n }\n }\n }\n }\n }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n @include position-horizontal($start, $end);\n top: $top;\n bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n @include multi-dir() {\n border-radius: $top-start;\n }\n } @else {\n @include ltr() {\n border-top-left-radius: $top-start;\n border-top-right-radius: $top-end;\n border-bottom-right-radius: $bottom-end;\n border-bottom-left-radius: $bottom-start;\n }\n\n @include rtl() {\n border-top-left-radius: $top-end;\n border-top-right-radius: $top-start;\n border-bottom-right-radius: $bottom-start;\n border-bottom-left-radius: $bottom-end;\n }\n }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n $other-dir: null;\n\n @if $dir == ltr {\n $other-dir: rtl;\n } @else {\n $other-dir: ltr;\n }\n\n @include ltr() {\n direction: $dir;\n }\n @include rtl() {\n direction: $other-dir;\n }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n @if $side == start {\n @include ltr() {\n float: left $decorator;\n }\n @include rtl() {\n float: right $decorator;\n }\n } @else if $side == end {\n @include ltr() {\n float: right $decorator;\n }\n @include rtl() {\n float: left $decorator;\n }\n } @else {\n @include multi-dir() {\n float: $side $decorator;\n }\n }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n @if $horizontal == start or $horizontal == end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n @if $horizontal == start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n } @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n }\n @include rtl() {\n background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n }\n } @else {\n @include multi-dir() {\n background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis == start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n @include rtl() {\n transform-origin: right $y-axis;\n }\n } @else if $x-axis == end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n @include rtl() {\n transform-origin: left $y-axis;\n }\n } @else if $x-axis == left or $x-axis == right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n } @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: str-replace($transform, 'translate3d(');\n $transform: str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n } @else {\n @if $extra == null {\n $extra: $transform;\n } @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x == '0' or $x == null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n } @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n","@import '../themes/capsule.globals.scss';\n\n// Capsule Font Family\n// --------------------------------------------------\n\nhtml {\n --cpsl-default-font: 'Helvetica', sans-serif;\n --cpsl-default-dynamic-font: -apple-system-body;\n --cpsl-font-family: var(--cpsl-default-font);\n}\n\ndiv {\n box-sizing: border-box;\n}\n\nbody.backdrop-no-scroll {\n overflow: hidden;\n}\n\n// Capsule Colors\n// --------------------------------------------------\n// Generates the default color vars\n\n@mixin generate-color($color-name) {\n $value: map-get($colors, $color-name);\n\n --cpsl-color-#{$color-name}: #{$value};\n}\n\n// Capsule Border Radii\n// --------------------------------------------------\n// Generates the default border vars\n\n@mixin generate-border-radius($border-radius-name) {\n $value: map-get($borderRadii, $border-radius-name);\n\n --cpsl-border-radius-#{$border-radius-name}: #{$value};\n}\n\n// Capsule Font Sizes\n// --------------------------------------------------\n// Generates the default font sizes\n\n@mixin generate-font-size($font-size-name) {\n $value: map-get($fontSizes, $font-size-name);\n\n --cpsl-font-size-#{$font-size-name}: #{dynamic-font-clamp(0.8, $value, 1.5)};\n}\n\n:root {\n @each $color-name, $value in $colors {\n @include generate-color($color-name);\n }\n @each $border-radius-name, $value in $borderRadii {\n @include generate-border-radius($border-radius-name);\n }\n @each $font-size-name, $value in $fontSizes {\n @include generate-font-size($font-size-name);\n }\n}\n\n.cpsl-table {\n width: 100%;\n\n border-spacing: 0;\n border-collapse: separate;\n font-family: $font-family-base;\n\n & th {\n @include padding(var(--table-header-padding-top), var(--table-header-padding-end), var(--table-header-padding-bottom), var(--table-header-padding-start));\n\n background: var(--table-header-background-color);\n color: var(--cpsl-color-text-primary);\n font-weight: 500;\n font-size: var(--cpsl-font-size-body-xs);\n border-bottom: var(--table-header-border-width) solid var(--table-header-border-color);\n }\n\n & td {\n @include padding(var(--table-content-padding-top), var(--table-content-padding-end), var(--table-content-padding-bottom), var(--table-content-padding-start));\n color: var(--cpsl-color-text-primary);\n font-size: var(--cpsl-font-size-body-s);\n border-bottom: var(--table-content-border-width) solid var(--table-content-border-color);\n }\n\n & tr:last-child td {\n border-bottom: none;\n }\n\n &.sticky-header {\n & thead {\n position: sticky;\n top: 0;\n }\n }\n}\n","// Global Utility Functions\n@import './capsule.functions.string';\n\n// Global Color Functions\n@import './capsule.functions.color';\n\n// Global Font Functions\n@import './capsule.functions.font';\n\n// Global Mixins\n@import './capsule.mixins';\n\n// Default Theme\n@import './capsule.theme.default';\n\n// Default General\n// --------------------------------------------------\n$font-family-base: var(--cpsl-font-family, inherit) !default;\n$font-size-base: var(--cpsl-font-size-base, 16px) !default;\n\n// The minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries\n$screen-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px,\n) !default;\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/themes/capsule.functions.font.scss","../src/themes/capsule.mixins.scss","../src/css/capsule-core.scss","../src/themes/capsule.globals.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AC/CA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACZA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAiCF;EAvBE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAUA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAUA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AAeF;EACE;EAEA;EACA;EACA,aCjDiB;;ADmDjB;ED4PE,uBC3PuH;ED4PvH,sBC5PuH;ED6PvH,qBC7PkD;ED8PlD,oBC9PkD;ED4QpD,aC5QmB;ED6QnB,gBC7QqF;EAEnF;EACA;EACA;EACA;EACA;;AAGF;EDkPE,uBCjP0H;EDkP1H,sBClP0H;EDmP1H,qBCnPmD;EDoPnD,oBCpPmD;EDkQrD,aClQmB;EDmQnB,gBCnQuF;EACrF;EACA;EACA;;AAGF;EACE;;AAIA;EACE;EACA","file":"capsule-core.css","sourcesContent":["@use 'sass:math';\n\n$baselineSize: 16px !default;\n$baselineUnit: 1rem !default;\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font($size, $unit: $baselineUnit) {\n @return (math.div($size, $baselineSize)) * $unit;\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) {\n $baseScale: dynamic-font($size, $unit);\n $maxScale: $size * $maxScale;\n\n @return min($baseScale, $maxScale);\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) {\n $baseScale: dynamic-font($size, $unit);\n $minScale: $size * $minScale;\n\n @return max($minScale, $baseScale);\n}\n\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) {\n $baseScale: dynamic-font($baseSize, $unit);\n $maxScale: $baseSize * $maxScale;\n $minScale: $baseSize * $minScale;\n\n @return clamp($minScale, $baseScale, $maxScale);\n}\n","/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n * :host {\n * background-color: green;\n * }\n * }\n */\n@mixin tablet-viewport() {\n @media screen and (min-width: 768px) {\n @content;\n }\n}\n\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n * :host {\n * background-color: blue;\n * }\n * }\n */\n@mixin mobile-viewport() {\n @media screen and (max-width: 767px) {\n @content;\n }\n}\n\n@mixin input-cover() {\n @include position(0, null, null, 0);\n @include margin(0);\n\n position: absolute;\n\n width: 100%;\n height: 100%;\n\n border: 0;\n background: transparent;\n cursor: pointer;\n\n appearance: none;\n outline: none;\n\n &::-moz-focus-inner {\n border: 0;\n }\n}\n\n@mixin visually-hidden() {\n position: absolute;\n\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n width: 100%;\n height: 100%;\n\n margin: 0;\n padding: 0;\n\n border: 0;\n outline: 0;\n clip: rect(0 0 0 0);\n\n opacity: 0;\n overflow: hidden;\n\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n\n@mixin text-inherit() {\n font-family: inherit;\n font-size: inherit;\n font-style: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n text-decoration: inherit;\n text-indent: inherit;\n text-overflow: inherit;\n text-transform: inherit;\n text-align: inherit;\n white-space: inherit;\n color: inherit;\n}\n\n@mixin button-state() {\n @include position(0, 0, 0, 0);\n\n position: absolute;\n\n content: '';\n\n opacity: 0;\n}\n\n// Get the key from a map based on the index\n@function index-to-key($map, $index) {\n $keys: map-keys($map);\n\n @return nth($keys, $index);\n}\n\n// Breakpoint Mixins\n// ---------------------------------------------------------------------------------\n\n// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$screen-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// ---------------------------------------------------------------------------------\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $screen-breakpoints) {\n $min: map-get($breakpoints, $name);\n\n @return if($name != index-to-key($breakpoints, 1), $min, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $screen-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $screen-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $screen-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Maximum breakpoint width. Null for the smallest (first) breakpoint.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n//\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\t// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\t// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $screen-breakpoints) {\n $max: map-get($breakpoints, $name);\n @return if($max and $max > 0, $max - 0.02, null);\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $screen-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Text Direction - ltr / rtl\n//\n// CSS defaults to use the ltr css, and adds [dir=rtl] selectors\n// to override ltr defaults.\n// ----------------------------------------------------------\n\n@mixin multi-dir() {\n @content;\n\n // $root: #{&};\n // @at-root [dir] {\n // #{$root} {\n // @content;\n // }\n // }\n}\n\n@mixin rtl() {\n $root: #{&};\n\n $rootSplit: str-split($root, ',');\n $selectors: #{add-root-selector($root, '[dir=rtl]')};\n $selectorsSplit: str-split($selectors, ',');\n\n $hostContextSelectors: ();\n $restSelectors: ();\n $dirSelectors: ();\n\n // Selectors must be split into individual selectors in case the browser\n // doesn't support a specific selector.\n // For example, Firefox and Safari doesn't support `:host-context()`.\n // If an invalid selector is used, then the entire group of selectors\n // will be ignored.\n // @link https://www.w3.org/TR/selectors-3/#grouping\n @each $selector in $selectorsSplit {\n // Group the selectors back into a single selector to optimize the output.\n @if str-index($selector, ':host-context') {\n $hostContextSelectors: append($hostContextSelectors, $selector, comma);\n } @else {\n // Group the selectors back into a single selector to optimize the output.\n $restSelectors: append($restSelectors, $selector, comma);\n }\n }\n\n // Supported by Chrome.\n @if length($hostContextSelectors) > 0 {\n @at-root #{$hostContextSelectors} {\n @content;\n }\n }\n\n // Supported by all browsers.\n @if length($restSelectors) > 0 {\n @at-root #{$restSelectors} {\n @content;\n }\n }\n\n // If browser can support `:dir()`, then add the `:dir()` selectors.\n @supports selector(:dir(rtl)) {\n // Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.\n // `:host-context()` is added:\n // - through the `add-root-selector()` function.\n // - first so that it takes precedence over `:dir()`.\n // For example,\n // - Firefox doesn't support `:host-context()`, but does support `:dir()`.\n // - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`\n // @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/\n // -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when\n // -- the app direction is changed dynamically. v17+ works fine.\n // -- @link https://bugs.webkit.org/show_bug.cgi?id=257133\n\n // Supported by Firefox.\n @at-root #{add-root-selector($root, \":dir(rtl)\", false)} {\n @content;\n }\n }\n}\n\n@mixin ltr() {\n @content;\n}\n\n// SVG Background Image Mixin\n// @param {string} $svg\n// ----------------------------------------------------------\n@mixin svg-background-image($svg, $flip-rtl: false) {\n $url: url-encode($svg);\n $viewBox: str-split(str-extract($svg, \"viewBox='\", \"'\"), ' ');\n\n @if $flip-rtl != true or $viewBox == null {\n @include multi-dir() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n } @else {\n $transform: \"transform='translate(#{nth($viewBox, 3)}, 0) scale(-1, 1)'\";\n $flipped-url: $svg;\n $flipped-url: str-replace($flipped-url, '<path', '<path #{$transform}');\n $flipped-url: str-replace($flipped-url, '<line', '<line #{$transform}');\n $flipped-url: str-replace($flipped-url, '<polygon', '<polygon #{$transform}');\n $flipped-url: url-encode($flipped-url);\n\n @include ltr() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$url}');\n }\n @include rtl() {\n background-image: url('data:image/svg+xml;charset=utf-8,#{$flipped-url}');\n }\n }\n}\n\n// Add property horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin property-horizontal($prop, $start, $end: $start) {\n @if $start == 0 and $end == 0 {\n #{$prop}-left: $start;\n #{$prop}-right: $end;\n } @else {\n -webkit-#{$prop}-start: $start;\n #{$prop}-inline-start: $start;\n -webkit-#{$prop}-end: $end;\n #{$prop}-inline-end: $end;\n }\n}\n\n// Add property for all directions\n// @param {string} $prop\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// @param {boolean} $content include content or use default\n// ----------------------------------------------------------\n@mixin property($prop, $top, $end: $top, $bottom: $top, $start: $end) {\n @include property-horizontal($prop, $start, $end);\n #{$prop}-top: $top;\n #{$prop}-bottom: $bottom;\n}\n\n// Add padding horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin padding-horizontal($start, $end: $start) {\n @include property-horizontal(padding, $start, $end);\n}\n\n// Add padding for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin padding($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(padding, $top, $end, $bottom, $start);\n}\n\n// Add margin horizontal\n// @param {string} $start\n// @param {string} $end\n// ----------------------------------------------------------\n@mixin margin-horizontal($start, $end: $start) {\n @include property-horizontal(margin, $start, $end);\n}\n\n// Add margin for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin margin($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(margin, $top, $end, $bottom, $start);\n}\n\n// Add position horizontal\n// @param {string} $start - amount to position start\n// @param {string} $end - amount to left: 0; end\n// ----------------------------------------------------------\n@mixin position-horizontal($start: null, $end: null) {\n @if $start == $end {\n @include multi-dir() {\n left: $start;\n right: $end;\n }\n } @else {\n @at-root {\n @supports (inset-inline-start: 0) {\n & {\n inset-inline-start: $start;\n inset-inline-end: $end;\n }\n }\n }\n\n // TODO FW-3766\n @at-root {\n @supports not (inset-inline-start: 0) {\n & {\n @include ltr() {\n left: $start;\n right: $end;\n }\n @include rtl() {\n left: unset;\n right: unset;\n\n left: $end;\n right: $start;\n }\n }\n }\n }\n }\n}\n\n// Add position for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin position($top: null, $end: null, $bottom: null, $start: null) {\n @include position-horizontal($start, $end);\n top: $top;\n bottom: $bottom;\n}\n\n// Add border for all directions\n// @param {string} $top\n// @param {string} $end\n// @param {string} $bottom\n// @param {string} $start\n// ----------------------------------------------------------\n@mixin border($top, $end: $top, $bottom: $top, $start: $end) {\n @include property(border, $top, $end, $bottom, $start);\n}\n\n// Add border radius for all directions\n// @param {string} $top-start\n// @param {string} $top-end\n// @param {string} $bottom-end\n// @param {string} $bottom-start\n// ----------------------------------------------------------\n@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {\n @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {\n @include multi-dir() {\n border-radius: $top-start;\n }\n } @else {\n @include ltr() {\n border-top-left-radius: $top-start;\n border-top-right-radius: $top-end;\n border-bottom-right-radius: $bottom-end;\n border-bottom-left-radius: $bottom-start;\n }\n\n @include rtl() {\n border-top-left-radius: $top-end;\n border-top-right-radius: $top-start;\n border-bottom-right-radius: $bottom-start;\n border-bottom-left-radius: $bottom-end;\n }\n }\n}\n\n// Add direction for all directions\n// @param {string} $dir - Direction on LTR\n@mixin direction($dir) {\n $other-dir: null;\n\n @if $dir == ltr {\n $other-dir: rtl;\n } @else {\n $other-dir: ltr;\n }\n\n @include ltr() {\n direction: $dir;\n }\n @include rtl() {\n direction: $other-dir;\n }\n}\n\n// Add float for all directions\n// @param {string} $side\n// @param {string} $decorator - !important\n@mixin float($side, $decorator: null) {\n @if $side == start {\n @include ltr() {\n float: left $decorator;\n }\n @include rtl() {\n float: right $decorator;\n }\n } @else if $side == end {\n @include ltr() {\n float: right $decorator;\n }\n @include rtl() {\n float: left $decorator;\n }\n } @else {\n @include multi-dir() {\n float: $side $decorator;\n }\n }\n}\n\n@mixin background-position($horizontal, $horizontal-amount: null, $vertical: null, $vertical-amount: null) {\n @if $horizontal == start or $horizontal == end {\n $horizontal-ltr: null;\n $horizontal-rtl: null;\n @if $horizontal == start {\n $horizontal-ltr: left;\n $horizontal-rtl: right;\n } @else {\n $horizontal-ltr: right;\n $horizontal-rtl: left;\n }\n\n @include ltr() {\n background-position: $horizontal-ltr $horizontal-amount $vertical $vertical-amount;\n }\n @include rtl() {\n background-position: $horizontal-rtl $horizontal-amount $vertical $vertical-amount;\n }\n } @else {\n @include multi-dir() {\n background-position: $horizontal $horizontal-amount $vertical $vertical-amount;\n }\n }\n}\n\n@mixin transform-origin($x-axis, $y-axis: null) {\n @if $x-axis == start {\n @include ltr() {\n transform-origin: left $y-axis;\n }\n @include rtl() {\n transform-origin: right $y-axis;\n }\n } @else if $x-axis == end {\n @include ltr() {\n transform-origin: right $y-axis;\n }\n @include rtl() {\n transform-origin: left $y-axis;\n }\n } @else if $x-axis == left or $x-axis == right {\n @include multi-dir() {\n transform-origin: $x-axis $y-axis;\n }\n } @else {\n @include ltr() {\n transform-origin: $x-axis $y-axis;\n }\n @include rtl() {\n transform-origin: calc(100% - #{$x-axis}) $y-axis;\n }\n }\n}\n\n// Add transform for all directions\n// @param {string} $transforms - comma separated list of transforms\n@mixin transform($transforms...) {\n $extra: null;\n\n $x: null;\n $ltr-translate: null;\n $rtl-translate: null;\n\n @each $transform in $transforms {\n @if (str-index($transform, translate3d)) {\n $transform: str-replace($transform, 'translate3d(');\n $transform: str-replace($transform, ')');\n\n $coordinates: str-split($transform, ',');\n\n $x: nth($coordinates, 1);\n $y: nth($coordinates, 2);\n $z: nth($coordinates, 3);\n\n $ltr-translate: translate3d($x, $y, $z);\n $rtl-translate: translate3d(calc(-1 * #{$x}), $y, $z);\n } @else {\n @if $extra == null {\n $extra: $transform;\n } @else {\n $extra: $extra $transform;\n }\n }\n }\n\n @if $x == '0' or $x == null {\n @include multi-dir() {\n transform: $ltr-translate $extra;\n }\n } @else {\n @include ltr() {\n transform: $ltr-translate $extra;\n }\n\n @include rtl() {\n transform: $rtl-translate $extra;\n }\n }\n}\n","@import '../themes/capsule.globals.scss';\n\n// Capsule Font Family\n// --------------------------------------------------\n\nhtml {\n --cpsl-default-font: 'Helvetica', sans-serif;\n --cpsl-default-dynamic-font: -apple-system-body;\n --cpsl-font-family: var(--cpsl-default-font);\n}\n\ndiv {\n box-sizing: border-box;\n}\n\nbody.backdrop-no-scroll {\n overflow: hidden;\n}\n\n// Capsule Colors\n// --------------------------------------------------\n// Generates the default color vars\n\n@mixin generate-color($color-name) {\n $value: map-get($colors, $color-name);\n\n --cpsl-color-#{$color-name}: #{$value};\n}\n\n// Capsule Border Radii\n// --------------------------------------------------\n// Generates the default border vars\n\n@mixin generate-border-radius($border-radius-name) {\n $value: map-get($borderRadii, $border-radius-name);\n\n --cpsl-border-radius-#{$border-radius-name}: #{$value};\n}\n\n// Capsule Font Sizes\n// --------------------------------------------------\n// Generates the default font sizes\n\n@mixin generate-font-size($font-size-name) {\n $value: map-get($fontSizes, $font-size-name);\n\n --cpsl-font-size-#{$font-size-name}: #{dynamic-font-clamp(0.8, $value, 1.5)};\n}\n\n:root {\n @each $color-name, $value in $colors {\n @include generate-color($color-name);\n }\n @each $border-radius-name, $value in $borderRadii {\n @include generate-border-radius($border-radius-name);\n }\n @each $font-size-name, $value in $fontSizes {\n @include generate-font-size($font-size-name);\n }\n}\n\n.cpsl-table {\n width: 100%;\n\n border-spacing: 0;\n border-collapse: separate;\n font-family: $font-family-base;\n\n & th {\n @include padding(var(--table-header-padding-top), var(--table-header-padding-end), var(--table-header-padding-bottom), var(--table-header-padding-start));\n\n background: var(--table-header-background-color);\n color: var(--cpsl-color-text-primary);\n font-weight: 500;\n font-size: var(--cpsl-font-size-body-xs);\n border-bottom: var(--table-header-border-width) solid var(--table-header-border-color);\n }\n\n & td {\n @include padding(var(--table-content-padding-top), var(--table-content-padding-end), var(--table-content-padding-bottom), var(--table-content-padding-start));\n color: var(--cpsl-color-text-primary);\n font-size: var(--cpsl-font-size-body-s);\n border-bottom: var(--table-content-border-width) solid var(--table-content-border-color);\n }\n\n & tr:last-child td {\n border-bottom: none;\n }\n\n &.sticky-header {\n & thead {\n position: sticky;\n top: 0;\n }\n }\n}\n","// Global Utility Functions\n@import './capsule.functions.string';\n\n// Global Color Functions\n@import './capsule.functions.color';\n\n// Global Font Functions\n@import './capsule.functions.font';\n\n// Global Mixins\n@import './capsule.mixins';\n\n// Default Theme\n@import './capsule.theme.default';\n\n// Default General\n// --------------------------------------------------\n$font-family-base: var(--cpsl-font-family, inherit) !default;\n$font-size-base: var(--cpsl-font-size-base, 16px) !default;\n\n// The minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries\n$screen-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px,\n) !default;\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-fa6b7678.js";export{s as setNonce}from"./p-fa6b7678.js";import{g as l}from"./p-e1255160.js";var r=()=>{const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};r().then((async e=>{await l();return t([["p-
|
|
1
|
+
import{p as e,b as t}from"./p-fa6b7678.js";export{s as setNonce}from"./p-fa6b7678.js";import{g as l}from"./p-e1255160.js";var r=()=>{const t=import.meta.url;const l={};if(t!==""){l.resourcesUrl=new URL(".",t).href}return e(l)};r().then((async e=>{await l();return t([["p-32cdf894",[[1,"cpsl-hero",{height:[2],hideFadeOut:[4,"hide-fade-out"],variant:[513],title:[513],subtitle:[513],withDefaultTheme:[4,"with-default-theme"]}]]],["p-1bd11889",[[1,"cpsl-modal-v2",{enterTransitionDuration:[2,"enter-transition-duration"],exitTransitionDuration:[2,"exit-transition-duration"],elevated:[4],noOverlay:[4,"no-overlay"],open:[4],zIndexOverride:[2,"z-index-override"]},null,{open:["toggleHeight"]}]]],["p-0e558c7f",[[1,"cpsl-animation",{src:[1],replayAnimation:[64]}]]],["p-41bc3c58",[[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"]]]]],["p-de2a16e4",[[1,"cpsl-grid",{fixed:[4]}]]],["p-5d62e610",[[1,"cpsl-identicon",{hash:[1],size:[2]}]]],["p-5965b15e",[[1,"cpsl-info-box"]]],["p-3b042fd1",[[1,"cpsl-row"]]],["p-60508b1e",[[1,"cpsl-pagination",{initialPage:[2,"initial-page"],totalPages:[2,"total-pages"],visiblePages:[1026,"visible-pages"],currentPage:[32]},null,{currentPage:["watchChange"]}],[1,"cpsl-select",{anchorElId:[1,"anchor-el-id"],autoWidth:[4,"auto-width"],disabled:[4],dropdownMaxHeight:[2,"dropdown-max-height"],errorText:[1,"error-text"],formatValue:[16],helperText:[1,"helper-text"],id:[1],label:[1],placeholder:[1],required:[4],selectedValue:[1,"selected-value"],showFormattedSelectedItem:[4,"show-formatted-selected-item"],showOptionalLabel:[4,"show-optional-label"],showSearch:[4,"show-search"],searchPlaceholder:[1,"search-placeholder"],anchorEl:[32],hasFocus:[32],popoverOpen:[32],hasSelectedItem:[32]},[[0,"cpslSelectItemClick","selectItemClickHandler"],[0,"cpslOpen","onPopoverOpen"],[0,"cpslClose","onPopoverClose"]],{selectedValue:["onValueChange","handleValueChange"]}],[1,"cpsl-file-upload",{errorText:[1,"error-text"],externalFilename:[1,"external-filename"],externalSrc:[1,"external-src"],fileTypes:[16],helperText:[1,"helper-text"],label:[1],required:[4],showOptionalLabel:[4,"show-optional-label"],uploadFile:[16],file:[32],dragOver:[32],dragError:[32],isUploading:[32],uploadError:[32]}],[1,"cpsl-auth-modal",{enterTransitionDuration:[2,"enter-transition-duration"],exitTransitionDuration:[2,"exit-transition-duration"],noOverlay:[4,"no-overlay"],open:[4],zIndexOverride:[2,"z-index-override"],hasFooter:[32],isMobile:[32]},null,{open:["toggleModal"]}],[1,"cpsl-alert",{icon:[1],variant:[1]}],[1,"cpsl-checkbox",{checked:[4]}],[1,"cpsl-code-input",{code:[1025],errorText:[1,"error-text"],helperText:[1,"helper-text"],length:[2],type:[1]}],[1,"cpsl-drawer",{anchor:[1],anchorPosition:[2,"anchor-position"],noOverlay:[4,"no-overlay"],open:[4],size:[8],transitionDuration:[2,"transition-duration"],transitionFunction:[1,"transition-function"],variant:[1],zIndexOverride:[2,"z-index-override"],closedAnchorPosition:[32],showTransition:[32]}],[1,"cpsl-icon-group",{expandFrom:[1,"expand-from"],disabled:[4],icons:[16],isHovered:[32]}],[1,"cpsl-slide-button",{disabled:[4],endIcon:[1,"end-icon"],endText:[1,"end-text"],startIcon:[1,"start-icon"],startText:[1,"start-text"]}],[1,"cpsl-table",{hasHorizontalScroll:[32],hasVerticalScroll:[32]}],[1,"cpsl-tile-button",{src:[1],icon:[1]}],[1,"cpsl-app-bar",{height:[2],position:[1],zIndexOverride:[2,"z-index-override"]}],[1,"cpsl-avatar",{alt:[1],src:[1],variant:[1]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{width:[1],hasCpslSearch:[4,"has-cpsl-search"],items:[16],selectedItem:[1040],isOpen:[32],searchQuery:[32],filteredItems:[32]},[[9,"resize","handleResize"]],{selectedItem:["handleSelectedItemChange"],isOpen:["handleOpenChange"]}],[1,"cpsl-nav-button-group",{selectedId:[1,"selected-id"]},null,{selectedId:["selectItem"]}],[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-radio",{checked:[4]}],[1,"cpsl-select-item",{selected:[4],value:[1]}],[1,"cpsl-switch",{checked:[4]}],[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-button",{as:[1],disabled:[516],fullWidth:[4,"full-width"],href:[1],size:[1],target:[1],variant:[513]}],[1,"cpsl-button-group",{selectedId:[1,"selected-id"]},null,{selectedId:["selectItem"]}],[1,"cpsl-input",{autocapitalize:[1],autocomplete:[1],autocorrect:[1],noAutoDisable:[4,"no-auto-disable"],autofocus:[4],disabled:[4],contrastText:[4,"contrast-text"],enterkeyhint:[1],errorText:[1,"error-text"],mask:[1],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],showOptionalLabel:[4,"show-optional-label"],spellcheck:[4],startIconSrc:[1,"start-icon-src"],startIcon:[1,"start-icon"],step:[1],type:[1],value:[1025],hasFocus:[32],maskedInput:[32]},null,{disabled:["handleDisable"],mask:["handleSetupMask"],value:["handleValueChange"]}],[1,"cpsl-popover",{anchorEl:[16],anchorOriginHorizontal:[1,"anchor-origin-horizontal"],anchorOriginVertical:[1,"anchor-origin-vertical"],autoWidth:[4,"auto-width"],disabled:[4],preventBlur:[4,"prevent-blur"],transformOriginHorizontal:[1,"transform-origin-horizontal"],transformOriginVertical:[1,"transform-origin-vertical"],triggerAction:[1,"trigger-action"],trigger:[1],windowPadding:[2,"window-padding"],open:[32],positionX:[32],positionY:[32],closePopover:[64]},null,{trigger:["onTriggerChange"],triggerAction:["onTriggerChange"],preventBlur:["onTriggerChange"],anchorOriginHorizontal:["onAnchorChange"],anchorOriginVertical:["onAnchorChange"],open:["onOpenChange"]}],[1,"cpsl-spinner",{size:[2],speed:[2]}],[1,"cpsl-card"],[1,"cpsl-overlay",{enterTransitionDuration:[2,"enter-transition-duration"],exitTransitionDuration:[2,"exit-transition-duration"],open:[4],zIndexOverride:[2,"z-index-override"]},null,{open:["toggleHeight"]}],[1,"cpsl-text",{color:[1],variant:[1],weight:[1]}],[1,"cpsl-icon",{src:[1],icon:[1]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=capsule.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","height","hideFadeOut","variant","title","subtitle","withDefaultTheme","enterTransitionDuration","exitTransitionDuration","elevated","noOverlay","open","zIndexOverride","src","replayAnimation","offset","offsetXs","offsetSm","offsetMd","offsetLg","offsetXl","pull","pullXs","pullSm","pullMd","pullLg","pullXl","push","pushXs","pushSm","pushMd","pushLg","pushXl","size","sizeXs","sizeSm","sizeMd","sizeLg","sizeXl","fixed","hash","initialPage","totalPages","visiblePages","currentPage","anchorElId","autoWidth","disabled","dropdownMaxHeight","errorText","formatValue","helperText","id","label","placeholder","required","selectedValue","showFormattedSelectedItem","showOptionalLabel","showSearch","searchPlaceholder","anchorEl","hasFocus","popoverOpen","hasSelectedItem","externalFilename","externalSrc","fileTypes","uploadFile","file","dragOver","dragError","isUploading","uploadError","hasFooter","isMobile","icon","checked","code","length","type","anchor","anchorPosition","transitionDuration","transitionFunction","closedAnchorPosition","showTransition","expandFrom","icons","isHovered","endIcon","endText","startIcon","startText","hasHorizontalScroll","hasVerticalScroll","position","alt","width","hasCpslSearch","items","selectedItem","isOpen","searchQuery","filteredItems","selectedId","text","totalSteps","step","imageSrc","selected","value","tab","fullWidth","selectedTab","selectedTabRect","loaded","as","target","autocapitalize","autocomplete","autocorrect","noAutoDisable","autofocus","contrastText","enterkeyhint","mask","inputmode","max","maxlength","min","minlength","multiple","name","pattern","readonly","spellcheck","startIconSrc","maskedInput","anchorOriginHorizontal","anchorOriginVertical","preventBlur","transformOriginHorizontal","transformOriginVertical","triggerAction","trigger","windowPadding","positionX","positionY","closePopover","speed","color","weight"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAc,+BAA8B,CAAAC,OAAS,IAAAC,YAAA,oBAAAC,QAAA,MAAAC,MAAA,MAAAC,SAAA,MAAAC,iBAAA,gEAAAC,wBAAA,gCAAAC,uBAAA,+BAAAC,SAAA,IAAAC,UAAA,iBAAAC,KAAA,IAAAC,eAAA,8BAAAD,KAAA,yDAAAE,IAAA,IAAAC,gBAAA,uCAAAC,OAAA,IAAAC,SAAA,gBAAAC,SAAA,gBAAAC,SAAA,gBAAAC,SAAA,gBAAAC,SAAA,gBAAAC,KAAA,IAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,cAAAC,KAAA,IAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,cAAAC,KAAA,IAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,cAAAC,OAAA,2EAAAC,MAAA,4CAAAC,KAAA,IAAAP,KAAA,kHAAAQ,YAAA,mBAAAC,WAAA,kBAAAC,aAAA,uBAAAC,YAAA,YAAAA,YAAA,oCAAAC,WAAA,mBAAAC,UAAA,iBAAAC,SAAA,IAAAC,kBAAA,0BAAAC,UAAA,iBAAAC,YAAA,KAAAC,WAAA,kBAAAC,GAAA,IAAAC,MAAA,IAAAC,YAAA,IAAAC,SAAA,IAAAC,cAAA,qBAAAC,0BAAA,mCAAAC,kBAAA,0BAAAC,WAAA,kBAAAC,kBAAA,yBAAAC,SAAA,KAAAC,SAAA,KAAAC,YAAA,KAAAC,gBAAA,4HAAAR,cAAA,+DAAAP,UAAA,iBAAAgB,iBAAA,wBAAAC,YAAA,mBAAAC,UAAA,KAAAhB,WAAA,kBAAAE,MAAA,IAAAE,SAAA,IAAAG,kBAAA,0BAAAU,WAAA,KAAAC,KAAA,KAAAC,SAAA,KAAAC,UAAA,KAAAC,YAAA,KAAAC,YAAA,6BAAAlE,wBAAA,gCAAAC,uBAAA,+BAAAE,UAAA,iBAAAC,KAAA,IAAAC,eAAA,uBAAA8D,UAAA,KAAAC,SAAA,YAAAhE,KAAA,mCAAAiE,KAAA,IAAAzE,QAAA,0BAAA0E,QAAA,4BAAAC,KAAA,OAAA7B,UAAA,iBAAAE,WAAA,kBAAA4B,OAAA,IAAAC,KAAA,wBAAAC,OAAA,IAAAC,eAAA,sBAAAxE,UAAA,iBAAAC,KAAA,IAAAsB,KAAA,IAAAkD,mBAAA,0BAAAC,mBAAA,0BAAAjF,QAAA,IAAAS,eAAA,uBAAAyE,qBAAA,KAAAC,eAAA,6BAAAC,WAAA,kBAAAxC,SAAA,IAAAyC,MAAA,KAAAC,UAAA,+BAAA1C,SAAA,IAAA2C,QAAA,eAAAC,QAAA,eAAAC,UAAA,iBAAAC,UAAA,oCAAAC,oBAAA,KAAAC,kBAAA,8BAAAlF,IAAA,IAAA+D,KAAA,yBAAA3E,OAAA,IAAA+F,SAAA,IAAApF,eAAA,2CAAAqF,IAAA,IAAApF,IAAA,IAAAV,QAAA,6CAAA+F,MAAA,IAAAC,cAAA,sBAAAC,MAAA,KAAAC,aAAA,OAAAC,OAAA,KAAAC,YAAA,KAAAC,cAAA,qCAAAH,aAAA,6BAAAC,OAAA,mDAAAG,WAAA,yBAAAA,WAAA,iCAAAC,KAAA,oCAAAC,WAAA,kBAAAC,KAAA,yBAAAtH,IAAA,IAAAuH,SAAA,gBAAA5E,KAAA,uBAAA4C,QAAA,6BAAAiC,SAAA,IAAAC,MAAA,wBAAAlC,QAAA,qBAAAiC,SAAA,IAAAE,IAAA,8FAAAC,UAAA,iBAAAC,YAAA,mBAAAC,gBAAA,KAAAC,OAAA,YAAAH,UAAA,iBAAAC,YAAA,kCAAAG,GAAA,IAAAtE,SAAA,MAAAkE,UAAA,iBAAAvH,KAAA,IAAAuC,KAAA,IAAAqF,OAAA,IAAAnH,QAAA,gCAAAsG,WAAA,yBAAAA,WAAA,kCAAAc,eAAA,IAAAC,aAAA,IAAAC,YAAA,IAAAC,cAAA,sBAAAC,UAAA,IAAA5E,SAAA,IAAA6E,aAAA,oBAAAC,aAAA,IAAA5E,UAAA,iBAAA6E,KAAA,IAAA3E,WAAA,kBAAA4E,UAAA,IAAA1E,MAAA,IAAA2E,IAAA,IAAAC,UAAA,IAAAC,IAAA,IAAAC,UAAA,IAAAC,SAAA,IAAAC,KAAA,IAAAC,QAAA,IAAAhF,YAAA,IAAAiF,SAAA,IAAAhF,SAAA,IAAAG,kBAAA,0BAAA8E,WAAA,IAAAC,aAAA,qBAAA7C,UAAA,iBAAAgB,KAAA,IAAA5B,KAAA,IAAA+B,MAAA,OAAAjD,SAAA,KAAA4E,YAAA,YAAA3F,SAAA,kBAAA+E,KAAA,oBAAAf,MAAA,2CAAAlD,SAAA,KAAA8E,uBAAA,+BAAAC,qBAAA,6BAAA9F,UAAA,iBAAAC,SAAA,IAAA8F,YAAA,mBAAAC,0BAAA,kCAAAC,wBAAA,gCAAAC,cAAA,qBAAAC,QAAA,IAAAC,cAAA,qBAAAvI,KAAA,KAAAwI,UAAA,KAAAC,UAAA,KAAAC,aAAA,YAAAJ,QAAA,oBAAAD,cAAA,oBAAAH,YAAA,oBAAAF,uBAAA,mBAAAC,qBAAA,mBAAAjI,KAAA,sCAAAsB,KAAA,IAAAqH,MAAA,yCAAA/I,wBAAA,gCAAAC,uBAAA,+BAAAG,KAAA,IAAAC,eAAA,8BAAAD,KAAA,mCAAA4I,MAAA,IAAApJ,QAAA,IAAAqJ,OAAA,sBAAA3I,IAAA,IAAA+D,KAAA,SAAA9E,EAAA","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{D as o,C as t,U as r}from"./p-f2393be6.js";function n(o,t,r){return Math.min(Math.max(o,r),t)}class e extends Error{constructor(o){super(`Failed to parse color: "${o}"`)}}var c=e;function s(o){if(typeof o!=="string")throw new c(o);if(o.trim().toLowerCase()==="transparent")return[0,0,0,0];let t=o.trim();t=g.test(o)?a(o):o;const r=_.exec(t);if(r){const o=Array.from(r).slice(1);return[...o.slice(0,3).map((o=>parseInt(i(o,2),16))),parseInt(i(o[3]||"f",2),16)/255]}const e=p.exec(t);if(e){const o=Array.from(e).slice(1);return[...o.slice(0,3).map((o=>parseInt(o,16))),parseInt(o[3]||"ff",16)/255]}const s=f.exec(t);if(s){const o=Array.from(s).slice(1);return[...o.slice(0,3).map((o=>parseInt(o,10))),parseFloat(o[3]||"1")]}const u=b.exec(t);if(u){const[t,r,e,s]=Array.from(u).slice(1).map(parseFloat);if(n(0,100,r)!==r)throw new c(o);if(n(0,100,e)!==e)throw new c(o);return[...h(t,r,e),Number.isNaN(s)?1:s]}throw new c(o)}function u(o){let t=5381;let r=o.length;while(r){t=t*33^o.charCodeAt(--r)}return(t>>>0)%2341}const d=o=>parseInt(o.replace(/_/g,""),36);const l="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce(((o,t)=>{const r=d(t.substring(0,3));const n=d(t.substring(3)).toString(16);let e="";for(let o=0;o<6-n.length;o++){e+="0"}o[r]=`${e}${n}`;return o}),{});function a(o){const t=o.toLowerCase().trim();const r=l[u(t)];if(!r)throw new c(o);return`#${r}`}const i=(o,t)=>Array.from(Array(t)).map((()=>o)).join("");const _=new RegExp(`^#${i("([a-f0-9])",3)}([a-f0-9])?$`,"i");const p=new RegExp(`^#${i("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i");const f=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${i(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i");const b=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;const g=/^[a-z]+$/i;const m=o=>Math.round(o*255);const h=(o,t,r)=>{let n=r/100;if(t===0){return[n,n,n].map(m)}const e=(o%360+360)%360/60;const c=(1-Math.abs(2*n-1))*(t/100);const s=c*(1-Math.abs(e%2-1));let u=0;let d=0;let l=0;if(e>=0&&e<1){u=c;d=s}else if(e>=1&&e<2){u=s;d=c}else if(e>=2&&e<3){d=c;l=s}else if(e>=3&&e<4){d=s;l=c}else if(e>=4&&e<5){u=s;l=c}else if(e>=5&&e<6){u=c;l=s}const a=n-c/2;const i=u+a;const _=d+a;const p=l+a;return[i,_,p].map(m)};function y(o){if(o==="transparent")return 0;function t(o){const t=o/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}const[r,n,e]=s(o);return.2126*t(r)+.7152*t(n)+.0722*t(e)}function k(o,t,r,e){return`rgba(${n(0,255,o).toFixed()}, ${n(0,255,t).toFixed()}, ${n(0,255,r).toFixed()}, ${parseFloat(n(0,1,e).toFixed(3))})`}function z(o,t,r){const n=(o,t)=>t===3?o:o/255;const[e,c,u,d]=s(o).map(n);const[l,a,i,_]=s(t).map(n);const p=_-d;const f=r*2-1;const b=f*p===-1?f:f+p/(1+f*p);const g=(b+1)/2;const m=1-g;const h=(e*m+l*g)*255;const y=(c*m+a*g)*255;const z=(u*m+i*g)*255;const x=_*r+d*(1-r);return k(h,y,z,x)}function x(o){return y(o)>.179}function $(o,t,r){return{r:255*r(o.r/255,t.r/255),g:255*r(o.g/255,t.g/255),b:255*r(o.b/255,t.b/255)}}function w(o,t){return o*t}function j(o,t){return o+t-o*t}function v(o,t){return F(t,o)}function F(o,t){return t<=.5?w(o,2*t):j(o,2*t-1)}function q(o,t,r){return Math.min(Math.max(o||0,t),r)}function M(o){return{r:q(o.r,0,255),g:q(o.g,0,255),b:q(o.b,0,255),a:q(o.a,0,1)}}function C(o){return{r:255*o.r,g:255*o.g,b:255*o.b,a:o.a}}function R(o){return{r:o.r/255,g:o.g/255,b:o.b/255,a:o.a}}function O(o,t){void 0===t&&(t=0);var r=Math.pow(10,t);return{r:Math.round(o.r*r)/r,g:Math.round(o.g*r)/r,b:Math.round(o.b*r)/r,a:o.a}}function S(o,t,r,n,e,c){return(1-t/r)*n+t/r*Math.round((1-o)*e+o*c)}function A(o,t,r,n,e){void 0===e&&(e={unitInput:!1,unitOutput:!1,roundOutput:!0}),e.unitInput&&(o=C(o),t=C(t)),o=M(o);var c=(t=M(t)).a+o.a-t.a*o.a,s=r(o,t,n),u=M({r:S(o.a,t.a,c,o.r,t.r,s.r),g:S(o.a,t.a,c,o.g,t.g,s.g),b:S(o.a,t.a,c,o.b,t.b,s.b),a:c});return u=e.unitOutput?R(u):e.roundOutput?O(u):function(o){return O(o,9)}(u),u}function I(o,t){return A(o,t,$,v)}const X=o=>{const t=(new Option).style;t.color=o;return t.color!==""};const L=o=>o.replace(/([a-z0–9])([A-Z])/g,"$1-$2").toLowerCase();const B=(o,t)=>{let r={};for(const n in t){const e=`${o}-${L(n)}`;if(typeof t[n]==="object"&&t[n]!==null){r=Object.assign(Object.assign({},r),B(e,t[n]))}else{r[e]=t[n]}}return r};const E=o=>B("--cpsl-color",o);const P=o=>B("--cpsl-border-radius",o);const D=(o,t)=>{const r=s(o);const n=s(t);const e=I({r:r[0],g:r[1],b:r[2],a:.1},{r:n[0],g:n[1],b:n[2],a:n[3]});return k(e.r,e.g,e.b,e.a)};const N=({borderRadius:o,customBorderRadii:t})=>{let r,n,e=4;const c=1e3;let s=false;let u=false;switch(o){case"none":{u=true;r=0;n=0;e=0;break}case"xs":{r=2;n=4;e=2;break}case"sm":{r=4;n=8;break}case"md":{r=8;n=16;break}case"xl":{r=16;n=32;break}case"full":{r=24;n=32;s=true;break}default:case"lg":{r=12;n=24;break}}document.documentElement.style.setProperty("--cpsl-border-radius-input",`${s?c:r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-select",`${s?c:r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-file",`${s?c:r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-alert",`${s?c:r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-tabs",`${s?c:r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-primary-button",`${s?c:r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-secondary-button",`${s?c:r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-destructive-button",`${s?c:r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-tile-button",`${r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-qr-code",`${r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-info-box",`${r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-table-container",`${r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-avatar",`${r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-button-group",`${r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-card",`${n}px`);document.documentElement.style.setProperty("--cpsl-border-radius-modal",`${n}px`);document.documentElement.style.setProperty("--cpsl-border-radius-checkbox",`${e}px`);document.documentElement.style.setProperty("--cpsl-border-radius-switch",`${u?0:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-pill",`${u?0:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-radio",`${c}px`);if(t){const o=P(t);Object.entries(o).forEach((([o,t])=>document.documentElement.style.setProperty(o,t)))}};const U={body2XS:"body-2xs",bodyXS:"body-xs",bodyS:"body-s",bodyM:"body-m",bodyL:"body-l",bodyXL:"body-xl",headingXS:"heading-xs",headingS:"heading-s",headingM:"heading-m",headingL:"heading-l",headingXL:"heading-xl",heading2XL:"heading-2xl"};const Z=({font:o,customFontSizes:t})=>{if(o){document.documentElement.style.setProperty("--cpsl-default-font",o)}Object.entries(U).forEach((([o,r])=>{if(t===null||t===void 0?void 0:t[o]){document.documentElement.style.setProperty(`--cpsl-font-size-${r}`,t[o])}else{document.documentElement.style.removeProperty(`--cpsl-font-size-${r}`)}}))};const G=({foregroundColor:n,backgroundColor:e,customPalette:c})=>{if(!n||!X(n)){n=o.foregroundColor}if(!e||!X(e)){e=o.backgroundColor}const s=!x(e);const u={foregroundColors:[],backgroundColors:[],isDarkBackground:s};const d=s?"#FFFFFF":"#000000";const l=s?"#000000":"#FFFFFF";t.forEach((o=>{u.foregroundColors.push(z(n,l,o));u.backgroundColors.push(z(e,d,o))}));document.documentElement.style.setProperty("--cpsl-color-background-0",u.backgroundColors[0]);document.documentElement.style.setProperty("--cpsl-color-background-4",u.backgroundColors[1]);document.documentElement.style.setProperty("--cpsl-color-background-8",u.backgroundColors[2]);document.documentElement.style.setProperty("--cpsl-color-background-16",u.backgroundColors[3]);document.documentElement.style.setProperty("--cpsl-color-background-32",u.backgroundColors[4]);document.documentElement.style.setProperty("--cpsl-color-background-48",u.backgroundColors[5]);document.documentElement.style.setProperty("--cpsl-color-background-64",u.backgroundColors[6]);document.documentElement.style.setProperty("--cpsl-color-background-80",u.backgroundColors[7]);document.documentElement.style.setProperty("--cpsl-color-background-96",u.backgroundColors[8]);document.documentElement.style.setProperty("--cpsl-color-foreground-0",u.foregroundColors[0]);document.documentElement.style.setProperty("--cpsl-color-foreground-4",u.foregroundColors[1]);document.documentElement.style.setProperty("--cpsl-color-foreground-8",u.foregroundColors[2]);document.documentElement.style.setProperty("--cpsl-color-foreground-16",u.foregroundColors[3]);document.documentElement.style.setProperty("--cpsl-color-foreground-32",u.foregroundColors[4]);document.documentElement.style.setProperty("--cpsl-color-foreground-48",u.foregroundColors[5]);document.documentElement.style.setProperty("--cpsl-color-foreground-64",u.foregroundColors[6]);document.documentElement.style.setProperty("--cpsl-color-foreground-80",u.foregroundColors[7]);document.documentElement.style.setProperty("--cpsl-color-foreground-96",u.foregroundColors[8]);const a="#FFFFFF";const i=.72;const _=D(n,r.red);const p=D(n,r.yellow);const f=D(n,r.green);document.documentElement.style.setProperty("--cpsl-color-utility-red",_);document.documentElement.style.setProperty("--cpsl-color-utility-yellow",p);document.documentElement.style.setProperty("--cpsl-color-utility-green",f);document.documentElement.style.setProperty("--cpsl-color-utility-red-light",z(_,a,i));document.documentElement.style.setProperty("--cpsl-color-utility-yellow-light",z(p,a,i));document.documentElement.style.setProperty("--cpsl-color-utility-green-light",z(f,a,i));if(c){const o=E(c);Object.entries(o).forEach((([o,t])=>document.documentElement.style.setProperty(o,t)))}return u};const H=({foregroundColor:t=o.foregroundColor,backgroundColor:r=o.backgroundColor,font:n,customPalette:e,borderRadius:c,customFontSizes:s,customBorderRadii:u})=>{const d=G({foregroundColor:t,backgroundColor:r,customPalette:e});Z({font:n,customFontSizes:s});N({borderRadius:c,customBorderRadii:u});return d.isDarkBackground};export{H as generateTheme};
|
|
1
|
+
import{D as o,C as t,U as c}from"./p-f2393be6.js";function n(o,t,c){return Math.min(Math.max(o,c),t)}class r extends Error{constructor(o){super(`Failed to parse color: "${o}"`)}}var e=r;function s(o){if(typeof o!=="string")throw new e(o);if(o.trim().toLowerCase()==="transparent")return[0,0,0,0];let t=o.trim();t=m.test(o)?a(o):o;const c=p.exec(t);if(c){const o=Array.from(c).slice(1);return[...o.slice(0,3).map((o=>parseInt(i(o,2),16))),parseInt(i(o[3]||"f",2),16)/255]}const r=_.exec(t);if(r){const o=Array.from(r).slice(1);return[...o.slice(0,3).map((o=>parseInt(o,16))),parseInt(o[3]||"ff",16)/255]}const s=f.exec(t);if(s){const o=Array.from(s).slice(1);return[...o.slice(0,3).map((o=>parseInt(o,10))),parseFloat(o[3]||"1")]}const u=b.exec(t);if(u){const[t,c,r,s]=Array.from(u).slice(1).map(parseFloat);if(n(0,100,c)!==c)throw new e(o);if(n(0,100,r)!==r)throw new e(o);return[...h(t,c,r),Number.isNaN(s)?1:s]}throw new e(o)}function u(o){let t=5381;let c=o.length;while(c){t=t*33^o.charCodeAt(--c)}return(t>>>0)%2341}const d=o=>parseInt(o.replace(/_/g,""),36);const l="1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm".split(" ").reduce(((o,t)=>{const c=d(t.substring(0,3));const n=d(t.substring(3)).toString(16);let r="";for(let o=0;o<6-n.length;o++){r+="0"}o[c]=`${r}${n}`;return o}),{});function a(o){const t=o.toLowerCase().trim();const c=l[u(t)];if(!c)throw new e(o);return`#${c}`}const i=(o,t)=>Array.from(Array(t)).map((()=>o)).join("");const p=new RegExp(`^#${i("([a-f0-9])",3)}([a-f0-9])?$`,"i");const _=new RegExp(`^#${i("([a-f0-9]{2})",3)}([a-f0-9]{2})?$`,"i");const f=new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${i(",\\s*(\\d+)\\s*",2)}(?:,\\s*([\\d.]+))?\\s*\\)$`,"i");const b=/^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;const m=/^[a-z]+$/i;const g=o=>Math.round(o*255);const h=(o,t,c)=>{let n=c/100;if(t===0){return[n,n,n].map(g)}const r=(o%360+360)%360/60;const e=(1-Math.abs(2*n-1))*(t/100);const s=e*(1-Math.abs(r%2-1));let u=0;let d=0;let l=0;if(r>=0&&r<1){u=e;d=s}else if(r>=1&&r<2){u=s;d=e}else if(r>=2&&r<3){d=e;l=s}else if(r>=3&&r<4){d=s;l=e}else if(r>=4&&r<5){u=s;l=e}else if(r>=5&&r<6){u=e;l=s}const a=n-e/2;const i=u+a;const p=d+a;const _=l+a;return[i,p,_].map(g)};function k(o){if(o==="transparent")return 0;function t(o){const t=o/255;return t<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}const[c,n,r]=s(o);return.2126*t(c)+.7152*t(n)+.0722*t(r)}function y(o,t,c,r){return`rgba(${n(0,255,o).toFixed()}, ${n(0,255,t).toFixed()}, ${n(0,255,c).toFixed()}, ${parseFloat(n(0,1,r).toFixed(3))})`}function z(o,t,c){const n=(o,t)=>t===3?o:o/255;const[r,e,u,d]=s(o).map(n);const[l,a,i,p]=s(t).map(n);const _=p-d;const f=c*2-1;const b=f*_===-1?f:f+_/(1+f*_);const m=(b+1)/2;const g=1-m;const h=(r*g+l*m)*255;const k=(e*g+a*m)*255;const z=(u*g+i*m)*255;const x=p*c+d*(1-c);return y(h,k,z,x)}function x(o){return k(o)>.179}function $(o,t,c){return{r:255*c(o.r/255,t.r/255),g:255*c(o.g/255,t.g/255),b:255*c(o.b/255,t.b/255)}}function w(o,t){return o*t}function F(o,t){return o+t-o*t}function j(o,t){return v(t,o)}function v(o,t){return t<=.5?w(o,2*t):F(o,2*t-1)}function q(o,t,c){return Math.min(Math.max(o||0,t),c)}function C(o){return{r:q(o.r,0,255),g:q(o.g,0,255),b:q(o.b,0,255),a:q(o.a,0,1)}}function M(o){return{r:255*o.r,g:255*o.g,b:255*o.b,a:o.a}}function R(o){return{r:o.r/255,g:o.g/255,b:o.b/255,a:o.a}}function A(o,t){void 0===t&&(t=0);var c=Math.pow(10,t);return{r:Math.round(o.r*c)/c,g:Math.round(o.g*c)/c,b:Math.round(o.b*c)/c,a:o.a}}function O(o,t,c,n,r,e){return(1-t/c)*n+t/c*Math.round((1-o)*r+o*e)}function S(o,t,c,n,r){void 0===r&&(r={unitInput:!1,unitOutput:!1,roundOutput:!0}),r.unitInput&&(o=M(o),t=M(t)),o=C(o);var e=(t=C(t)).a+o.a-t.a*o.a,s=c(o,t,n),u=C({r:O(o.a,t.a,e,o.r,t.r,s.r),g:O(o.a,t.a,e,o.g,t.g,s.g),b:O(o.a,t.a,e,o.b,t.b,s.b),a:e});return u=r.unitOutput?R(u):r.roundOutput?A(u):function(o){return A(o,9)}(u),u}function I(o,t){return S(o,t,$,j)}const B=o=>{const t=(new Option).style;t.color=o;return t.color!==""};const X=o=>o.replace(/([a-z0–9])([A-Z])/g,"$1-$2").toLowerCase();const L=(o,t)=>{let c={};for(const n in t){const r=`${o}-${X(n)}`;if(typeof t[n]==="object"&&t[n]!==null){c=Object.assign(Object.assign({},c),L(r,t[n]))}else{c[r]=t[n]}}return c};const E=o=>L("--cpsl-color",o);const D=o=>L("--cpsl-border-radius",o);const P=(o,t)=>{const c=s(o);const n=s(t);const r=I({r:c[0],g:c[1],b:c[2],a:.1},{r:n[0],g:n[1],b:n[2],a:n[3]});return y(r.r,r.g,r.b,r.a)};const T=({borderRadius:o,customBorderRadii:t})=>{let c,n,r=4;const e=1e3;let s=false;let u=false;switch(o){case"none":{u=true;c=0;n=0;r=0;break}case"xs":{c=2;n=4;r=2;break}case"sm":{c=4;n=8;break}case"md":{c=8;n=16;break}case"xl":{c=16;n=32;break}case"full":{c=24;n=32;s=true;break}default:case"lg":{c=12;n=24;break}}document.documentElement.style.setProperty("--cpsl-border-radius-input",`${s?e:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-select",`${s?e:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-file",`${s?e:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-alert",`${s?e:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-tabs",`${u?0:e}px`);document.documentElement.style.setProperty("--cpsl-border-radius-primary-button",`${s?e:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-secondary-button",`${s?e:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-tertiary-button",`${s?e:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-destructive-button",`${s?e:c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-tile-button",`${c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-qr-code",`${n}px`);document.documentElement.style.setProperty("--cpsl-border-radius-info-box",`${c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-table-container",`${c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-avatar",`${c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-button-group",`${c}px`);document.documentElement.style.setProperty("--cpsl-border-radius-card",`${n}px`);document.documentElement.style.setProperty("--cpsl-border-radius-modal",`${n}px`);document.documentElement.style.setProperty("--cpsl-border-radius-checkbox",`${r}px`);document.documentElement.style.setProperty("--cpsl-border-radius-switch",`${u?0:e}px`);document.documentElement.style.setProperty("--cpsl-border-radius-pill",`${u?0:e}px`);document.documentElement.style.setProperty("--cpsl-border-radius-radio",`${e}px`);if(t){const o=D(t);Object.entries(o).forEach((([o,t])=>document.documentElement.style.setProperty(o,t)))}};const N={body2XS:"body-2xs",bodyXS:"body-xs",bodyS:"body-s",bodyM:"body-m",bodyL:"body-l",bodyXL:"body-xl",headingXS:"heading-xs",headingS:"heading-s",headingM:"heading-m",headingL:"heading-l",headingXL:"heading-xl",heading2XL:"heading-2xl"};const U=({font:o,customFontSizes:t})=>{if(o){document.documentElement.style.setProperty("--cpsl-default-font",o)}Object.entries(N).forEach((([o,c])=>{if(t===null||t===void 0?void 0:t[o]){document.documentElement.style.setProperty(`--cpsl-font-size-${c}`,t[o])}else{document.documentElement.style.removeProperty(`--cpsl-font-size-${c}`)}}))};const Z=({foregroundColor:n,backgroundColor:r,accentColor:e,isDarkTheme:s,customPalette:u})=>{if(!n||!B(n)){n=o.foregroundColor}if(!r||!B(r)){r=o.backgroundColor}if(!Boolean(e)||!B(e)){e=n}const d=Boolean(e)?!x(e):false;const l={foregroundColors:[],backgroundColors:[],accentColors:[]};const a=s?"#FFFFFF":"#000000";const i=s?"#000000":"#FFFFFF";const p=d?"#FFFFFF":"#000000";t.forEach((o=>{l.foregroundColors.push(z(n,i,o));l.backgroundColors.push(z(r,a,o));l.accentColors.push(z(e,p,o))}));document.documentElement.style.setProperty("--cpsl-color-background-0",l.backgroundColors[0]);document.documentElement.style.setProperty("--cpsl-color-background-4",l.backgroundColors[1]);document.documentElement.style.setProperty("--cpsl-color-background-8",l.backgroundColors[2]);document.documentElement.style.setProperty("--cpsl-color-background-16",l.backgroundColors[3]);document.documentElement.style.setProperty("--cpsl-color-background-32",l.backgroundColors[4]);document.documentElement.style.setProperty("--cpsl-color-background-48",l.backgroundColors[5]);document.documentElement.style.setProperty("--cpsl-color-background-64",l.backgroundColors[6]);document.documentElement.style.setProperty("--cpsl-color-background-80",l.backgroundColors[7]);document.documentElement.style.setProperty("--cpsl-color-background-96",l.backgroundColors[8]);document.documentElement.style.setProperty("--cpsl-color-foreground-0",l.foregroundColors[0]);document.documentElement.style.setProperty("--cpsl-color-foreground-4",l.foregroundColors[1]);document.documentElement.style.setProperty("--cpsl-color-foreground-8",l.foregroundColors[2]);document.documentElement.style.setProperty("--cpsl-color-foreground-16",l.foregroundColors[3]);document.documentElement.style.setProperty("--cpsl-color-foreground-32",l.foregroundColors[4]);document.documentElement.style.setProperty("--cpsl-color-foreground-48",l.foregroundColors[5]);document.documentElement.style.setProperty("--cpsl-color-foreground-64",l.foregroundColors[6]);document.documentElement.style.setProperty("--cpsl-color-foreground-80",l.foregroundColors[7]);document.documentElement.style.setProperty("--cpsl-color-foreground-96",l.foregroundColors[8]);document.documentElement.style.setProperty("--cpsl-color-accent-0",l.accentColors[0]);document.documentElement.style.setProperty("--cpsl-color-accent-4",l.accentColors[1]);document.documentElement.style.setProperty("--cpsl-color-accent-8",l.accentColors[2]);document.documentElement.style.setProperty("--cpsl-color-accent-16",l.accentColors[3]);document.documentElement.style.setProperty("--cpsl-color-accent-32",l.accentColors[4]);document.documentElement.style.setProperty("--cpsl-color-accent-48",l.accentColors[5]);document.documentElement.style.setProperty("--cpsl-color-accent-64",l.accentColors[6]);document.documentElement.style.setProperty("--cpsl-color-accent-80",l.accentColors[7]);document.documentElement.style.setProperty("--cpsl-color-accent-96",l.accentColors[8]);document.documentElement.style.setProperty("--cpsl-color-contrast",s?"#FFFFFF":"#000000");const _="#FFFFFF";const f=.72;const b=P(n,c.red);const m=P(n,c.yellow);const g=P(n,c.green);document.documentElement.style.setProperty("--cpsl-color-utility-red",b);document.documentElement.style.setProperty("--cpsl-color-utility-yellow",m);document.documentElement.style.setProperty("--cpsl-color-utility-green",g);document.documentElement.style.setProperty("--cpsl-color-utility-red-light",z(b,_,f));document.documentElement.style.setProperty("--cpsl-color-utility-yellow-light",z(m,_,f));document.documentElement.style.setProperty("--cpsl-color-utility-green-light",z(g,_,f));if(u){const o=E(u);Object.entries(o).forEach((([o,t])=>document.documentElement.style.setProperty(o,t)))}};const G=({foregroundColor:t=o.foregroundColor,backgroundColor:c=o.backgroundColor,accentColor:n,darkForegroundColor:r,darkBackgroundColor:e,darkAccentColor:s,mode:u="light",font:d,customPalette:l,borderRadius:a,customFontSizes:i,customBorderRadii:p})=>{const _=u==="dark";Z({foregroundColor:_?r!==null&&r!==void 0?r:t:t,backgroundColor:_?e!==null&&e!==void 0?e:c:c,accentColor:_?s!==null&&s!==void 0?s:n:n,customPalette:l,isDarkTheme:_});U({font:d,customFontSizes:i});T({borderRadius:a,customBorderRadii:p})};export{G as generateTheme};
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|