@rebilly/instruments 3.12.3-beta.0 → 3.13.2-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/README.md +1 -1
  2. package/dist/index.js +43 -66
  3. package/dist/index.min.js +43 -66
  4. package/package.json +3 -6
  5. package/src/functions/destroy.js +8 -2
  6. package/src/functions/mount/fetch-data.js +9 -2
  7. package/src/functions/mount/index.js +15 -10
  8. package/src/functions/mount/mount.spec.js +10 -11
  9. package/src/functions/mount/setup-framepay-theme.js +30 -72
  10. package/src/functions/mount/setup-options.js +2 -2
  11. package/src/functions/mount/{setup-styles.js → setup-styles-vars.js} +9 -7
  12. package/src/functions/purchase.js +2 -5
  13. package/src/functions/setup.js +3 -6
  14. package/src/functions/show.js +2 -2
  15. package/src/functions/show.spec.js +4 -4
  16. package/src/functions/update.spec.js +4 -3
  17. package/src/instance.js +4 -1
  18. package/src/loader/index.js +57 -33
  19. package/src/storefront/index.js +2 -5
  20. package/src/storefront/payment-instruments.js +7 -0
  21. package/src/style/base/__snapshots__/theme.spec.js.snap +136 -220
  22. package/src/style/base/default-theme.js +187 -14
  23. package/src/style/base/index.js +487 -79
  24. package/src/style/base/theme.js +3 -4
  25. package/src/style/base/theme.spec.js +2 -3
  26. package/src/style/index.js +4 -24
  27. package/src/style/utils/color-values.js +1 -1
  28. package/src/style/utils/minifyCss.js +14 -0
  29. package/src/views/common/iframe/base-iframe.js +3 -2
  30. package/src/views/common/iframe/event-listeners.js +12 -9
  31. package/src/views/common/iframe/method-iframe.js +3 -1
  32. package/src/views/common/iframe/modal-iframe.js +4 -2
  33. package/src/views/common/iframe/view-iframe.js +3 -1
  34. package/src/views/confirmation.js +12 -7
  35. package/src/views/errors.js +95 -0
  36. package/src/views/method-selector/express-methods.js +51 -0
  37. package/src/views/method-selector/generate-framepay-config.js +54 -0
  38. package/src/views/method-selector/generate-framepay-config.spec.js +195 -0
  39. package/src/views/method-selector/get-payment-methods.js +0 -1
  40. package/src/views/method-selector/index.js +45 -58
  41. package/src/views/method-selector/method-selector.spec.js +1 -1
  42. package/src/views/method-selector/mount-express-methods.js +66 -26
  43. package/src/views/modal.js +1 -1
  44. package/src/views/result.js +3 -3
  45. package/src/views/summary.js +24 -190
  46. package/tests/mocks/storefront-api-mock.js +48 -27
  47. package/src/style/browserslist.js +0 -1
  48. package/src/style/components/accordion.js +0 -140
  49. package/src/style/components/address.js +0 -55
  50. package/src/style/components/button.js +0 -117
  51. package/src/style/components/divider.js +0 -39
  52. package/src/style/components/forms/checkbox.js +0 -75
  53. package/src/style/components/forms/field.js +0 -56
  54. package/src/style/components/forms/form.js +0 -18
  55. package/src/style/components/forms/input.js +0 -77
  56. package/src/style/components/forms/label.js +0 -55
  57. package/src/style/components/forms/radio.js +0 -80
  58. package/src/style/components/forms/select.js +0 -86
  59. package/src/style/components/forms/validation.js +0 -72
  60. package/src/style/components/icons.js +0 -13
  61. package/src/style/components/index.js +0 -39
  62. package/src/style/components/loader.js +0 -41
  63. package/src/style/components/methods.js +0 -97
  64. package/src/style/components/overlay.js +0 -24
  65. package/src/style/helpers/index.js +0 -54
  66. package/src/style/payment-instruments/content.js +0 -8
  67. package/src/style/payment-instruments/index.js +0 -14
  68. package/src/style/payment-instruments/payment-card.js +0 -27
  69. package/src/style/payment-instruments/payment-instrument-list.js +0 -44
  70. package/src/style/payment-instruments/payment-instrument.js +0 -55
  71. package/src/style/utils/remove-empty-null.js +0 -10
  72. package/src/style/vendor/framepay.js +0 -28
  73. package/src/style/vendor/postmate.js +0 -18
  74. package/src/style/views/confirmation.js +0 -26
  75. package/src/style/views/index.js +0 -16
  76. package/src/style/views/method-selector.js +0 -11
  77. package/src/style/views/modal.js +0 -91
  78. package/src/style/views/result.js +0 -52
  79. package/src/style/views/summary.js +0 -118
  80. package/src/views/__snapshots__/summary.spec.js.snap +0 -246
  81. package/src/views/method-selector/express-methods/apple-pay.js +0 -92
  82. package/src/views/method-selector/express-methods/index.js +0 -25
  83. package/src/views/method-selector/mount-methods.js +0 -178
  84. package/src/views/summary.spec.js +0 -145
package/src/storefront/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import RebillyApi, {RebillyStorefrontAPI, RebillyExperimentalAPI} from 'rebilly-js-sdk';
2
+ import { showError } from '../views/errors';
2
3
 
3
4
  export function validateStateForStorefront({state}) {
4
5
  if (!state.storefront) {
@@ -19,11 +20,7 @@ export async function Endpoint({
19
20
  validateStateForStorefront({state});
20
21
  return await callback();
21
22
  } catch(error) {
22
- // TODO: standard error handling for all endpoints
23
- // console.error(error);
24
- if(error.status === 422) {
25
- error.details.forEach(e => console.error(e));
26
- }
23
+ showError(error);
27
24
  throw error;
28
25
  }
29
26
  }
package/src/storefront/payment-instruments.js CHANGED
@@ -32,3 +32,10 @@ export async function setupPaymentInstrument({ data, state }) {
32
32
  return {instrument, transaction};
33
33
  });
34
34
  }
35
+
36
+ export async function fetchPaymentInstrument({ state }) {
37
+ return Endpoint({state}, async () => {
38
+ const { items: instruments } = await state.storefront.paymentInstruments.getAll();
39
+ return instruments.map(({fields}) => fields);
40
+ });
41
+ }
package/src/style/base/__snapshots__/theme.spec.js.snap CHANGED
@@ -2,226 +2,142 @@
2
2
 
3
3
  exports[`RebillyInstruments theme builds the theme object 1`] = `
4
4
  Object {
5
- "borderRadius": "4px",
6
- "buttonActiveBorder": "var(--rebilly-buttonHoverBorder)",
7
- "buttonActiveBorderRadius": "var(--rebilly-buttonHoverBorderRadius)",
8
- "buttonActiveBoxShadow": "var(--rebilly-buttonHoverBoxShadow)",
9
- "buttonActiveColorBackground": "var(--rebilly-buttonHoverColorBackground)",
10
- "buttonActiveColorText": "var(--rebilly-buttonHoverColorText)",
11
- "buttonActiveFontFamily": "var(--rebilly-buttonHoverFontFamily)",
12
- "buttonActiveFontLineHeight": "var(--rebilly-buttonHoverFontLineHeight)",
13
- "buttonActiveFontSize": "var(--rebilly-buttonHoverFontSize)",
14
- "buttonActiveFontWeight": "var(--rebilly-buttonHoverFontWeight)",
15
- "buttonBorder": "1px solid transparent",
16
- "buttonBorderRadius": "var(--rebilly-borderRadius)",
17
- "buttonBoxShadow": "none",
18
- "buttonColorBackground": "var(--rebilly-colorPrimary)",
19
- "buttonColorText": "#FFFFFF",
20
- "buttonFontFamily": "var(--rebilly-fontFamily)",
21
- "buttonFontLineHeight": "1.5",
22
- "buttonFontSize": "var(--rebilly-fontSizeBase)",
23
- "buttonFontWeight": "var(--rebilly-fontWeightBase)",
24
- "buttonHoverBorder": "1px solid #0036aa",
25
- "buttonHoverBorderRadius": "var(--rebilly-buttonBorderRadius)",
26
- "buttonHoverBoxShadow": "var(--rebilly-buttonBoxShadow)",
27
- "buttonHoverColorBackground": "#0036aa",
28
- "buttonHoverColorText": "var(--rebilly-buttonColorText)",
29
- "buttonHoverFontFamily": "var(--rebilly-buttonFontFamily)",
30
- "buttonHoverFontLineHeight": "var(--rebilly-buttonFontLineHeight)",
31
- "buttonHoverFontSize": "var(--rebilly-buttonFontSize)",
32
- "buttonHoverFontWeight": "var(--rebilly-buttonFontWeight)",
33
- "colorBackground": "#FFFFFF",
34
- "colorDanger": "#CD5C5C",
35
- "colorMutedBorder": "rgba(13, 43, 62, 0.25)",
36
- "colorMutedText": "rgba(13, 43, 62, 0.6)",
37
- "colorPrimary": "#0044D4",
38
- "colorText": "#0D2B3E",
39
5
  "cssVars": "--rebilly-colorPrimary: #0044D4;
40
- --rebilly-colorBackground: #FFFFFF;
41
- --rebilly-colorText: #0D2B3E;
42
- --rebilly-colorMutedText: rgba(13, 43, 62, 0.6);
43
- --rebilly-colorMutedBorder: rgba(13, 43, 62, 0.25);
44
- --rebilly-colorDanger: #CD5C5C;
45
- --rebilly-fontFamily: Avenir, Helvetica, Arial, sans-serif;
46
- --rebilly-fontSizeBase: 16px;
47
- --rebilly-fontWeightBase: 400;
48
- --rebilly-fontLineHeightBase: initial;
49
- --rebilly-fontSmooth: auto;
50
- --rebilly-borderRadius: 4px;
51
- --rebilly-headingFontFamily: var(--rebilly-fontFamily);
52
- --rebilly-headingFontWeight: 500;
53
- --rebilly-headingColorText: var(--rebilly-colorText);
54
- --rebilly-buttonColorBackground: var(--rebilly-colorPrimary);
55
- --rebilly-buttonColorText: #FFFFFF;
56
- --rebilly-buttonFontFamily: var(--rebilly-fontFamily);
57
- --rebilly-buttonFontSize: var(--rebilly-fontSizeBase);
58
- --rebilly-buttonFontLineHeight: 1.5;
59
- --rebilly-buttonFontWeight: var(--rebilly-fontWeightBase);
60
- --rebilly-buttonBorder: 1px solid transparent;
61
- --rebilly-buttonBorderRadius: var(--rebilly-borderRadius);
62
- --rebilly-buttonBoxShadow: none;
63
- --rebilly-buttonHoverColorBackground: #0036aa;
64
- --rebilly-buttonHoverColorText: var(--rebilly-buttonColorText);
65
- --rebilly-buttonHoverFontFamily: var(--rebilly-buttonFontFamily);
66
- --rebilly-buttonHoverFontSize: var(--rebilly-buttonFontSize);
67
- --rebilly-buttonHoverFontLineHeight: var(--rebilly-buttonFontLineHeight);
68
- --rebilly-buttonHoverFontWeight: var(--rebilly-buttonFontWeight);
69
- --rebilly-buttonHoverBorder: 1px solid #0036aa;
70
- --rebilly-buttonHoverBorderRadius: var(--rebilly-buttonBorderRadius);
71
- --rebilly-buttonHoverBoxShadow: var(--rebilly-buttonBoxShadow);
72
- --rebilly-buttonActiveColorBackground: var(--rebilly-buttonHoverColorBackground);
73
- --rebilly-buttonActiveColorText: var(--rebilly-buttonHoverColorText);
74
- --rebilly-buttonActiveFontFamily: var(--rebilly-buttonHoverFontFamily);
75
- --rebilly-buttonActiveFontSize: var(--rebilly-buttonHoverFontSize);
76
- --rebilly-buttonActiveFontLineHeight: var(--rebilly-buttonHoverFontLineHeight);
77
- --rebilly-buttonActiveFontWeight: var(--rebilly-buttonHoverFontWeight);
78
- --rebilly-buttonActiveBorder: var(--rebilly-buttonHoverBorder);
79
- --rebilly-buttonActiveBorderRadius: var(--rebilly-buttonHoverBorderRadius);
80
- --rebilly-buttonActiveBoxShadow: var(--rebilly-buttonHoverBoxShadow);
81
- --rebilly-inputColorBackground: transparent;
82
- --rebilly-inputColorText: var(--rebilly-colorText);
83
- --rebilly-inputFontFamily: var(--rebilly-fontFamily);
84
- --rebilly-inputFontSize: var(--rebilly-fontSizeBase);
85
- --rebilly-inputFontLineHeight: 1.5;
86
- --rebilly-inputFontWeight: var(--rebilly-fontWeightBase);
87
- --rebilly-inputBorder: 1px solid rgba(13, 43, 62, 0.25);
88
- --rebilly-inputBorderRadius: var(--rebilly-borderRadius);
89
- --rebilly-inputBoxShadow: none;
90
- --rebilly-inputHoverColorBackground: var(--rebilly-inputColorBackground);
91
- --rebilly-inputHoverColorText: var(--rebilly-inputColorText);
92
- --rebilly-inputHoverFontFamily: var(--rebilly-inputFontFamily);
93
- --rebilly-inputHoverFontSize: var(--rebilly-inputFontSize);
94
- --rebilly-inputHoverFontLineHeight: var(--rebilly-inputFontLineHeight);
95
- --rebilly-inputHoverFontWeight: var(--rebilly-inputFontWeight);
96
- --rebilly-inputHoverBorder: var(--rebilly-inputBorder);
97
- --rebilly-inputHoverBorderRadius: var(--rebilly-inputBorderRadius);
98
- --rebilly-inputHoverBoxShadow: var(--rebilly-inputBoxShadow);
99
- --rebilly-inputFocusColorBackground: var(--rebilly-inputHoverColorBackground);
100
- --rebilly-inputFocusColorText: var(--rebilly-inputHoverColorText);
101
- --rebilly-inputFocusFontFamily: var(--rebilly-inputHoverFontFamily);
102
- --rebilly-inputFocusFontSize: var(--rebilly-inputHoverFontSize);
103
- --rebilly-inputFocusFontLineHeight: var(--rebilly-inputHoverFontLineHeight);
104
- --rebilly-inputFocusFontWeight: var(--rebilly-inputHoverFontWeight);
105
- --rebilly-inputFocusBorder: 1px solid #0044D4;
106
- --rebilly-inputFocusBorderRadius: var(--rebilly-inputHoverBorderRadius);
107
- --rebilly-inputFocusBoxShadow: 0 0 0 1px #0044D4;
108
- --rebilly-inputPlaceholderColorText: rgba(13, 43, 62, 0.6);
109
- --rebilly-inputPlaceholderFontFamily: var(--rebilly-inputFontFamily);
110
- --rebilly-inputPlaceholderFontSize: var(--rebilly-inputFontSize);
111
- --rebilly-inputPlaceholderFontLineHeight: var(--rebilly-inputFontLineHeight);
112
- --rebilly-inputPlaceholderFontWeight: var(--rebilly-inputFontWeight);
113
- --rebilly-inputSelectionColorText: initial;
114
- --rebilly-inputSelectionColorBackground: highlight;
115
- --rebilly-inputErrorColorBackground: var(--rebilly-inputColorBackground);
116
- --rebilly-inputErrorColorText: var(--rebilly-colorDanger);
117
- --rebilly-inputErrorFontFamily: var(--rebilly-inputFontFamily);
118
- --rebilly-inputErrorFontSize: var(--rebilly-inputFontSize);
119
- --rebilly-inputErrorFontLineHeight: var(--rebilly-inputFontLineHeight);
120
- --rebilly-inputErrorFontWeight: var(--rebilly-inputFontWeight);
121
- --rebilly-inputErrorBorder: 1px solid #CD5C5C;
122
- --rebilly-inputErrorBorderRadius: var(--rebilly-inputBorderRadius);
123
- --rebilly-inputErrorBoxShadow: var(--rebilly-inputBoxShadow);
124
- --rebilly-inputErrorHoverColorBackground: var(--rebilly-inputErrorColorBackground);
125
- --rebilly-inputErrorHoverColorText: var(--rebilly-inputErrorColorText);
126
- --rebilly-inputErrorHoverFontFamily: var(--rebilly-inputErrorFontFamily);
127
- --rebilly-inputErrorHoverFontSize: var(--rebilly-inputErrorFontSize);
128
- --rebilly-inputErrorHoverFontLineHeight: var(--rebilly-inputErrorFontLineHeight);
129
- --rebilly-inputErrorHoverFontWeight: var(--rebilly-inputErrorFontWeight);
130
- --rebilly-inputErrorHoverBorder: var(--rebilly-inputErrorBorder);
131
- --rebilly-inputErrorHoverBorderRadius: var(--rebilly-inputErrorBorderRadius);
132
- --rebilly-inputErrorHoverBoxShadow: var(--rebilly-inputErrorBoxShadow);
133
- --rebilly-inputErrorFocusColorBackground: var(--rebilly-inputErrorHoverColorBackground);
134
- --rebilly-inputErrorFocusColorText: var(--rebilly-inputErrorHoverColorText);
135
- --rebilly-inputErrorFocusFontFamily: var(--rebilly-inputErrorHoverFontFamily);
136
- --rebilly-inputErrorFocusFontSize: var(--rebilly-inputErrorHoverFontSize);
137
- --rebilly-inputErrorFocusFontLineHeight: var(--rebilly-inputErrorHoverFontLineHeight);
138
- --rebilly-inputErrorFocusFontWeight: var(--rebilly-inputErrorHoverFontWeight);
139
- --rebilly-inputErrorFocusBorder: var(--rebilly-inputErrorHoverBorder);
140
- --rebilly-inputErrorFocusBorderRadius: var(--rebilly-inputErrorHoverBorderRadius);
141
- --rebilly-inputErrorFocusBoxShadow: var(--rebilly-inputErrorHoverBoxShadow);
142
- --rebilly-inputErrorPlaceholderColorText: rgba(205, 92, 92, 0.6);
143
- --rebilly-inputErrorPlaceholderFontFamily: var(--rebilly-inputPlaceholderFontFamily);
144
- --rebilly-inputErrorPlaceholderFontSize: var(--rebilly-inputPlaceholderFontSize);
145
- --rebilly-inputErrorPlaceholderFontLineHeight: var(--rebilly-inputPlaceholderFontLineHeight);
146
- --rebilly-inputErrorPlaceholderFontWeight: var(--rebilly-inputPlaceholderFontWeight);
147
- --rebilly-inputErrorSelectionColorText: var(--rebilly-inputSelectionColorText);
148
- --rebilly-inputErrorSelectionColorBackground: var(--rebilly-inputSelectionColorBackground);",
149
- "fontFamily": "Avenir, Helvetica, Arial, sans-serif",
150
- "fontLineHeightBase": "initial",
151
- "fontSizeBase": "16px",
152
- "fontSmooth": "auto",
153
- "fontWeightBase": "400",
154
- "headingColorText": "var(--rebilly-colorText)",
155
- "headingFontFamily": "var(--rebilly-fontFamily)",
156
- "headingFontWeight": "500",
157
- "inputBorder": "1px solid rgba(13, 43, 62, 0.25)",
158
- "inputBorderRadius": "var(--rebilly-borderRadius)",
159
- "inputBoxShadow": "none",
160
- "inputColorBackground": "transparent",
161
- "inputColorText": "var(--rebilly-colorText)",
162
- "inputErrorBorder": "1px solid #CD5C5C",
163
- "inputErrorBorderRadius": "var(--rebilly-inputBorderRadius)",
164
- "inputErrorBoxShadow": "var(--rebilly-inputBoxShadow)",
165
- "inputErrorColorBackground": "var(--rebilly-inputColorBackground)",
166
- "inputErrorColorText": "var(--rebilly-colorDanger)",
167
- "inputErrorFocusBorder": "var(--rebilly-inputErrorHoverBorder)",
168
- "inputErrorFocusBorderRadius": "var(--rebilly-inputErrorHoverBorderRadius)",
169
- "inputErrorFocusBoxShadow": "var(--rebilly-inputErrorHoverBoxShadow)",
170
- "inputErrorFocusColorBackground": "var(--rebilly-inputErrorHoverColorBackground)",
171
- "inputErrorFocusColorText": "var(--rebilly-inputErrorHoverColorText)",
172
- "inputErrorFocusFontFamily": "var(--rebilly-inputErrorHoverFontFamily)",
173
- "inputErrorFocusFontLineHeight": "var(--rebilly-inputErrorHoverFontLineHeight)",
174
- "inputErrorFocusFontSize": "var(--rebilly-inputErrorHoverFontSize)",
175
- "inputErrorFocusFontWeight": "var(--rebilly-inputErrorHoverFontWeight)",
176
- "inputErrorFontFamily": "var(--rebilly-inputFontFamily)",
177
- "inputErrorFontLineHeight": "var(--rebilly-inputFontLineHeight)",
178
- "inputErrorFontSize": "var(--rebilly-inputFontSize)",
179
- "inputErrorFontWeight": "var(--rebilly-inputFontWeight)",
180
- "inputErrorHoverBorder": "var(--rebilly-inputErrorBorder)",
181
- "inputErrorHoverBorderRadius": "var(--rebilly-inputErrorBorderRadius)",
182
- "inputErrorHoverBoxShadow": "var(--rebilly-inputErrorBoxShadow)",
183
- "inputErrorHoverColorBackground": "var(--rebilly-inputErrorColorBackground)",
184
- "inputErrorHoverColorText": "var(--rebilly-inputErrorColorText)",
185
- "inputErrorHoverFontFamily": "var(--rebilly-inputErrorFontFamily)",
186
- "inputErrorHoverFontLineHeight": "var(--rebilly-inputErrorFontLineHeight)",
187
- "inputErrorHoverFontSize": "var(--rebilly-inputErrorFontSize)",
188
- "inputErrorHoverFontWeight": "var(--rebilly-inputErrorFontWeight)",
189
- "inputErrorPlaceholderColorText": "rgba(205, 92, 92, 0.6)",
190
- "inputErrorPlaceholderFontFamily": "var(--rebilly-inputPlaceholderFontFamily)",
191
- "inputErrorPlaceholderFontLineHeight": "var(--rebilly-inputPlaceholderFontLineHeight)",
192
- "inputErrorPlaceholderFontSize": "var(--rebilly-inputPlaceholderFontSize)",
193
- "inputErrorPlaceholderFontWeight": "var(--rebilly-inputPlaceholderFontWeight)",
194
- "inputErrorSelectionColorBackground": "var(--rebilly-inputSelectionColorBackground)",
195
- "inputErrorSelectionColorText": "var(--rebilly-inputSelectionColorText)",
196
- "inputFocusBorder": "1px solid #0044D4",
197
- "inputFocusBorderRadius": "var(--rebilly-inputHoverBorderRadius)",
198
- "inputFocusBoxShadow": "0 0 0 1px #0044D4",
199
- "inputFocusColorBackground": "var(--rebilly-inputHoverColorBackground)",
200
- "inputFocusColorText": "var(--rebilly-inputHoverColorText)",
201
- "inputFocusFontFamily": "var(--rebilly-inputHoverFontFamily)",
202
- "inputFocusFontLineHeight": "var(--rebilly-inputHoverFontLineHeight)",
203
- "inputFocusFontSize": "var(--rebilly-inputHoverFontSize)",
204
- "inputFocusFontWeight": "var(--rebilly-inputHoverFontWeight)",
205
- "inputFontFamily": "var(--rebilly-fontFamily)",
206
- "inputFontLineHeight": "1.5",
207
- "inputFontSize": "var(--rebilly-fontSizeBase)",
208
- "inputFontWeight": "var(--rebilly-fontWeightBase)",
209
- "inputHoverBorder": "var(--rebilly-inputBorder)",
210
- "inputHoverBorderRadius": "var(--rebilly-inputBorderRadius)",
211
- "inputHoverBoxShadow": "var(--rebilly-inputBoxShadow)",
212
- "inputHoverColorBackground": "var(--rebilly-inputColorBackground)",
213
- "inputHoverColorText": "var(--rebilly-inputColorText)",
214
- "inputHoverFontFamily": "var(--rebilly-inputFontFamily)",
215
- "inputHoverFontLineHeight": "var(--rebilly-inputFontLineHeight)",
216
- "inputHoverFontSize": "var(--rebilly-inputFontSize)",
217
- "inputHoverFontWeight": "var(--rebilly-inputFontWeight)",
218
- "inputPlaceholderColorText": "rgba(13, 43, 62, 0.6)",
219
- "inputPlaceholderFontFamily": "var(--rebilly-inputFontFamily)",
220
- "inputPlaceholderFontLineHeight": "var(--rebilly-inputFontLineHeight)",
221
- "inputPlaceholderFontSize": "var(--rebilly-inputFontSize)",
222
- "inputPlaceholderFontWeight": "var(--rebilly-inputFontWeight)",
223
- "inputSelectionColorBackground": "highlight",
224
- "inputSelectionColorText": "initial",
225
- "labels": "floating",
6
+ --rebilly-colorBackground: #FFFFFF;
7
+ --rebilly-colorText: #0D2B3E;
8
+ --rebilly-colorMutedText: rgba(13, 43, 62, 0.5);
9
+ --rebilly-colorMutedBorder: #DCE3EA;
10
+ --rebilly-colorDanger: #CD5C5C;
11
+ --rebilly-fontFamily: Avenir, Helvetica, Arial, sans-serif;
12
+ --rebilly-fontSizeBase: 16px;
13
+ --rebilly-fontWeightBase: 500;
14
+ --rebilly-fontLineHeightBase: calc(16px * 1.5);
15
+ --rebilly-fontSmooth: auto;
16
+ --rebilly-borderRadius: 6px;
17
+ --rebilly-headingFontFamily: var(--rebilly-fontFamily);
18
+ --rebilly-headingFontWeight: 600;
19
+ --rebilly-headingColorText: var(--rebilly-colorText);
20
+ --rebilly-buttonColorBackground: var(--rebilly-colorPrimary);
21
+ --rebilly-buttonColorText: #FFFFFF;
22
+ --rebilly-buttonFontFamily: var(--rebilly-fontFamily);
23
+ --rebilly-buttonFontSize: var(--rebilly-fontSizeBase);
24
+ --rebilly-buttonFontLineHeight: var(--rebilly-fontLineHeightBase);
25
+ --rebilly-buttonFontWeight: var(--rebilly-fontWeightBase);
26
+ --rebilly-buttonBorder: 1px solid transparent;
27
+ --rebilly-buttonBorderRadius: var(--rebilly-borderRadius);
28
+ --rebilly-buttonBoxShadow: none;
29
+ --rebilly-buttonSecondaryColorBackground: var(--rebilly-colorBackground);
30
+ --rebilly-buttonSecondaryColorText: var(--rebilly-colorPrimary);
31
+ --rebilly-buttonSecondaryFontFamily: var(--rebilly-fontFamily);
32
+ --rebilly-buttonSecondaryFontSize: var(--rebilly-fontSizeBase);
33
+ --rebilly-buttonSecondaryFontLineHeight: var(--rebilly-fontLineHeightBase);
34
+ --rebilly-buttonSecondaryFontWeight: var(--rebilly-fontWeightBase);
35
+ --rebilly-buttonSecondaryBorder: 1px solid #0044D4;
36
+ --rebilly-buttonSecondaryBorderRadius: var(--rebilly-borderRadius);
37
+ --rebilly-buttonSecondaryBoxShadow: none;
38
+ --rebilly-buttonHoverColorBackground: #0036aa;
39
+ --rebilly-buttonHoverColorText: var(--rebilly-buttonColorText);
40
+ --rebilly-buttonHoverFontFamily: var(--rebilly-buttonFontFamily);
41
+ --rebilly-buttonHoverFontSize: var(--rebilly-buttonFontSize);
42
+ --rebilly-buttonHoverFontLineHeight: var(--rebilly-buttonFontLineHeight);
43
+ --rebilly-buttonHoverFontWeight: var(--rebilly-buttonFontWeight);
44
+ --rebilly-buttonHoverBorder: 1px solid #0036aa;
45
+ --rebilly-buttonHoverBorderRadius: var(--rebilly-buttonBorderRadius);
46
+ --rebilly-buttonHoverBoxShadow: var(--rebilly-buttonBoxShadow);
47
+ --rebilly-buttonSecondaryHoverColorBackground: var(--rebilly-colorBackground);
48
+ --rebilly-buttonSecondaryHoverColorText: var(--rebilly-buttonSecondaryColorText);
49
+ --rebilly-buttonSecondaryHoverFontFamily: var(--rebilly-buttonSecondaryFontFamily);
50
+ --rebilly-buttonSecondaryHoverFontSize: var(--rebilly-buttonSecondaryFontSize);
51
+ --rebilly-buttonSecondaryHoverFontLineHeight: var(--rebilly-buttonSecondaryFontLineHeight);
52
+ --rebilly-buttonSecondaryHoverFontWeight: var(--rebilly-buttonSecondaryFontWeight);
53
+ --rebilly-buttonSecondaryHoverBorder: var(--rebilly-buttonSecondaryBorder);
54
+ --rebilly-buttonSecondaryHoverBorderRadius: var(--rebilly-buttonSecondaryBorderRadius);
55
+ --rebilly-buttonSecondaryHoverBoxShadow: var(--rebilly-buttonSecondaryBoxShadow);
56
+ --rebilly-buttonActiveColorBackground: var(--rebilly-buttonHoverColorBackground);
57
+ --rebilly-buttonActiveColorText: var(--rebilly-buttonHoverColorText);
58
+ --rebilly-buttonActiveFontFamily: var(--rebilly-buttonHoverFontFamily);
59
+ --rebilly-buttonActiveFontSize: var(--rebilly-buttonHoverFontSize);
60
+ --rebilly-buttonActiveFontLineHeight: var(--rebilly-buttonHoverFontLineHeight);
61
+ --rebilly-buttonActiveFontWeight: var(--rebilly-buttonHoverFontWeight);
62
+ --rebilly-buttonActiveBorder: var(--rebilly-buttonHoverBorder);
63
+ --rebilly-buttonActiveBorderRadius: var(--rebilly-buttonHoverBorderRadius);
64
+ --rebilly-buttonActiveBoxShadow: var(--rebilly-buttonHoverBoxShadow);
65
+ --rebilly-buttonSecondaryActiveColorBackground: var(--rebilly-buttonSecondaryHoverColorBackground);
66
+ --rebilly-buttonSecondaryActiveColorText: var(--rebilly-buttonSecondaryHoverColorText);
67
+ --rebilly-buttonSecondaryActiveFontFamily: var(--rebilly-buttonSecondaryHoverFontFamily);
68
+ --rebilly-buttonSecondaryActiveFontSize: var(--rebilly-buttonSecondaryHoverFontSize);
69
+ --rebilly-buttonSecondaryActiveFontLineHeight: var(--rebilly-buttonSecondaryHoverFontLineHeight);
70
+ --rebilly-buttonSecondaryActiveFontWeight: var(--rebilly-buttonSecondaryHoverFontWeight);
71
+ --rebilly-buttonSecondaryActiveBorder: var(--rebilly-buttonSecondaryHoverBorder);
72
+ --rebilly-buttonSecondaryActiveBorderRadius: var(--rebilly-buttonSecondaryHoverBorderRadius);
73
+ --rebilly-buttonSecondaryActiveBoxShadow: var(--rebilly-buttonSecondaryHoverBoxShadow);
74
+ --rebilly-inputColorBackground: transparent;
75
+ --rebilly-inputColorText: var(--rebilly-colorText);
76
+ --rebilly-inputFontFamily: var(--rebilly-fontFamily);
77
+ --rebilly-inputFontSize: var(--rebilly-fontSizeBase);
78
+ --rebilly-inputFontLineHeight: var(--rebilly-fontLineHeightBase);
79
+ --rebilly-inputFontWeight: var(--rebilly-fontWeightBase);
80
+ --rebilly-inputBorder: 1px solid #d3dae1;
81
+ --rebilly-inputBorderRadius: var(--rebilly-borderRadius);
82
+ --rebilly-inputBoxShadow: none;
83
+ --rebilly-inputHoverColorBackground: var(--rebilly-inputColorBackground);
84
+ --rebilly-inputHoverColorText: var(--rebilly-inputColorText);
85
+ --rebilly-inputHoverFontFamily: var(--rebilly-inputFontFamily);
86
+ --rebilly-inputHoverFontSize: var(--rebilly-inputFontSize);
87
+ --rebilly-inputHoverFontLineHeight: var(--rebilly-inputFontLineHeight);
88
+ --rebilly-inputHoverFontWeight: var(--rebilly-inputFontWeight);
89
+ --rebilly-inputHoverBorder: var(--rebilly-inputBorder);
90
+ --rebilly-inputHoverBorderRadius: var(--rebilly-inputBorderRadius);
91
+ --rebilly-inputHoverBoxShadow: var(--rebilly-inputBoxShadow);
92
+ --rebilly-inputFocusColorBackground: var(--rebilly-inputHoverColorBackground);
93
+ --rebilly-inputFocusColorText: var(--rebilly-inputHoverColorText);
94
+ --rebilly-inputFocusFontFamily: var(--rebilly-inputHoverFontFamily);
95
+ --rebilly-inputFocusFontSize: var(--rebilly-inputHoverFontSize);
96
+ --rebilly-inputFocusFontLineHeight: var(--rebilly-inputHoverFontLineHeight);
97
+ --rebilly-inputFocusFontWeight: var(--rebilly-inputHoverFontWeight);
98
+ --rebilly-inputFocusBorder: 1px solid #0044D4;
99
+ --rebilly-inputFocusBorderRadius: var(--rebilly-inputHoverBorderRadius);
100
+ --rebilly-inputFocusBoxShadow: 0 0 0 1px #0044D4;
101
+ --rebilly-inputPlaceholderColorText: rgba(13, 43, 62, 0.5);
102
+ --rebilly-inputPlaceholderFontFamily: var(--rebilly-inputFontFamily);
103
+ --rebilly-inputPlaceholderFontSize: var(--rebilly-inputFontSize);
104
+ --rebilly-inputPlaceholderFontLineHeight: var(--rebilly-inputFontLineHeight);
105
+ --rebilly-inputPlaceholderFontWeight: var(--rebilly-inputFontWeight);
106
+ --rebilly-inputSelectionColorText: initial;
107
+ --rebilly-inputSelectionColorBackground: highlight;
108
+ --rebilly-inputErrorColorBackground: var(--rebilly-inputColorBackground);
109
+ --rebilly-inputErrorColorText: var(--rebilly-colorDanger);
110
+ --rebilly-inputErrorFontFamily: var(--rebilly-inputFontFamily);
111
+ --rebilly-inputErrorFontSize: var(--rebilly-inputFontSize);
112
+ --rebilly-inputErrorFontLineHeight: var(--rebilly-inputFontLineHeight);
113
+ --rebilly-inputErrorFontWeight: var(--rebilly-inputFontWeight);
114
+ --rebilly-inputErrorBorder: 1px solid #CD5C5C;
115
+ --rebilly-inputErrorBorderRadius: var(--rebilly-inputBorderRadius);
116
+ --rebilly-inputErrorBoxShadow: var(--rebilly-inputBoxShadow);
117
+ --rebilly-inputErrorHoverColorBackground: var(--rebilly-inputErrorColorBackground);
118
+ --rebilly-inputErrorHoverColorText: var(--rebilly-inputErrorColorText);
119
+ --rebilly-inputErrorHoverFontFamily: var(--rebilly-inputErrorFontFamily);
120
+ --rebilly-inputErrorHoverFontSize: var(--rebilly-inputErrorFontSize);
121
+ --rebilly-inputErrorHoverFontLineHeight: var(--rebilly-inputErrorFontLineHeight);
122
+ --rebilly-inputErrorHoverFontWeight: var(--rebilly-inputErrorFontWeight);
123
+ --rebilly-inputErrorHoverBorder: var(--rebilly-inputErrorBorder);
124
+ --rebilly-inputErrorHoverBorderRadius: var(--rebilly-inputErrorBorderRadius);
125
+ --rebilly-inputErrorHoverBoxShadow: var(--rebilly-inputErrorBoxShadow);
126
+ --rebilly-inputErrorFocusColorBackground: var(--rebilly-inputErrorHoverColorBackground);
127
+ --rebilly-inputErrorFocusColorText: var(--rebilly-inputErrorHoverColorText);
128
+ --rebilly-inputErrorFocusFontFamily: var(--rebilly-inputErrorHoverFontFamily);
129
+ --rebilly-inputErrorFocusFontSize: var(--rebilly-inputErrorHoverFontSize);
130
+ --rebilly-inputErrorFocusFontLineHeight: var(--rebilly-inputErrorHoverFontLineHeight);
131
+ --rebilly-inputErrorFocusFontWeight: var(--rebilly-inputErrorHoverFontWeight);
132
+ --rebilly-inputErrorFocusBorder: var(--rebilly-inputErrorHoverBorder);
133
+ --rebilly-inputErrorFocusBorderRadius: var(--rebilly-inputErrorHoverBorderRadius);
134
+ --rebilly-inputErrorFocusBoxShadow: var(--rebilly-inputErrorHoverBoxShadow);
135
+ --rebilly-inputErrorPlaceholderColorText: rgba(205, 92, 92, 0.5);
136
+ --rebilly-inputErrorPlaceholderFontFamily: var(--rebilly-inputPlaceholderFontFamily);
137
+ --rebilly-inputErrorPlaceholderFontSize: var(--rebilly-inputPlaceholderFontSize);
138
+ --rebilly-inputErrorPlaceholderFontLineHeight: var(--rebilly-inputPlaceholderFontLineHeight);
139
+ --rebilly-inputErrorPlaceholderFontWeight: var(--rebilly-inputPlaceholderFontWeight);
140
+ --rebilly-inputErrorSelectionColorText: var(--rebilly-inputSelectionColorText);
141
+ --rebilly-inputErrorSelectionColorBackground: var(--rebilly-inputSelectionColorBackground);",
226
142
  }
227
143
  `;