@rebilly/instruments 4.5.0 → 4.6.0

package/src/style/base/default-theme.js

@@ -1,950 +1,955 @@
-import { mutedTextColor, darken, mutedBorderColor } from '../utils/color-values';
+import {
+    mutedTextColor,
+    darken,
+    mutedBorderColor,
+} from '../utils/color-values';
 import Border from '../utils/border';
 
 const properties = {
-  /** Base Colors */
-  colorPrimary: {
-    fallback: {
-      type: 'static',
-      value: '#0044D4',
-    }
-  },
-  colorBackground: {
-    fallback: {
-      type: 'static',
-      value: '#FFFFFF',
-    }
-  },
-  colorText: {
-    fallback: {
-      type: 'static',
-      value: '#0D2B3E',
-    }
-  },
-  colorMutedText: {
-    fallback: {
-      type: 'func',
-      value: theme => mutedTextColor(theme.colorText, 60)
-    }
-  },
-  colorMutedBorder: {
-    fallback: {
-      type: 'func',
-      value: theme => {
-        if(theme.colorTextProvided) {
-          return mutedBorderColor(theme.colorText);
-        }
-        return '#DCE3EA';
-      }
-    }
-  },
-  colorDanger: {
-    fallback: {
-      type: 'static',
-      value: '#CD5C5C',
-    }
-  },
+    /** Base Colors */
+    colorPrimary: {
+        fallback: {
+            type: 'static',
+            value: '#0044D4',
+        },
+    },
+    colorBackground: {
+        fallback: {
+            type: 'static',
+            value: '#FFFFFF',
+        },
+    },
+    colorText: {
+        fallback: {
+            type: 'static',
+            value: '#0D2B3E',
+        },
+    },
+    colorMutedText: {
+        fallback: {
+            type: 'func',
+            value: (theme) => mutedTextColor(theme.colorText, 60),
+        },
+    },
+    colorMutedBorder: {
+        fallback: {
+            type: 'func',
+            value: (theme) => {
+                if (theme.colorTextProvided) {
+                    return mutedBorderColor(theme.colorText);
+                }
+                return '#DCE3EA';
+            },
+        },
+    },
+    colorDanger: {
+        fallback: {
+            type: 'static',
+            value: '#CD5C5C',
+        },
+    },
 
-  /** Base Fonts */
-  fontFamily: {
-    fallback: {
-      type: 'static',
-      value: "-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial sans-serif",
-    }
-  },
-  fontSizeBase: {
-    fallback: {
-      type: 'static',
-      value: '16px',
-    }
-  },
-  fontWeightBase: {
-    fallback: {
-      type: 'static',
-      value: '500',
-    }
-  },
-  fontLineHeightBase: {
-    fallback: {
-      type: 'func',
-      value: theme => `calc(${theme.fontSizeBase} * 1.5)`,
-    }
-  },
-  fontSmooth: {
-    fallback: {
-      type: 'static',
-      value: 'auto',
-    }
-  },
+    /** Base Fonts */
+    fontFamily: {
+        fallback: {
+            type: 'static',
+            value: "-apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial sans-serif",
+        },
+    },
+    fontSizeBase: {
+        fallback: {
+            type: 'static',
+            value: '16px',
+        },
+    },
+    fontWeightBase: {
+        fallback: {
+            type: 'static',
+            value: '500',
+        },
+    },
+    fontLineHeightBase: {
+        fallback: {
+            type: 'func',
+            value: (theme) => `calc(${theme.fontSizeBase} * 1.5)`,
+        },
+    },
+    fontSmooth: {
+        fallback: {
+            type: 'static',
+            value: 'auto',
+        },
+    },
 
-  /** Misc */
-  borderRadius: {
-    fallback: {
-      type: 'static',
-      value: '6px',
-    }
-  },
+    /** Misc */
+    borderRadius: {
+        fallback: {
+            type: 'static',
+            value: '6px',
+        },
+    },
 
-  /** Headings */
-  headingFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'fontFamily',
-    }
-  },
-  headingFontWeight: {
-    fallback: {
-      type: 'static',
-      value: '600',
-    }
-  },
-  headingColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'colorText',
-    }
-  },
+    /** Headings */
+    headingFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'fontFamily',
+        },
+    },
+    headingFontWeight: {
+        fallback: {
+            type: 'static',
+            value: '600',
+        },
+    },
+    headingColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'colorText',
+        },
+    },
 
-  /** Buttons */
-  buttonColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'colorPrimary',
-    }
-  },
-  buttonColorText: {
-    fallback: {
-      type: 'static',
-      value: '#FFFFFF',
-    }
-  },
-  buttonFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'fontFamily',
-    }
-  },
-  buttonFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'fontSizeBase',
-    }
-  },
-  buttonFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'fontLineHeightBase',
-    }
-  },
-  buttonFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'fontWeightBase',
-    }
-  },
-  buttonBorder: {
-    fallback: {
-      type: 'static',
-      value: '1px solid transparent',
-    }
-  },
-  buttonBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'borderRadius',
-    }
-  },
-  buttonBoxShadow: {
-    fallback: {
-      type: 'static',
-      value: 'none',
-    }
-  },
+    /** Buttons */
+    buttonColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'colorPrimary',
+        },
+    },
+    buttonColorText: {
+        fallback: {
+            type: 'static',
+            value: '#FFFFFF',
+        },
+    },
+    buttonFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'fontFamily',
+        },
+    },
+    buttonFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'fontSizeBase',
+        },
+    },
+    buttonFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'fontLineHeightBase',
+        },
+    },
+    buttonFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'fontWeightBase',
+        },
+    },
+    buttonBorder: {
+        fallback: {
+            type: 'static',
+            value: '1px solid transparent',
+        },
+    },
+    buttonBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'borderRadius',
+        },
+    },
+    buttonBoxShadow: {
+        fallback: {
+            type: 'static',
+            value: 'none',
+        },
+    },
 
-  /** Buttons Secondary */
-  buttonSecondaryColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'colorBackground',
-    }
-  },
-  buttonSecondaryColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'colorPrimary',
-    }
-  },
-  buttonSecondaryFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'fontFamily',
-    }
-  },
-  buttonSecondaryFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'fontSizeBase',
-    }
-  },
-  buttonSecondaryFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'fontLineHeightBase',
-    }
-  },
-  buttonSecondaryFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'fontWeightBase',
-    }
-  },
-  buttonSecondaryBorder: {
-    fallback: {
-      type: 'func',
-      value: theme => `1px solid ${theme.colorPrimary}`,
-    }
-  },
-  buttonSecondaryBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'borderRadius',
-    }
-  },
-  buttonSecondaryBoxShadow: {
-    fallback: {
-      type: 'static',
-      value: 'none',
-    }
-  },
+    /** Buttons Secondary */
+    buttonSecondaryColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'colorBackground',
+        },
+    },
+    buttonSecondaryColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'colorPrimary',
+        },
+    },
+    buttonSecondaryFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'fontFamily',
+        },
+    },
+    buttonSecondaryFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'fontSizeBase',
+        },
+    },
+    buttonSecondaryFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'fontLineHeightBase',
+        },
+    },
+    buttonSecondaryFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'fontWeightBase',
+        },
+    },
+    buttonSecondaryBorder: {
+        fallback: {
+            type: 'func',
+            value: (theme) => `1px solid ${theme.colorPrimary}`,
+        },
+    },
+    buttonSecondaryBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'borderRadius',
+        },
+    },
+    buttonSecondaryBoxShadow: {
+        fallback: {
+            type: 'static',
+            value: 'none',
+        },
+    },
 
-  /** Buttons: Hover */
-  buttonHoverColorBackground: {
-    fallback: {
-      type: 'func',
-      value: theme => {
-        if(theme.buttonColorBackgroundProvided) {
-          return darken(theme.buttonColorBackground, 20);
-        }
-        return darken(theme.colorPrimary, 20);
-      }
-    }
-  },
-  buttonHoverColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonColorText',
-    }
-  },
-  buttonHoverFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonFontFamily',
-    }
-  },
-  buttonHoverFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonFontSize',
-    }
-  },
-  buttonHoverFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonFontLineHeight',
-    }
-  },
-  buttonHoverFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonFontWeight',
-    }
-  },
-  buttonHoverBorder: {
-    fallback: {
-      type: 'func',
-      value: theme => {
-        if(theme.buttonBorderProvided) {
-          return theme.buttonBorder;
-        }
-        const buttonBorder = new Border(theme.buttonBorder);
-        return buttonBorder.updateColor(theme.buttonHoverColorBackground).value;
-      }
-    }
-  },
-  buttonHoverBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonBorderRadius',
-    }
-  },
-  buttonHoverBoxShadow: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonBoxShadow',
-    }
-  },
+    /** Buttons: Hover */
+    buttonHoverColorBackground: {
+        fallback: {
+            type: 'func',
+            value: (theme) => {
+                if (theme.buttonColorBackgroundProvided) {
+                    return darken(theme.buttonColorBackground, 20);
+                }
+                return darken(theme.colorPrimary, 20);
+            },
+        },
+    },
+    buttonHoverColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonColorText',
+        },
+    },
+    buttonHoverFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonFontFamily',
+        },
+    },
+    buttonHoverFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonFontSize',
+        },
+    },
+    buttonHoverFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonFontLineHeight',
+        },
+    },
+    buttonHoverFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonFontWeight',
+        },
+    },
+    buttonHoverBorder: {
+        fallback: {
+            type: 'func',
+            value: (theme) => {
+                if (theme.buttonBorderProvided) {
+                    return theme.buttonBorder;
+                }
+                const buttonBorder = new Border(theme.buttonBorder);
+                return buttonBorder.updateColor(
+                    theme.buttonHoverColorBackground,
+                ).value;
+            },
+        },
+    },
+    buttonHoverBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonBorderRadius',
+        },
+    },
+    buttonHoverBoxShadow: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonBoxShadow',
+        },
+    },
 
-  /** Buttons Secondary: Hover */
-  buttonSecondaryHoverColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'colorBackground'
-    }
-  },
-  buttonSecondaryHoverColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryColorText',
-    }
-  },
-  buttonSecondaryHoverFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryFontFamily',
-    }
-  },
-  buttonSecondaryHoverFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryFontSize',
-    }
-  },
-  buttonSecondaryHoverFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryFontLineHeight',
-    }
-  },
-  buttonSecondaryHoverFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryFontWeight',
-    }
-  },
-  buttonSecondaryHoverBorder: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryBorder',
-    }
-  },
-  buttonSecondaryHoverBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryBorderRadius',
-    }
-  },
-  buttonSecondaryHoverBoxShadow: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryBoxShadow',
-    }
-  },
-  
-  /** Buttons: Active */
-  buttonActiveColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverColorBackground',
-    }
-  },
-  buttonActiveColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverColorText',
-    }
-  },
-  buttonActiveFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverFontFamily',
-    }
-  },
-  buttonActiveFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverFontSize',
-    }
-  },
-  buttonActiveFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverFontLineHeight',
-    }
-  },
-  buttonActiveFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverFontWeight',
-    }
-  },
-  buttonActiveBorder: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverBorder'
-    }
-  },
-  buttonActiveBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverBorderRadius',
-    }
-  },
-  buttonActiveBoxShadow: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonHoverBoxShadow',
-    }
-  },
+    /** Buttons Secondary: Hover */
+    buttonSecondaryHoverColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'colorBackground',
+        },
+    },
+    buttonSecondaryHoverColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryColorText',
+        },
+    },
+    buttonSecondaryHoverFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryFontFamily',
+        },
+    },
+    buttonSecondaryHoverFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryFontSize',
+        },
+    },
+    buttonSecondaryHoverFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryFontLineHeight',
+        },
+    },
+    buttonSecondaryHoverFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryFontWeight',
+        },
+    },
+    buttonSecondaryHoverBorder: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryBorder',
+        },
+    },
+    buttonSecondaryHoverBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryBorderRadius',
+        },
+    },
+    buttonSecondaryHoverBoxShadow: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryBoxShadow',
+        },
+    },
 
-  /** Buttons Secondary: Active */
-  buttonSecondaryActiveColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverColorBackground',
-    }
-  },
-  buttonSecondaryActiveColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverColorText',
-    }
-  },
-  buttonSecondaryActiveFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverFontFamily',
-    }
-  },
-  buttonSecondaryActiveFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverFontSize',
-    }
-  },
-  buttonSecondaryActiveFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverFontLineHeight',
-    }
-  },
-  buttonSecondaryActiveFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverFontWeight',
-    }
-  },
-  buttonSecondaryActiveBorder: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverBorder'
-    }
-  },
-  buttonSecondaryActiveBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverBorderRadius',
-    }
-  },
-  buttonSecondaryActiveBoxShadow: {
-    fallback: {
-      type: 'variable',
-      value: 'buttonSecondaryHoverBoxShadow',
-    }
-  },
+    /** Buttons: Active */
+    buttonActiveColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverColorBackground',
+        },
+    },
+    buttonActiveColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverColorText',
+        },
+    },
+    buttonActiveFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverFontFamily',
+        },
+    },
+    buttonActiveFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverFontSize',
+        },
+    },
+    buttonActiveFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverFontLineHeight',
+        },
+    },
+    buttonActiveFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverFontWeight',
+        },
+    },
+    buttonActiveBorder: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverBorder',
+        },
+    },
+    buttonActiveBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverBorderRadius',
+        },
+    },
+    buttonActiveBoxShadow: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonHoverBoxShadow',
+        },
+    },
 
-  /** Inputs: Base */
-  inputColorBackground: {
-    fallback: {
-      type: 'static',
-      value: 'transparent',
-    }
-  },
-  inputColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'colorText'
-    }
-  },
-  inputFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'fontFamily',
-    }
-  },
-  inputFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'fontSizeBase',
-    }
-  },
-  inputFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'fontLineHeightBase',
-    }
-  },
-  inputFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'fontWeightBase',
-    }
-  },
-  inputBorder: {
-    fallback: {
-      type: 'func',
-      value: theme => `1px solid ${darken(theme.colorMutedBorder, 4)}`
-    }
-  },
-  inputBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'borderRadius',
-    }
-  },
-  inputBoxShadow: {
-    fallback: {
-      type: 'static',
-      value: 'none',
-    }
-  },
+    /** Buttons Secondary: Active */
+    buttonSecondaryActiveColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverColorBackground',
+        },
+    },
+    buttonSecondaryActiveColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverColorText',
+        },
+    },
+    buttonSecondaryActiveFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverFontFamily',
+        },
+    },
+    buttonSecondaryActiveFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverFontSize',
+        },
+    },
+    buttonSecondaryActiveFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverFontLineHeight',
+        },
+    },
+    buttonSecondaryActiveFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverFontWeight',
+        },
+    },
+    buttonSecondaryActiveBorder: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverBorder',
+        },
+    },
+    buttonSecondaryActiveBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverBorderRadius',
+        },
+    },
+    buttonSecondaryActiveBoxShadow: {
+        fallback: {
+            type: 'variable',
+            value: 'buttonSecondaryHoverBoxShadow',
+        },
+    },
 
-  /** Inputs: Hover */
-  inputHoverColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'inputColorBackground',
-    }
-  },
-  inputHoverColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'inputColorText'
-    }
-  },
-  inputHoverFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontFamily',
-    }
-  },
-  inputHoverFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontSize',
-    }
-  },
-  inputHoverFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontLineHeight',
-    }
-  },
-  inputHoverFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontWeight',
-    }
-  },
-  inputHoverBorder: {
-    fallback: {
-      type: 'variable',
-      value: 'inputBorder',
-    }
-  },
-  inputHoverBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'inputBorderRadius',
-    }
-  },
-  inputHoverBoxShadow: {
-    fallback: {
-      type: 'variable',
-      value: 'inputBoxShadow',
-    }
-  },
+    /** Inputs: Base */
+    inputColorBackground: {
+        fallback: {
+            type: 'static',
+            value: 'transparent',
+        },
+    },
+    inputColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'colorText',
+        },
+    },
+    inputFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'fontFamily',
+        },
+    },
+    inputFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'fontSizeBase',
+        },
+    },
+    inputFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'fontLineHeightBase',
+        },
+    },
+    inputFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'fontWeightBase',
+        },
+    },
+    inputBorder: {
+        fallback: {
+            type: 'func',
+            value: (theme) => `1px solid ${darken(theme.colorMutedBorder, 4)}`,
+        },
+    },
+    inputBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'borderRadius',
+        },
+    },
+    inputBoxShadow: {
+        fallback: {
+            type: 'static',
+            value: 'none',
+        },
+    },
 
-  /** Inputs: Focus */
-  inputFocusColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'inputHoverColorBackground',
-    }
-  },
-  inputFocusColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'inputHoverColorText'
-    }
-  },
-  inputFocusFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'inputHoverFontFamily',
-    }
-  },
-  inputFocusFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'inputHoverFontSize',
-    }
-  },
-  inputFocusFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputHoverFontLineHeight',
-    }
-  },
-  inputFocusFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputHoverFontWeight',
-    }
-  },
-  inputFocusBorder: {
-    fallback: {
-      type: 'func',
-      value: theme => {
-        if(theme.inputHoverBorderProvided) {
-          return theme.inputHoverBorder;
-        }
-        const inputBorder = new Border(theme.inputBorder);
-        return inputBorder.updateColor(theme.colorPrimary).value;
-      }
-    }
-  },
-  inputFocusBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'inputHoverBorderRadius',
-    }
-  },
-  inputFocusBoxShadow: {
-    fallback: {
-      type: 'func',
-      value: theme => `0 0 0 1px ${theme.colorPrimary}`,
-    }
-  },
+    /** Inputs: Hover */
+    inputHoverColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'inputColorBackground',
+        },
+    },
+    inputHoverColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'inputColorText',
+        },
+    },
+    inputHoverFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontFamily',
+        },
+    },
+    inputHoverFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontSize',
+        },
+    },
+    inputHoverFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontLineHeight',
+        },
+    },
+    inputHoverFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontWeight',
+        },
+    },
+    inputHoverBorder: {
+        fallback: {
+            type: 'variable',
+            value: 'inputBorder',
+        },
+    },
+    inputHoverBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'inputBorderRadius',
+        },
+    },
+    inputHoverBoxShadow: {
+        fallback: {
+            type: 'variable',
+            value: 'inputBoxShadow',
+        },
+    },
 
-  /** Inputs: Placholder */
-  inputPlaceholderColorText: {
-    fallback: {
-      type: 'func',
-      value: theme => {
-        if(theme.inputColorTextProvided) {
-          return mutedTextColor(theme.inputColorText);
-        }
-        return theme.colorMutedText;
-      }
-    }
-  },
-  inputPlaceholderFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontFamily',
-    }
-  },
-  inputPlaceholderFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontSize',
-    }
-  },
-  inputPlaceholderFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontLineHeight',
-    }
-  },
-  inputPlaceholderFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontWeight',
-    }
-  },
+    /** Inputs: Focus */
+    inputFocusColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'inputHoverColorBackground',
+        },
+    },
+    inputFocusColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'inputHoverColorText',
+        },
+    },
+    inputFocusFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'inputHoverFontFamily',
+        },
+    },
+    inputFocusFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'inputHoverFontSize',
+        },
+    },
+    inputFocusFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputHoverFontLineHeight',
+        },
+    },
+    inputFocusFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputHoverFontWeight',
+        },
+    },
+    inputFocusBorder: {
+        fallback: {
+            type: 'func',
+            value: (theme) => {
+                if (theme.inputHoverBorderProvided) {
+                    return theme.inputHoverBorder;
+                }
+                const inputBorder = new Border(theme.inputBorder);
+                return inputBorder.updateColor(theme.colorPrimary).value;
+            },
+        },
+    },
+    inputFocusBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'inputHoverBorderRadius',
+        },
+    },
+    inputFocusBoxShadow: {
+        fallback: {
+            type: 'func',
+            value: (theme) => `0 0 0 1px ${theme.colorPrimary}`,
+        },
+    },
 
-  /** Inputs: Selection */
-  inputSelectionColorText: {
-    fallback: {
-      type: 'static',
-      value: 'initial',
-    }
-  },
-  inputSelectionColorBackground: {
-    fallback: {
-      type: 'static',
-      value: 'highlight',
-    }
-  },
+    /** Inputs: Placholder */
+    inputPlaceholderColorText: {
+        fallback: {
+            type: 'func',
+            value: (theme) => {
+                if (theme.inputColorTextProvided) {
+                    return mutedTextColor(theme.inputColorText);
+                }
+                return theme.colorMutedText;
+            },
+        },
+    },
+    inputPlaceholderFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontFamily',
+        },
+    },
+    inputPlaceholderFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontSize',
+        },
+    },
+    inputPlaceholderFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontLineHeight',
+        },
+    },
+    inputPlaceholderFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontWeight',
+        },
+    },
 
-  /** Inputs Error */
-  inputErrorColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'inputColorBackground',
-    }
-  },
-  inputErrorColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'colorDanger'
-    }
-  },
-  inputErrorFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontFamily',
-    }
-  },
-  inputErrorFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontSize',
-    }
-  },
-  inputErrorFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontLineHeight',
-    }
-  },
-  inputErrorFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputFontWeight',
-    }
-  },
-  inputErrorBorder: {
-    fallback: {
-      type: 'func',
-      value: theme => {
-        if(theme.inputBorderProvided) {
-          const inputBorder = new Border(theme.inputBorder);
-          return inputBorder.updateColor(theme.colorDanger).value;
-        }
-        return `1px solid ${theme.colorDanger}`;
-      }
-    }
-  },
-  inputErrorBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'inputBorderRadius',
-    }
-  },
-  inputErrorBoxShadow: {
-    fallback: {
-      type: 'variable',
-      value: 'inputBoxShadow',
-    }
-  },
+    /** Inputs: Selection */
+    inputSelectionColorText: {
+        fallback: {
+            type: 'static',
+            value: 'initial',
+        },
+    },
+    inputSelectionColorBackground: {
+        fallback: {
+            type: 'static',
+            value: 'highlight',
+        },
+    },
 
-  /** Inputs Error: Hover */
-  inputErrorHoverColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorColorBackground',
-    }
-  },
-  inputErrorHoverColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorColorText'
-    }
-  },
-  inputErrorHoverFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorFontFamily',
-    }
-  },
-  inputErrorHoverFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorFontSize',
-    }
-  },
-  inputErrorHoverFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorFontLineHeight',
-    }
-  },
-  inputErrorHoverFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorFontWeight',
-    }
-  },
-  inputErrorHoverBorder: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorBorder'
-    }
-  },
-  inputErrorHoverBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorBorderRadius',
-    }
-  },
-  inputErrorHoverBoxShadow: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorBoxShadow',
-    }
-  },
+    /** Inputs Error */
+    inputErrorColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'inputColorBackground',
+        },
+    },
+    inputErrorColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'colorDanger',
+        },
+    },
+    inputErrorFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontFamily',
+        },
+    },
+    inputErrorFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontSize',
+        },
+    },
+    inputErrorFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontLineHeight',
+        },
+    },
+    inputErrorFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputFontWeight',
+        },
+    },
+    inputErrorBorder: {
+        fallback: {
+            type: 'func',
+            value: (theme) => {
+                if (theme.inputBorderProvided) {
+                    const inputBorder = new Border(theme.inputBorder);
+                    return inputBorder.updateColor(theme.colorDanger).value;
+                }
+                return `1px solid ${theme.colorDanger}`;
+            },
+        },
+    },
+    inputErrorBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'inputBorderRadius',
+        },
+    },
+    inputErrorBoxShadow: {
+        fallback: {
+            type: 'variable',
+            value: 'inputBoxShadow',
+        },
+    },
 
-  /** Inputs Error: Focus */
-  inputErrorFocusColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverColorBackground',
-    }
-  },
-  inputErrorFocusColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverColorText'
-    }
-  },
-  inputErrorFocusFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverFontFamily',
-    }
-  },
-  inputErrorFocusFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverFontSize',
-    }
-  },
-  inputErrorFocusFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverFontLineHeight',
-    }
-  },
-  inputErrorFocusFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverFontWeight',
-    }
-  },
-  inputErrorFocusBorder: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverBorder'
-    }
-  },
-  inputErrorFocusBorderRadius: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverBorderRadius',
-    }
-  },
-  inputErrorFocusBoxShadow: {
-    fallback: {
-      type: 'variable',
-      value: 'inputErrorHoverBoxShadow',
-    }
-  },
+    /** Inputs Error: Hover */
+    inputErrorHoverColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorColorBackground',
+        },
+    },
+    inputErrorHoverColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorColorText',
+        },
+    },
+    inputErrorHoverFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorFontFamily',
+        },
+    },
+    inputErrorHoverFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorFontSize',
+        },
+    },
+    inputErrorHoverFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorFontLineHeight',
+        },
+    },
+    inputErrorHoverFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorFontWeight',
+        },
+    },
+    inputErrorHoverBorder: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorBorder',
+        },
+    },
+    inputErrorHoverBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorBorderRadius',
+        },
+    },
+    inputErrorHoverBoxShadow: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorBoxShadow',
+        },
+    },
 
-  /** Inputs Error: Placholder */
-  inputErrorPlaceholderColorText: {
-    fallback: {
-      type: 'func',
-      value: theme => {
-        if(theme.inputErrorColorTextProvided) {
-          return mutedTextColor(theme.inputErrorColorText);
-        }
-        return mutedTextColor(theme.colorDanger);
-      }
-    }
-  },
-  inputErrorPlaceholderFontFamily: {
-    fallback: {
-      type: 'variable',
-      value: 'inputPlaceholderFontFamily',
-    }
-  },
-  inputErrorPlaceholderFontSize: {
-    fallback: {
-      type: 'variable',
-      value: 'inputPlaceholderFontSize',
-    }
-  },
-  inputErrorPlaceholderFontLineHeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputPlaceholderFontLineHeight',
-    }
-  },
-  inputErrorPlaceholderFontWeight: {
-    fallback: {
-      type: 'variable',
-      value: 'inputPlaceholderFontWeight',
-    }
-  },
+    /** Inputs Error: Focus */
+    inputErrorFocusColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverColorBackground',
+        },
+    },
+    inputErrorFocusColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverColorText',
+        },
+    },
+    inputErrorFocusFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverFontFamily',
+        },
+    },
+    inputErrorFocusFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverFontSize',
+        },
+    },
+    inputErrorFocusFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverFontLineHeight',
+        },
+    },
+    inputErrorFocusFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverFontWeight',
+        },
+    },
+    inputErrorFocusBorder: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverBorder',
+        },
+    },
+    inputErrorFocusBorderRadius: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverBorderRadius',
+        },
+    },
+    inputErrorFocusBoxShadow: {
+        fallback: {
+            type: 'variable',
+            value: 'inputErrorHoverBoxShadow',
+        },
+    },
 
-  /** Inputs Error: Selection */
-  inputErrorSelectionColorText: {
-    fallback: {
-      type: 'variable',
-      value: 'inputSelectionColorText',
-    }
-  },
-  inputErrorSelectionColorBackground: {
-    fallback: {
-      type: 'variable',
-      value: 'inputSelectionColorBackground',
-    }
-  },
+    /** Inputs Error: Placholder */
+    inputErrorPlaceholderColorText: {
+        fallback: {
+            type: 'func',
+            value: (theme) => {
+                if (theme.inputErrorColorTextProvided) {
+                    return mutedTextColor(theme.inputErrorColorText);
+                }
+                return mutedTextColor(theme.colorDanger);
+            },
+        },
+    },
+    inputErrorPlaceholderFontFamily: {
+        fallback: {
+            type: 'variable',
+            value: 'inputPlaceholderFontFamily',
+        },
+    },
+    inputErrorPlaceholderFontSize: {
+        fallback: {
+            type: 'variable',
+            value: 'inputPlaceholderFontSize',
+        },
+    },
+    inputErrorPlaceholderFontLineHeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputPlaceholderFontLineHeight',
+        },
+    },
+    inputErrorPlaceholderFontWeight: {
+        fallback: {
+            type: 'variable',
+            value: 'inputPlaceholderFontWeight',
+        },
+    },
 
-  /** Labels */
-  labels: {
-    fallback: {
-      type: 'static',
-      value: 'floating',
-    }
-  },
-}
+    /** Inputs Error: Selection */
+    inputErrorSelectionColorText: {
+        fallback: {
+            type: 'variable',
+            value: 'inputSelectionColorText',
+        },
+    },
+    inputErrorSelectionColorBackground: {
+        fallback: {
+            type: 'variable',
+            value: 'inputSelectionColorBackground',
+        },
+    },
 
+    /** Labels */
+    labels: {
+        fallback: {
+            type: 'static',
+            value: 'floating',
+        },
+    },
+};
 
 export default new Proxy(properties, {
-  get(obj, prop, receiver) {
-    if(prop in obj) {
-      if(obj[prop].value) {
-        return obj[prop].value;
-      }
-      const { type, value } = obj[prop].fallback;
-      if(type === 'static') {
-        return value;
-      }
-      if(type === 'variable') {
-        return `var(--rebilly-${value})`;
-      }
-      if(type === 'func') {
-        return value(receiver);
-      }
-    }
-    if(prop.endsWith('Provided')) {
-      const target = prop.replace('Provided', '');
-      if(target in obj) {
-        return obj[target].isProvided;
-      }
-    }
-    return undefined;
-  },
+    get(obj, prop, receiver) {
+        if (prop in obj) {
+            if (obj[prop].value) {
+                return obj[prop].value;
+            }
+            const { type, value } = obj[prop].fallback;
+            if (type === 'static') {
+                return value;
+            }
+            if (type === 'variable') {
+                return `var(--rebilly-${value})`;
+            }
+            if (type === 'func') {
+                return value(receiver);
+            }
+        }
+        if (prop.endsWith('Provided')) {
+            const target = prop.replace('Provided', '');
+            if (target in obj) {
+                return obj[target].isProvided;
+            }
+        }
+        return undefined;
+    },
 
-  set: (obj, prop, value) => {
-    if(!(prop in obj) || !value) {
-      throw new Error(`Invalid theme option provided: ${prop}`);
-    }
+    set: (obj, prop, value) => {
+        if (!(prop in obj) || !value) {
+            throw new Error(`Invalid theme option provided: ${prop}`);
+        }
 
-    obj[prop].value = value;
-    obj[prop].isProvided = true;
-    return true;
-  }
-});
+        obj[prop].value = value;
+        obj[prop].isProvided = true;
+        return true;
+    },
+});