@rebilly/instruments 2.1.1-beta.0 → 3.0.0-beta.0

package/src/style/components/forms/label.js

@@ -1,34 +1,60 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the label component.
 // -----------------------------------------------------------------------------
-export const label = (theme) => `
+export const label = () => `
   /**
   * Label
   */
   .rebilly-instruments-form-field-label {
-    left: ${theme.space.form.horizontalPadding};
-    color: ${theme.color.text};
-    top: calc(${theme.space.form.minHeight} / 2);
+    font-size: calc(var(--rebilly-fontSizeBase) * 0.92);
+    line-height: calc(var(--rebilly-fontSizeBase) * 0.92);
+    margin-bottom: var(--rebilly-spacings-2xs);
+  }
+
+  /* Floating Labels */
+  .is-floating .rebilly-instruments-form-field-label {
+    font-size: var(--rebilly-fontSizeBase);
+    left: var(--rebilly-spacings-label-offset-left);
+    color: var(--rebilly-colorText);
+    top: 50%;
     background: transparent;
-    opacity: 0;
+    opacity: 1;
     position: absolute;
-    transform: translateY(-50%);
-    transition: all 200ms;
+    transform: translateY(-50%) scale(1);
+    transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1), background 0.35s cubic-bezier(0.19, 1, 0.22, 1);
     cursor: text;
     pointer-events: none;
+    transform-origin: left top;
+  }
+
+  /* Includes Google autocomplete fix */
+  .is-floating input:-webkit-autofill + .rebilly-instruments-form-field-label,
+  .is-floating input:-webkit-autofill:hover + .rebilly-instruments-form-field-label, 
+  .is-floating input:-webkit-autofill:focus + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill:hover + .rebilly-instruments-form-field-label,
+  .is-floating select:-webkit-autofill:focus + .rebilly-instruments-form-field-label {
+    padding: 0 var(--rebilly-spacings-2xs);
+    left: calc(var(--rebilly-spacings-label-offset-left) - var(--rebilly-spacings-2xs));
+    line-height: 1;
+    background: var(--rebilly-colorBackground);
+    opacity: 1!important;
+    transform: translateY(-175%) scale(0.875);
+  }
+
+  .is-floating .rebilly-instruments-form-field-select + .rebilly-instruments-form-field-label {
+    font-size: var(--rebilly-fontSizeBase);
+    opacity: 0.5;
   }
 
-  .rebilly-instruments-form-field-input:not(:placeholder-shown) + .rebilly-instruments-form-field-label,
-  .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
-  .rebilly-instruments-form-field-label.is-active {
-    padding: 0 ${theme.space.xxs};
-    left: calc(${theme.space.form.horizontalPadding} - ${theme.space.xxs});
-    font-size: ${theme.typography.captionFontSize};
-    line-height: ${theme.typography.captionLineHeight};
-    color: ${theme.color.text};
-    background: ${theme.color.background};
-    font-weight: 500;
+  .is-floating .rebilly-instruments-form-field-input:focus + .rebilly-instruments-form-field-label,
+  .is-floating .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
+  .is-floating .rebilly-instruments-form-field-label.is-active {
+    padding: 0 var(--rebilly-spacings-2xs);
+    left: calc(var(--rebilly-spacings-label-offset-left) - var(--rebilly-spacings-2xs));
+    line-height: 1;
+    background: var(--rebilly-colorBackground);
     opacity: 1;
-    top: 0;
+    transform: translateY(-175%) scale(0.875);
   }
 `;

package/src/style/components/forms/select.js

@@ -1,30 +1,59 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the select component.
 // -----------------------------------------------------------------------------
-export const select = (theme) => `
+export const select = () => `
   /**
   * Select
   */
   .rebilly-instruments-form-field-select {
-    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-select: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-select: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-select::selection {
+    color: var(--rebilly-inputSelectionColorText);
+    background: var(--rebilly-inputSelectionColorBackground);
+  }
+
+
   .rebilly-instruments-form-field-select:disabled {
     opacity: 0.6;
   }
@@ -34,21 +63,24 @@ export const select = (theme) => `
     -moz-appearance: none;
   }
 
-  .rebilly-instruments-form-field-select + .rebilly-instruments-form-field-label {
-    font-size: ${theme.typography.fontSize};
-    opacity: 0.5;
-  }
-
   .rebilly-instruments-form-field-select::-ms-expand { display: none; }
 
   .rebilly-instruments-form-field-select-arrow {
-    border: solid ${theme.color.text};
+    border: solid var(--rebilly-inputColorText);
     position: absolute;
-    width: 8px;
-    height: 8px;
+    width: var(--rebilly-spacings-xs);
+    height: var(--rebilly-spacings-xs);
     border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-    right: 16px;
-    top: 16px;
+    border-radius: 1px;
+    right: var(--rebilly-spacings-s);
+    top: 50%;
+    margin-top: calc(var(--rebilly-inputFontSize) * 0.875 - var(--rebilly-spacings-xs));
+    transform: translateY(-50%) rotate(45deg);
+  }
+
+  .is-floating .rebilly-instruments-form-field-select-arrow {
+    top: 50%;
+    margin-top: 0;
+    transform: translateY(-50%) rotate(45deg);
   }
 `;

package/src/style/components/forms/validation.js

@@ -1,25 +1,72 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the form validations.
 // -----------------------------------------------------------------------------
-export const validation = (theme) => `
+export const validation = () => `
   /**
   * Validations
   */
   .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input,
   .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select {
-    border-color: ${theme.color.errorText};
-    color: ${theme.color.errorText};
+    font-family: var(--rebilly-inputErrorFontFamily);
+    font-size: var(--rebilly-inputErrorFontSize);
+    font-weight: var(--rebilly-inputErrorFontWeight);
+    line-height: var(--rebilly-inputErrorFontLineHeight);
+    background: var(--rebilly-inputErrorColorBackground);
+    color: var(--rebilly-inputErrorColorText);
+    border: var(--rebilly-inputErrorBorder);
+    border-radius: var(--rebilly-inputErrorBorderRadius);
+    box-shadow: var(--rebilly-inputErrorBoxShadow);
+  }
+
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:hover,
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select:hover {
+    font-family: var(--rebilly-inputErrorHoverFontFamily);
+    font-size: var(--rebilly-inputErrorHoverFontSize);
+    font-weight: var(--rebilly-inputErrorHoverFontWeight);
+    line-height: var(--rebilly-inputErrorHoverFontLineHeight);
+    background: var(--rebilly-inputErrorHoverColorBackground);
+    color: var(--rebilly-inputErrorHoverColorText);
+    border: var(--rebilly-inputErrorHoverBorder);
+    border-radius: var(--rebilly-inputErrorHoverBorderRadius);
+    box-shadow: var(--rebilly-inputErrorHoverBoxShadow);
+  }
+
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input:focus,
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select:focus {
+    font-family: var(--rebilly-inputErrorFocusFontFamily);
+    font-size: var(--rebilly-inputErrorFocusFontSize);
+    font-weight: var(--rebilly-inputErrorFocusFontWeight);
+    line-height: var(--rebilly-inputErrorFocusFontLineHeight);
+    background: var(--rebilly-inputErrorFocusColorBackground);
+    color: var(--rebilly-inputErrorFocusColorText);
+    border: var(--rebilly-inputErrorFocusBorder);
+    border-radius: var(--rebilly-inputErrorFocusBorderRadius);
+    box-shadow: var(--rebilly-inputErrorFocusBoxShadow);
+  }
+
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::placeholder {
+    color: var(--rebilly-inputErrorPlaceholderColorText);
+    font-family: var(--rebilly-inputErrorPlaceholderFontFamily);
+    font-size: var(--rebilly-inputErrorPlaceholderFontSize);
+    line-height: var(--rebilly-inputErrorPlaceholderFontLineHeight);
+    font-weight: var(--rebilly-inputErrorPlaceholderFontWeight);
+  }
+
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input::selection,
+  .rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select::selection {
+    color: var(--rebilly-inputErrorSelectionColorText);
+    background: var(--rebilly-inputErrorSelectionColorBackground);
   }
 
   .rebilly-instruments-form-field-error-wrapper {
-    margin-top: ${theme.space.xxs};
-    margin-bottom: calc(${theme.space.xxs} + ${theme.space.s});
+    margin-top: var(--rebilly-spacings-2xs);
+    margin-bottom: 0;
     padding: 0;
     list-style: none;
   }
 
   .rebilly-instruments-form-field-error-wrapper > li {
-    color: ${theme.color.errorText};
+    color: var(--rebilly-colorDanger);
     padding: 0;
   }
 `;

package/src/style/components/icons.js

@@ -1,13 +1,13 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the icons component.
 // -----------------------------------------------------------------------------
-export const icons = (theme) => `
+export const icons = () => `
   /**
   * Icons
   */
   .rebilly-instruments-icon {
-    width: ${theme.typography.lineHeight};
-    height: ${theme.typography.lineHeight};
-    fill: ${theme.color.text};
+    width: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
+    height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
+    fill: var(--rebilly-colorText);
   }
 `;

package/src/style/components/loader.js

@@ -1,3 +1,4 @@
+import { lighten } from '../utils/color-values';
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the loader component.
 // -----------------------------------------------------------------------------
@@ -14,7 +15,7 @@ export const loader = (theme) => `
     right: 0;
     justify-content: center;
     align-items: center;
-    background-color: ${theme.color.background};
+    background-color: var(--rebilly-colorBackground);
     z-index: 9000;
     transition: all 200ms;
   }
@@ -24,10 +25,8 @@ export const loader = (theme) => `
   }
 
   .rebilly-instruments-loader-spinner {
-    border: 4px solid ${theme.getComputed.color.primaryValues
-      .tint(80)
-      .hexString()};
-    border-top: 4px solid ${theme.color.primary};
+    border: 4px solid ${lighten(theme.colorPrimary, 80)};
+    border-top: 4px solid var(--rebilly-colorPrimary);
     border-radius: 50%;
     width: 40px;
     height: 40px;

package/src/style/components/methods.js

@@ -1,7 +1,7 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the methods component.
 // -----------------------------------------------------------------------------
-export const expressMethods = (theme) => `
+export const expressMethods = () => `
   /**
    * Express methods
    */
@@ -13,9 +13,11 @@ export const expressMethods = (theme) => `
   }
 
   .rebilly-instruments-express-methods.is-compact {
-    border: 1px solid ${theme.getComputed.color.mutedBorder};
-    padding: calc(${theme.space.xs} + ${theme.space.s}) ${theme.space.s} ${theme.space.s};
-    border-radius: ${theme.borderRadius};
+    border: 1px solid var(--rebilly-colorMutedBorder);
+    padding: var(--rebilly-spacings-s);
+    padding-top: calc(var(--rebilly-spacings-xs) + var(--rebilly-spacings-s));
+    padding-top: calc(var(--rebilly-fontSizeBase) + var(--rebilly-spacings-2xs));
+    border-radius: 4px;
     position: relative;
   }
 
@@ -27,10 +29,11 @@ export const expressMethods = (theme) => `
 
   .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > * {
     border-radius: 6px;
-    margin-bottom: ${theme.space.xs};
-    background: linear-gradient(110deg, ${theme.getComputed.color.mutedBorder} 0%, ${theme.color.background} 25%, ${theme.getComputed.color.mutedBorder} 50%);
+    margin-bottom: var(--rebilly-spacings-xs);
+    background: linear-gradient(110deg, var(--rebilly-colorMutedBorder) 0%, var(--rebilly-colorBackground) 25%, var(--rebilly-colorMutedBorder) 50%);
     background-size: 200% 100%;
     animation: 1.5s rebillyExpressShine linear infinite;
+    height: 44px;
   }
   .rebilly-instruments-express-methods .rebilly-instruments-express-methods-container > *:last-child {
     margin: 0;
@@ -44,7 +47,7 @@ export const expressMethods = (theme) => `
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
     flex: 1 1 0px;
     max-width: 260px;
-    margin: 0 ${theme.space.xs};
+    margin: 0 var(--rebilly-spacings-xs);
   }
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:first-child {
     margin-left: 0;
@@ -58,17 +61,17 @@ export const expressMethods = (theme) => `
   }
   .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-label {
     position: absolute;
-    top: -12px; left: 50%;
-    transform: translateX(-50%);
-    color: ${theme.color.text};
-    padding: 0 ${theme.space.s};
-    line-height: ${theme.typography.lineHeight};
-    background: ${theme.color.background};
+    top: 0; left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    color: var(--rebilly-colorText);
+    padding: var(--rebilly-spacings-2xs) var(--rebilly-spacings-s);
+    line-height: 1;
+    background: var(--rebilly-colorBackground);
     display: inline-block;
     font-weight: 500;
     min-height: auto;
     margin: 0;
-    border: 1px soplid red;
+    white-space: nowrap;
   }
 
   @media (max-width: 600px) {
@@ -77,7 +80,7 @@ export const expressMethods = (theme) => `
     }
     .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > * {
       max-width: 100%;
-      margin: 0 0 ${theme.space.xs};
+      margin: 0 0 var(--rebilly-spacings-xs);
     }
     .rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-container > *:last-child {
       margin: 0;

package/src/style/components/overlay.js

@@ -1,7 +1,7 @@
 // -----------------------------------------------------------------------------
 // This file contains all styles related to the overlay component.
 // -----------------------------------------------------------------------------
-export const overlay = (theme) => `
+export const overlay = () => `
   /**
   * Overlay
   */
@@ -15,10 +15,10 @@ export const overlay = (theme) => `
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #ffffff;
-    font-family: ${theme.typography.fontFamily};
-    font-size: calc(${theme.typography.fontSize} * 1.12);
-    line-height: ${theme.typography.lineHeight};
+    color: #FFF;
+    font-family: var(--rebilly-fontFamily);
+    font-size: calc(var(--rebilly-fontSizeBase) * 1.12);
+    line-height: var(--rebilly-fontLineHeightBase, calc(var(--rebilly-fontSizeBase) * 1.5));
     z-index: 9001
   }
 `;

package/src/style/helpers/index.js

@@ -2,50 +2,50 @@
 // This file contains all styles related to helpers.
 // -----------------------------------------------------------------------------
 
-export const helpers = (theme) => `
-    /* Helpers
-    ------------------------------------------------------------ */
-    .rebilly-instruments-helper-visually-hidden {
-      border: 0;
-      clip: rect(0 0 0 0);
-      height: 1px;
-      margin: -1px;
-      overflow: hidden;
-      padding: 0;
-      position: absolute;
-      width: 1px;
-    }
+export const helpers = () => `
+  /* Helpers
+  ------------------------------------------------------------ */
+  .rebilly-instruments-helper-visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
 
-    .rebilly-instruments-helper-mt-xxs { margin-top: ${theme.space.xxs}!important }
-    .rebilly-instruments-helper-mt-xs { margin-top: ${theme.space.xs}!important }
-    .rebilly-instruments-helper-mt-s { margin-top: ${theme.space.s}!important }
-    .rebilly-instruments-helper-mt-m { margin-top: ${theme.space.m}!important }
-    .rebilly-instruments-helper-mt-l { margin-top: ${theme.space.l}!important }
-    .rebilly-instruments-helper-mt-xl { margin-top: ${theme.space.xl}!important }
-    .rebilly-instruments-helper-mt-xxl { margin-top: ${theme.space.xxl}!important }
-    .rebilly-instruments-helper-mt-0 { margin-top: 0!important }
-    .rebilly-instruments-helper-mr-xxs { margin-right: ${theme.space.xxs}!important }
-    .rebilly-instruments-helper-mr-xs { margin-right: ${theme.space.xs}!important }
-    .rebilly-instruments-helper-mr-s { margin-right: ${theme.space.s}!important }
-    .rebilly-instruments-helper-mr-m { margin-right: ${theme.space.m}!important }
-    .rebilly-instruments-helper-mr-l { margin-right: ${theme.space.l}!important }
-    .rebilly-instruments-helper-mr-xl { margin-right: ${theme.space.xl}!important }
-    .rebilly-instruments-helper-mr-xxl { margin-right: ${theme.space.xxl}!important }
-    .rebilly-instruments-helper-mr-0 { margin-right: 0!important }
-    .rebilly-instruments-helper-mb-xxs { margin-bottom: ${theme.space.xxs}!important }
-    .rebilly-instruments-helper-mb-xs { margin-bottom: ${theme.space.xs}!important }
-    .rebilly-instruments-helper-mb-s { margin-bottom: ${theme.space.s}!important }
-    .rebilly-instruments-helper-mb-m { margin-bottom: ${theme.space.m}!important }
-    .rebilly-instruments-helper-mb-l { margin-bottom: ${theme.space.l}!important }
-    .rebilly-instruments-helper-mb-xl { margin-bottom: ${theme.space.xl}!important }
-    .rebilly-instruments-helper-mb-xxl { margin-bottom: ${theme.space.xxl}!important }
-    .rebilly-instruments-helper-mb-0 { margin-bottom: 0!important }
-    .rebilly-instruments-helper-ml-xxs { margin-left: ${theme.space.xxs}!important }
-    .rebilly-instruments-helper-ml-xs { margin-left: ${theme.space.xs}!important }
-    .rebilly-instruments-helper-ml-s { margin-left: ${theme.space.s}!important }
-    .rebilly-instruments-helper-ml-m { margin-left: ${theme.space.m}!important }
-    .rebilly-instruments-helper-ml-l { margin-left: ${theme.space.l}!important }
-    .rebilly-instruments-helper-ml-xl { margin-left: ${theme.space.xl}!important }
-    .rebilly-instruments-helper-ml-xxl { margin-left: ${theme.space.xxl}!important }
-    .rebilly-instruments-helper-ml-0 { margin-left: 0!important }
-  `;
+  .rebilly-instruments-helper-mt-xxs { margin-top: var(--rebilly-spacings-2xs) !important }
+  .rebilly-instruments-helper-mt-xs { margin-top: var(--rebilly-spacings-xs) !important }
+  .rebilly-instruments-helper-mt-s { margin-top: var(--rebilly-spacings-s) !important }
+  .rebilly-instruments-helper-mt-m { margin-top: var(--rebilly-spacings-base) !important }
+  .rebilly-instruments-helper-mt-l { margin-top: var(--rebilly-spacings-l) !important }
+  .rebilly-instruments-helper-mt-xl { margin-top: var(--rebilly-spacings-xl) !important }
+  .rebilly-instruments-helper-mt-xxl { margin-top: var(--rebilly-spacings-2xl) !important }
+  .rebilly-instruments-helper-mt-0 { margin-top: 0!important }
+  .rebilly-instruments-helper-mr-xxs { margin-right: var(--rebilly-spacings-2xs) !important }
+  .rebilly-instruments-helper-mr-xs { margin-right: var(--rebilly-spacings-xs) !important }
+  .rebilly-instruments-helper-mr-s { margin-right: var(--rebilly-spacings-s) !important }
+  .rebilly-instruments-helper-mr-m { margin-right: var(--rebilly-spacings-base) !important }
+  .rebilly-instruments-helper-mr-l { margin-right: var(--rebilly-spacings-l) !important }
+  .rebilly-instruments-helper-mr-xl { margin-right: var(--rebilly-spacings-xl) !important }
+  .rebilly-instruments-helper-mr-xxl { margin-right: var(--rebilly-spacings-2xl) !important }
+  .rebilly-instruments-helper-mr-0 { margin-right: 0!important }
+  .rebilly-instruments-helper-mb-xxs { margin-bottom: var(--rebilly-spacings-2xs) !important }
+  .rebilly-instruments-helper-mb-xs { margin-bottom: var(--rebilly-spacings-xs) !important }
+  .rebilly-instruments-helper-mb-s { margin-bottom: var(--rebilly-spacings-s) !important }
+  .rebilly-instruments-helper-mb-m { margin-bottom: var(--rebilly-spacings-base) !important }
+  .rebilly-instruments-helper-mb-l { margin-bottom: var(--rebilly-spacings-l) !important }
+  .rebilly-instruments-helper-mb-xl { margin-bottom: var(--rebilly-spacings-xl) !important }
+  .rebilly-instruments-helper-mb-xxl { margin-bottom: var(--rebilly-spacings-2xl) !important }
+  .rebilly-instruments-helper-mb-0 { margin-bottom: 0!important }
+  .rebilly-instruments-helper-ml-xxs { margin-left: var(--rebilly-spacings-2xs) !important }
+  .rebilly-instruments-helper-ml-xs { margin-left: var(--rebilly-spacings-xs) !important }
+  .rebilly-instruments-helper-ml-s { margin-left: var(--rebilly-spacings-s) !important }
+  .rebilly-instruments-helper-ml-m { margin-left: var(--rebilly-spacings-base) !important }
+  .rebilly-instruments-helper-ml-l { margin-left: var(--rebilly-spacings-l) !important }
+  .rebilly-instruments-helper-ml-xl { margin-left: var(--rebilly-spacings-xl) !important }
+  .rebilly-instruments-helper-ml-xxl { margin-left: var(--rebilly-spacings-2xl) !important }
+  .rebilly-instruments-helper-ml-0 { margin-left: 0!important }
+`;

package/src/style/index.js

@@ -1,6 +1,7 @@
 import postcss from 'postcss';
 import autoprefixer from 'autoprefixer';
 import { browserslist } from './browserslist';
+import removeEmptyAndNull from './utils/remove-empty-null';
 
 import { Theme } from './base/theme';
 import { base } from './base';
@@ -24,7 +25,7 @@ export const mainStyle = async (themeOverride) => {
     ${helpers(resolvedTheme)}
   `;
 
-  return postcss([autoprefixer(browserslist)])
+  return postcss([removeEmptyAndNull, autoprefixer(browserslist)])
     .process(style, { from: undefined })
     .then((result) => result.css);
 };

package/src/style/payment-instruments/payment-card.js

@@ -1,4 +1,4 @@
-export const paymentCard = (theme) => `
+export const paymentCard = () => `
   /**
   * Payment card
   */
@@ -6,18 +6,18 @@ export const paymentCard = (theme) => `
     display: inline-flex;
     width: 100%;
     justify-content: flex-end;
-    margin-top: ${theme.space.s} 
+    margin-top: var(--rebilly-spacings-s);
   }
 
   .rebilly-instruments-payment-card-brands figure {
-    margin: 0 0 0 ${theme.space.xxs};
+    margin: 0 0 0 var(--rebilly-spacings-2xs);
     padding: 0;
     height: 26px;
   }
 
   .rebilly-instruments-payment-card-brands figure img {
     width: 42px;
-    border-radius: ${theme.borderRadius};
+    border-radius: 4px;
   }
 
   .rebilly-instruments-modal-container.rebilly-instruments-payment-card {

package/src/style/utils/border.js

@@ -0,0 +1,34 @@
+export default class Border {
+  allStyles = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial', 'inherit'];
+
+  constructor(str) {
+    this.str = str || '';
+
+    const style = this.allStyles.find(s => this.str.includes(s));
+    const borderProps = this.str.split(style).map(a => a.trim());
+    this.border = [borderProps[0], style, borderProps[1]];
+  }
+
+  get stylePosition() {
+    let stylePosition = 0;
+    if(this.border.length === 3) {
+      stylePosition = 1;
+    } else if(this.border.length === 2) {
+      if(this.allStyles.includes(this.border[0])) {
+        stylePosition = 0;
+      } else {
+        stylePosition = 1;
+      }
+    }
+    return stylePosition;
+  }
+
+  updateColor(color) {
+    this.border[this.stylePosition + 1] = color;
+    return this;
+  }
+
+  get value() {
+    return this.border.join(' ');
+  }
+}

package/src/style/utils/color-values.js

@@ -3,7 +3,33 @@ import Values from 'values.js';
 export const colorValues = (color) => new Values(color);
 
 export function alphaColor(color, alphaValue = 1) {
-  const _alphaColor = new Values(color);
+  if(color === null) {
+    return color;
+  }
+
+  const _alphaColor = colorValues(color);
   _alphaColor.alpha = alphaValue;
   return _alphaColor.rgbString();
 }
+
+export const mutedTextColor = (color) => alphaColor(color, 0.6);
+
+export const mutedBorderColor = (color) => alphaColor(color, 0.25);
+
+export const darken = (color, percent) => {
+  if(color === null) {
+    return color;
+  }
+
+  const _color = colorValues(color);
+  return _color.shade(percent).hexString()
+}
+
+export const lighten = (color, percent) => {
+  if(color === null) {
+    return color;
+  }
+
+  const _color = colorValues(color);
+  return _color.tint(percent).hexString()
+}

package/src/style/utils/remove-empty-null.js

@@ -0,0 +1,10 @@
+import postcss from 'postcss';
+
+export default postcss.plugin('postcss-remove-empty-null', () => (root) => {
+    root.walkDecls(decl => {
+        if ((decl.value === '\'\'' ||  decl.value === '""' || decl.value.includes('null')) && decl.prop !== 'content') {
+            decl.remove();
+        }
+    });
+  }
+);