@rebilly/instruments 2.0.0-beta → 3.0.1-beta.0

package/dist/style/base/index.js

@@ -6,6 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 
 const base = theme => `
+  /* Instruments 'global' variables
+  ------------------------------------------------------------ */
+  :root,
+  #rebilly-instruments-app,
+  .rebilly-instruments-content,
+  .rebilly-instruments-loader,
+  .rebilly-instruments-modal-overlay {
+    ${theme.cssVars}
+
+    --rebilly-spacings-base: calc(var(--rebilly-fontSizeBase) * 1.5);
+    --rebilly-spacings-2xs: calc(var(--rebilly-spacings-base) * 0.16667);
+    --rebilly-spacings-xs: calc(var(--rebilly-spacings-base) * 0.25);
+    --rebilly-spacings-s: calc(var(--rebilly-spacings-base) * 0.5);
+    --rebilly-spacings-m: var(--rebilly-spacings-base);
+    --rebilly-spacings-l: calc(var(--rebilly-spacings-base) * 2);
+    --rebilly-spacings-xl: calc(var(--rebilly-spacings-base) * 4);
+    --rebilly-spacings-2xl: calc(var(--rebilly-spacings-base) * 4.6667);
+
+    --rebilly-spacings-input-py: calc(var(--rebilly-spacings-2xs) * 2);
+    --rebilly-spacings-input-px: calc(var(--rebilly-spacings-s) + var(--rebilly-spacings-2xs));
+    --rebilly-spacings-label-offset-left: var(--rebilly-spacings-input-px);
+    --rebilly-spacings-form-element-min-height: calc(var(--rebilly-spacings-base) * 1.83333);
+    --rebilly-spacings-button-py: var(--rebilly-spacings-input-py);
+    --rebilly-spacings-button-px: var(--rebilly-spacings-input-px);
+  }
+
+
   /* Base, Typography
   ------------------------------------------------------------ */
   /* Base setup for top level elements */
@@ -13,19 +40,21 @@ const base = theme => `
   .rebilly-instruments-method-content,
   .rebilly-instruments-confirmation,
   .rebilly-instruments-results {
-    color: ${theme.color.text};
-    background: ${theme.color.background};
-    font-size: ${theme.typography.fontSize};
-    line-height: ${theme.typography.lineHeight};
-    font-family: ${theme.typography.fontFamily};
+    color: var(--rebilly-colorText);
+    background: var(--rebilly-colorBackground);
+    font-size: var(--rebilly-fontSizeBase);
+    font-weight: var(--rebilly-fontWeightBase);
+    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
+    font-family: var(--rebilly-fontFamily);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: left;
     transition: all 200ms;
+    font-smooth: var(--rebilly-fontSmooth);
   }
 
   .rebilly-instruments-link {
-    color: ${theme.color.primary};
+    color: var(--rebilly-colorPrimary);
     cursor: pointer;
   }
 
@@ -34,7 +63,7 @@ const base = theme => `
   }
 
   .rebilly-instruments-link .rebilly-instruments-icon {
-    fill: ${theme.color.primary};
+    fill: var(--rebilly-colorPrimary);
   }
 
   .rebilly-instruments-link.has-icon-left,
@@ -43,29 +72,32 @@ const base = theme => `
   }
 
   .rebilly-instruments-link.has-icon-left .rebilly-instruments-icon {
-    margin-right: ${theme.space.xs};
+    margin-right: var(--rebilly-spacings-xs);
   }
 
   .rebilly-instruments-link.has-icon-right .rebilly-instruments-icon {
-    margin-left: ${theme.space.xs};
+    margin-left: var(--rebilly-spacings-xs);
   }
 
   /* Typography */
   .rebilly-instruments-h1,
   .rebilly-instruments-h2 {
-    font-weight: 500;
+    font-weight: var(--rebilly-headingFontWeight);
+    font-family: var(--rebilly-headingFontFamily);
+    color: var(--rebilly-headingColorText);
   }
 
   .rebilly-instruments-h1 {
-    font-size: calc(${theme.typography.fontSize} * 1.5);
-    line-height: calc(${theme.typography.lineHeight} * 1.5);
-    margin: 0 0 calc(${theme.space.m} * 1.5) 0;
+    font-size: calc(var(--rebilly-fontSizeBase) * 1.5);
+    line-height: 1.5;
+    line-height: calc(${theme.fontLineHeightBase} * 1.5);
+    margin: 0 0 calc(var(--rebilly-spacings-base) * 1.5) 0;
   }
 
   .rebilly-instruments-h2 {
-    font-size: calc(${theme.typography.fontSize} * 1.12);
-    line-height: ${theme.typography.lineHeight};
-    margin: 0 0 ${theme.space.m} 0;
+    font-size: calc(var(--rebilly-fontSizeBase) * 1.125);
+    line-height: var(--rebilly-fontLineHeightBase, 1.33);
+    margin: 0 0 var(--rebilly-spacings-base) 0;
   }
 `;
 

package/dist/style/base/theme.js

@@ -5,69 +5,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Theme = void 0;
 
-var _lodash = _interopRequireDefault(require("lodash.merge"));
-
-var _colorValues = require("../utils/color-values");
+var _defaultTheme = _interopRequireDefault(require("./default-theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 class Theme {
   constructor(overrides = {}) {
     this.overrides = overrides;
-    this.theme = {
-      color: {
-        primary: '#0044d4',
-        errorText: '#cd5c5c',
-        text: '#0D2B3E',
-        buttonText: '#ffffff',
-        background: '#ffffff'
-      },
-      typography: {
-        fontFamily: 'Avenir, Helvetica, Arial, sans-serif',
-        fontSize: '16px',
-        lineHeight: '24px',
-        captionFontSize: '12px',
-        captionLineHeight: '12px'
-      },
-      space: {
-        xxs: '4px',
-        xs: '6px',
-        s: '12px',
-        m: '24px',
-        l: '48px',
-        xl: '96px',
-        xxl: '112px',
-        form: {
-          padding: '8px 16px',
-          verticalPadding: '8px',
-          horizontalPadding: '16px',
-          minHeight: '44px'
-        }
-      },
-      borderRadius: '4px'
-    };
+    this.theme = _defaultTheme.default;
   }
 
-  get getComputed() {
-    return this.computed();
+  overrideTheme() {
+    Object.keys(this.overrides).forEach(prop => {
+      this.theme[prop] = this.overrides[prop];
+    });
   }
 
-  computed() {
-    return {
-      color: {
-        primaryValues: (0, _colorValues.colorValues)(this.theme.color.primary),
-        mutedText: (0, _colorValues.alphaColor)(this.theme.color.text, 0.6),
-        mutedBorder: (0, _colorValues.alphaColor)(this.theme.color.text, 0.25)
-      }
-    };
+  get cssVars() {
+    return Object.keys(this.theme).filter(v => !Theme.nonCssProperties.includes(v)).map(p => `--rebilly-${p}: ${this.theme[p]};`).join('\n');
   }
 
   build() {
-    return { ...(0, _lodash.default)(this.theme, this.overrides),
-      getComputed: this.getComputed
+    this.overrideTheme();
+    return { ...this.theme,
+      cssVars: this.cssVars
     };
   }
 
 }
 
-exports.Theme = Theme;
+exports.Theme = Theme;
+
+_defineProperty(Theme, "nonCssProperties", ['labels']);

package/dist/style/base/theme.spec.js

@@ -2,10 +2,6 @@
 
 var _theme = require("./theme");
 
-var _values = _interopRequireDefault(require("values.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 describe('RebillyInstruments theme', () => {
   it('builds the theme object', () => {
     const theme = new _theme.Theme().build();
@@ -13,18 +9,11 @@ describe('RebillyInstruments theme', () => {
   });
   it('properly overrides the default properties', () => {
     const overrides = {
-      color: {
-        primary: 'purple',
-        text: 'gray'
-      }
+      colorPrimary: 'red',
+      buttonBorderRadius: '30px'
     };
     const theme = new _theme.Theme(overrides).build();
-    expect(theme.color.primary).toEqual('purple');
-    expect(theme.color.text).toEqual('gray');
-  });
-  it('computes new styles from theme properties', () => {
-    const theme = new _theme.Theme().build();
-    expect(theme.getComputed.color.primaryValues instanceof _values.default).toEqual(true);
-    expect(theme.getComputed.color.mutedText).toEqual('rgba(13, 43, 62, 0.6)');
+    expect(theme.colorPrimary).toEqual('red');
+    expect(theme.buttonBorderRadius).toEqual('30px');
   });
 });

package/dist/style/components/address.js

@@ -8,13 +8,13 @@ exports.address = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the address component.
 // -----------------------------------------------------------------------------
-const address = theme => `
+const address = () => `
   /**
   * Address
   */
   .rebilly-instruments-address {
-    margin: 0 0 ${theme.space.m};
-    color: ${theme.getComputed.color.mutedText};
+    margin: 0 0 var(--rebilly-spacings-base);
+    color: var(--rebilly-colorMutedText);
     font-style: normal;
   }
 

package/dist/style/components/button.js

@@ -8,22 +8,23 @@ exports.button = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the button component.
 // -----------------------------------------------------------------------------
-const button = theme => `
+const button = () => `
   /**
   * Buttons
   */
   .rebilly-instruments-button {
-    font-size: ${theme.typography.fontSize};
-    font-family: ${theme.typography.fontFamily};
-    line-height: ${theme.typography.lineHeight};
-    padding: ${theme.space.form.padding};
+    font-size: var(--rebilly-buttonFontSize);
+    font-family: var(--rebilly-buttonFontFamily);
+    line-height: var(--rebilly-buttonFontLineHeight);
+    padding: var(--rebilly-spacings-button-py) var(--rebilly-spacings-button-px);
     box-sizing: border-box;
-    background: ${theme.color.primary};
-    color: ${theme.color.buttonText};
-    border-radius: ${theme.borderRadius};
-    margin: calc(${theme.space.xxs} + ${theme.space.s} / 2) 0;
-    font-weight: 500;
-    border: none;
+    background: var(--rebilly-buttonColorBackground);
+    color: var(--rebilly-buttonColorText, #FFF);
+    border-radius: var(--rebilly-buttonBorderRadius);
+    font-weight: var(--rebilly-buttonFontWeight);
+    border: var(--rebilly-buttonBorder);
+    box-shadow: var(--rebilly-buttonBoxShadow);
+    margin: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s) / 2) 0;
     width: 100%;
     cursor: pointer;
     min-height: 44px;
@@ -31,25 +32,34 @@ const button = theme => `
     outline: none;
   }
 
-  .rebilly-instruments-button:hover,
-  .rebilly-instruments-button:active {
-    background: ${theme.getComputed.color.primaryValues.shade(20).hexString()};
+  .rebilly-instruments-button:not([disabled]):hover {
+    background: var(--rebilly-buttonHoverColorBackground);
+  }
+
+  .rebilly-instruments-button:not([disabled]):active {
+    background: var(--rebilly-buttonActiveColorBackground);
   }
 
   .rebilly-instruments-button.rebilly-instruments-button-secondary {
-    background: ${theme.color.background};
-    box-shadow: inset 0 0 0 1px ${theme.color.primary};
-    color: ${theme.color.primary};
+    background: var(--rebilly-colorBackground);
+    color: var(--rebilly-buttonColorBackground);
+    border-color: var(--rebilly-buttonColorBackground);
   }
 
-  .rebilly-instruments-button.rebilly-instruments-button-secondary:hover,
-  .rebilly-instruments-button.rebilly-instruments-button-secondary:active {
-    background: ${theme.color.background};
+  .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover,
+  .rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active {
+    background: var(--rebilly-colorBackground);
   }
 
-  .rebilly-instruments-button:focus { box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues.tint(60).hexString()}; }
+  .rebilly-instruments-button:focus { 
+    box-shadow: 0 0 0 1px var(--rebilly-colorPrimary);
+  }
 
-  .rebilly-instruments-button:disabled { opacity: 0.6; }
+  .rebilly-instruments-button:disabled,
+  .rebilly-instruments-button:disabled:hover { 
+    cursor: not-allowed;
+    opacity: 0.6; 
+  }
 
   .rebilly-instruments-button::first-letter { text-transform: uppercase; }
 

package/dist/style/components/divider.js

@@ -8,13 +8,13 @@ exports.divider = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the divider component.
 // -----------------------------------------------------------------------------
-const divider = theme => `
+const divider = () => `
   /**
   * Divider
   */
   .rebilly-instruments-divider {
-    line-height: ${theme.typography.lineHeight};
-    padding: ${theme.space.m} 0;
+    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
+    padding: var(--rebilly-spacings-base) 0;
     margin: 0;
     position: relative;
     outline: 0;
@@ -23,7 +23,7 @@ const divider = theme => `
   }
 
   .rebilly-instruments-divider::before {
-    background: ${theme.getComputed.color.mutedBorder};
+    background: var(--rebilly-colorMutedBorder);
     content: '';
     position: absolute;
     left: 0;
@@ -33,13 +33,13 @@ const divider = theme => `
   }
 
   .rebilly-instruments-divider .rebilly-instruments-divider-label {
-    color: ${theme.getComputed.color.mutedText};
+    color: var(--rebilly-colorMutedText);
     font-weight: 500;
     text-transform: uppercase;
-    padding: 0 ${theme.space.s};
-    line-height: 14px;
-    background-color: ${theme.color.background};
-    font-size: 12px;
+    padding: 0 var(--rebilly-spacings-s);
+    line-height: calc(var(--rebilly-fontSizeBase) * 0.875);
+    background-color: var(--rebilly-colorBackground);
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.875);
     position: relative;
     display: inline-block;
   }

package/dist/style/components/forms/checkbox.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.checkbox = void 0;
 
+var _colorValues = require("../../utils/color-values");
+
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the checkbox component.
 // -----------------------------------------------------------------------------
@@ -15,9 +17,10 @@ const checkbox = theme => `
   .rebilly-instruments-form-field-checkbox {
     position: relative;
     opacity: 1;
-    padding-left: calc(${theme.space.m} + ${theme.space.s});
     align-items: center;
-    display: inline-block;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: start;
     cursor: pointer;
     transform: none;
   }
@@ -35,13 +38,14 @@ const checkbox = theme => `
   }
 
   .rebilly-instruments-form-field-checkbox span {
-    position: absolute;
+    position: relative;
     top: 0;
     left: 0;
     height: 24px;
     width: 24px;
-    border-radius: ${theme.borderRadius};
-    box-shadow: inset 0 0 0 1px ${theme.getComputed.color.mutedBorder};
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1px var(--rebilly-colorMutedBorder);
+    margin-right: var(--rebilly-spacings-s);
     background-color: transparent;
     transition: all 200ms;
   }
@@ -54,7 +58,7 @@ const checkbox = theme => `
     opacity: 0;
     width: 5px;
     height: 11px;
-    border: solid ${theme.color.primary};
+    border: solid var(--rebilly-colorPrimary);
     border-width: 0 2px 2px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
@@ -63,7 +67,7 @@ const checkbox = theme => `
   }
 
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span {
-    box-shadow: inset 0 0 0 2px ${theme.color.primary};
+    box-shadow: inset 0 0 0 2px var(--rebilly-colorPrimary);
   }
 
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:checked ~ span:after {
@@ -71,8 +75,7 @@ const checkbox = theme => `
   }
 
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:focus ~ span {
-    box-shadow: 0 0 0 2px ${theme.getComputed.color.primaryValues.tint(80).hexString()},
-    inset 0 0 0 1px ${theme.color.primary};
+    box-shadow: 0 0 0 2px ${(0, _colorValues.lighten)(theme.colorPrimary, 80)}, inset 0 0 0 1px var(--rebilly-colorPrimary);
   }
 
   .rebilly-instruments-form-field-checkbox input[type="checkbox"]:disabled ~ span {

package/dist/style/components/forms/field.js

@@ -8,25 +8,37 @@ exports.field = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the field component.
 // -----------------------------------------------------------------------------
-const field = theme => `
+const field = () => `
   /**
   * Field
   */
   .rebilly-instruments-form-field {
-    margin: calc(${theme.space.xxs} + ${theme.space.s}) 0;
+    margin: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-s)) 0;
+    position: relative;
+  }
+
+  .rebilly-instruments-form-field.is-compact {
+    margin-top: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s));
+    margin-bottom: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s));
+  }
+
+  .rebilly-instruments-form-field > div {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
     position: relative;
   }
 
   /* Field group */
   .rebilly-instruments-form-field-group {
-    margin: calc(-${theme.space.xxs} - ${theme.space.s}) 0;
+    margin: calc(calc(var(--rebilly-spacings-xs) * -1) - var(--rebilly-spacings-s)) 0;
     display: flex;
   }
 
   .rebilly-instruments-form-field-group > * {
     flex: 1 0;
-    margin-left: ${theme.space.xs};
-    margin-right: ${theme.space.xs}
+    margin-left: var(--rebilly-spacings-xs);
+    margin-right: var(--rebilly-spacings-xs);
   }
 
   .rebilly-instruments-form-field-group > *:first-child {
@@ -40,7 +52,7 @@ const field = theme => `
   @media (max-width: 480px) {
     .rebilly-instruments-form-field-group {
       display: block;
-      margin: calc(${theme.space.xxs} + ${theme.space.s}) 0;
+      margin: calc(var(--rebilly-spacings-2xs) + var(--rebilly-spacings-s)) 0;
     }
 
     .rebilly-instruments-form-field-group > * {

package/dist/style/components/forms/form.js

@@ -8,7 +8,7 @@ exports.form = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the form component.
 // -----------------------------------------------------------------------------
-const form = theme => `
+const form = () => `
   /**
   * Form
   */
@@ -19,7 +19,7 @@ const form = theme => `
   .rebilly-instruments-form select:-webkit-autofill,
   .rebilly-instruments-form select:-webkit-autofill:hover,
   .rebilly-instruments-form select:-webkit-autofill:focus {
-    -webkit-text-fill-color: ${theme.color.text};
+    -webkit-text-fill-color: var(--rebilly-colorText);
     -webkit-box-shadow: 0 0 0px 1000px transparent inset;
     transition: background-color 5000s ease-in-out 0s;
   }

package/dist/style/components/forms/input.js

@@ -8,38 +8,79 @@ exports.input = void 0;
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the input component.
 // -----------------------------------------------------------------------------
-const input = theme => `
+const input = () => `
   /**
   * Input
   */
   .rebilly-instruments-form-field-input {
-    font-size: ${theme.typography.fontSize};
-    line-height: ${theme.typography.lineHeight};
-    padding: ${theme.space.form.padding};
-    min-height: ${theme.space.form.minHeight};
-    border: 1px solid ${theme.getComputed.color.mutedBorder};
-    border-radius: ${theme.borderRadius};
-    color: ${theme.color.text};
-    background: transparent;
+    font-size: var(--rebilly-inputFontSize);
+    font-family: var(--rebilly-inputFontFamily);
+    font-weight: var(--rebilly-inputFontWeight);
+    line-height: var(--rebilly-inputFontLineHeight);
+    padding: var(--rebilly-spacings-input-py) var(--rebilly-spacings-input-px);
+    min-height: var(--rebilly-spacings-form-element-min-height);
+    border: var(--rebilly-inputBorder);
+    border-radius: var(--rebilly-inputBorderRadius);
+    color: var(--rebilly-inputColorText);
+    background: var(--rebilly-inputColorBackground);
     box-sizing: border-box;
+    box-shadow: var(--rebilly-inputBoxShadow);
     width: 100%;
     transition: all 200ms;
+    order: 1;
+  }
+
+  .rebilly-instruments-form-field-input:hover {
+    background: var(--rebilly-inputHoverColorBackground);
+    color: var(--rebilly-inputHoverColorText);
+    font-family: var(--rebilly-inputHoverFontFamily);
+    font-size: var(--rebilly-inputHoverFontSize);
+    line-height: var(--rebilly-inputHoverFontLineHeight);
+    font-weight: var(--rebilly-inputHoverFontWeight);
+    border: var(--rebilly-inputHoverBorder);
+    border-radius: var(--rebilly-inputHoverBorderRadius);
+    box-shadow: var(--rebilly-inputHoverBoxShadow);
   }
 
   .rebilly-instruments-form-field-input:focus {
     outline: none;
-    border: 1px solid ${theme.color.primary};
-    box-shadow: 0 0 0 1px ${theme.color.primary};
+    background: var(--rebilly-inputFocusColorBackground);
+    color: var(--rebilly-inputFocusColorText);
+    font-family: var(--rebilly-inputFocusFontFamily);
+    font-size: var(--rebilly-inputFocusFontSize);
+    line-height: var(--rebilly-inputFocusFontLineHeight);
+    font-weight: var(--rebilly-inputFocusFontWeight);
+    border: var(--rebilly-inputFocusBorder);
+    border-radius: var(--rebilly-inputFocusBorderRadius);
+    box-shadow: var(--rebilly-inputFocusBoxShadow);
   }
 
   .rebilly-instruments-form-field-input::placeholder {
-    color: ${theme.color.text};
-    opacity: 0.5;
+    color: var(--rebilly-inputPlaceholderColorText);
+    font-family: var(--rebilly-inputPlaceholderFontFamily);
+    font-size: var(--rebilly-inputPlaceholderFontSize);
+    line-height: var(--rebilly-inputPlaceholderFontLineHeight);
+    font-weight: var(--rebilly-inputPlaceholderFontWeight);
+    opacity: 1;
+  }
+
+  .rebilly-instruments-form-field-input::selection {
+    color: var(--rebilly-inputSelectionColorText);
+    background: var(--rebilly-inputSelectionColorBackground);
   }
 
   .rebilly-instruments-form-field-input:disabled {
     opacity: 0.6;
   }
+
+  /* Floating Labels */
+  .is-floating .rebilly-instruments-form-field-input::placeholder {
+    opacity: 0;
+  }
+
+  .is-floating .rebilly-instruments-form-field-input:focus::placeholder {
+    opacity: 1;
+  }
 `;
 
 exports.input = input;