@rebilly/instruments 3.13.2-beta.0 → 3.13.4-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 +66 -43
  3. package/dist/index.min.js +66 -43
  4. package/package.json +6 -3
  5. package/src/functions/destroy.js +2 -8
  6. package/src/functions/mount/fetch-data.js +2 -9
  7. package/src/functions/mount/index.js +10 -15
  8. package/src/functions/mount/mount.spec.js +11 -10
  9. package/src/functions/mount/setup-framepay-theme.js +72 -30
  10. package/src/functions/mount/setup-options.js +2 -2
  11. package/src/functions/mount/{setup-styles-vars.js → setup-styles.js} +7 -9
  12. package/src/functions/purchase.js +5 -2
  13. package/src/functions/setup.js +6 -3
  14. package/src/functions/show.js +2 -2
  15. package/src/functions/show.spec.js +4 -4
  16. package/src/functions/update.spec.js +3 -4
  17. package/src/instance.js +1 -4
  18. package/src/loader/index.js +33 -57
  19. package/src/storefront/index.js +5 -2
  20. package/src/storefront/payment-instruments.js +0 -7
  21. package/src/style/base/__snapshots__/theme.spec.js.snap +220 -136
  22. package/src/style/base/default-theme.js +14 -187
  23. package/src/style/base/index.js +79 -487
  24. package/src/style/base/theme.js +4 -3
  25. package/src/style/base/theme.spec.js +3 -2
  26. package/src/style/browserslist.js +1 -0
  27. package/src/style/components/accordion.js +140 -0
  28. package/src/style/components/address.js +55 -0
  29. package/src/style/components/button.js +117 -0
  30. package/src/style/components/divider.js +39 -0
  31. package/src/style/components/forms/checkbox.js +75 -0
  32. package/src/style/components/forms/field.js +56 -0
  33. package/src/style/components/forms/form.js +18 -0
  34. package/src/style/components/forms/input.js +77 -0
  35. package/src/style/components/forms/label.js +55 -0
  36. package/src/style/components/forms/radio.js +80 -0
  37. package/src/style/components/forms/select.js +86 -0
  38. package/src/style/components/forms/validation.js +72 -0
  39. package/src/style/components/icons.js +13 -0
  40. package/src/style/components/index.js +39 -0
  41. package/src/style/components/loader.js +41 -0
  42. package/src/style/components/methods.js +97 -0
  43. package/src/style/components/overlay.js +24 -0
  44. package/src/style/helpers/index.js +54 -0
  45. package/src/style/index.js +24 -4
  46. package/src/style/payment-instruments/content.js +8 -0
  47. package/src/style/payment-instruments/index.js +14 -0
  48. package/src/style/payment-instruments/payment-card.js +27 -0
  49. package/src/style/payment-instruments/payment-instrument-list.js +44 -0
  50. package/src/style/payment-instruments/payment-instrument.js +55 -0
  51. package/src/style/utils/color-values.js +1 -1
  52. package/src/style/utils/remove-empty-null.js +10 -0
  53. package/src/style/vendor/framepay.js +28 -0
  54. package/src/style/vendor/postmate.js +18 -0
  55. package/src/style/views/confirmation.js +26 -0
  56. package/src/style/views/index.js +16 -0
  57. package/src/style/views/method-selector.js +11 -0
  58. package/src/style/views/modal.js +91 -0
  59. package/src/style/views/result.js +52 -0
  60. package/src/style/views/summary.js +118 -0
  61. package/src/views/__snapshots__/summary.spec.js.snap +246 -0
  62. package/src/views/common/iframe/base-iframe.js +2 -3
  63. package/src/views/common/iframe/event-listeners.js +9 -12
  64. package/src/views/common/iframe/method-iframe.js +1 -3
  65. package/src/views/common/iframe/modal-iframe.js +2 -4
  66. package/src/views/common/iframe/view-iframe.js +1 -3
  67. package/src/views/confirmation.js +7 -12
  68. package/src/views/method-selector/express-methods/apple-pay.js +92 -0
  69. package/src/views/method-selector/express-methods/index.js +25 -0
  70. package/src/views/method-selector/get-payment-methods.js +1 -0
  71. package/src/views/method-selector/index.js +58 -45
  72. package/src/views/method-selector/method-selector.spec.js +1 -1
  73. package/src/views/method-selector/mount-express-methods.js +26 -66
  74. package/src/views/method-selector/mount-methods.js +178 -0
  75. package/src/views/modal.js +1 -1
  76. package/src/views/result.js +3 -3
  77. package/src/views/summary.js +190 -24
  78. package/src/views/summary.spec.js +145 -0
  79. package/tests/mocks/storefront-api-mock.js +27 -48
  80. package/src/style/utils/minifyCss.js +0 -14
  81. package/src/views/errors.js +0 -95
  82. package/src/views/method-selector/express-methods.js +0 -51
  83. package/src/views/method-selector/generate-framepay-config.js +0 -54
  84. package/src/views/method-selector/generate-framepay-config.spec.js +0 -195
package/src/storefront/index.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import RebillyApi, {RebillyStorefrontAPI, RebillyExperimentalAPI} from 'rebilly-js-sdk';
2
- import { showError } from '../views/errors';
3
2
 
4
3
  export function validateStateForStorefront({state}) {
5
4
  if (!state.storefront) {
@@ -20,7 +19,11 @@ export async function Endpoint({
20
19
  validateStateForStorefront({state});
21
20
  return await callback();
22
21
  } catch(error) {
23
- showError(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
+ }
24
27
  throw error;
25
28
  }
26
29
  }
package/src/storefront/payment-instruments.js CHANGED
@@ -32,10 +32,3 @@ 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,142 +2,226 @@
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",
5
39
  "cssVars": "--rebilly-colorPrimary: #0044D4;
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);",
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",
142
226
  }
143
227
  `;