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

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

@@ -0,0 +1,674 @@
+import { mutedTextColor, mutedBorderColor, darken } 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)
+    }
+  },
+  colorMutedBorder: {
+    fallback: {
+      type: 'func',
+      value: theme => mutedBorderColor(theme.colorText)
+    }
+  },
+  colorDanger: {
+    fallback: {
+      type: 'static',
+      value: '#CD5C5C',
+    }
+  },
+
+  /** Base Fonts */
+  fontFamily: {
+    fallback: {
+      type: 'static',
+      value: 'Avenir, Helvetica, Arial, sans-serif',
+    }
+  },
+  fontSizeBase: {
+    fallback: {
+      type: 'static',
+      value: '16px',
+    }
+  },
+  fontWeightBase: {
+    fallback: {
+      type: 'static',
+      value: '400',
+    }
+  },
+  fontLineHeightBase: {
+    fallback: {
+      type: 'static',
+      value: 'initial',
+    }
+  },
+  fontSmooth: {
+    fallback: {
+      type: 'static',
+      value: 'auto',
+    }
+  },
+
+  /** Misc */
+  borderRadius: {
+    fallback: {
+      type: 'static',
+      value: '4px',
+    }
+  },
+
+  /** Headings */
+  headingFontFamily: {
+    fallback: {
+      type: 'variable',
+      value: 'fontFamily',
+    }
+  },
+  headingFontWeight: {
+    fallback: {
+      type: 'static',
+      value: '500',
+    }
+  },
+  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: 'static',
+      value: '1.5',
+    }
+  },
+  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: Alternative States */
+  buttonHoverColorBackground: {
+    fallback: {
+      type: 'func',
+      value: theme => {
+        if(theme.buttonColorBackgroundProvided) {
+          return darken(theme.buttonColorBackground, 20);
+        }
+        return darken(theme.colorPrimary, 20);
+      }
+    }
+  },
+
+  buttonActiveColorBackground: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonHoverColorBackground',
+    }
+  },
+
+  /** 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: 'static',
+      value: '1.5',
+    }
+  },
+  inputFontWeight: {
+    fallback: {
+      type: 'variable',
+      value: 'fontWeightBase',
+    }
+  },
+  inputBorder: {
+    fallback: {
+      type: 'func',
+      value: theme => `1px solid ${mutedBorderColor(theme.colorText)}`
+    }
+  },
+  inputBorderRadius: {
+    fallback: {
+      type: 'variable',
+      value: 'borderRadius',
+    }
+  },
+  inputBoxShadow: {
+    fallback: {
+      type: 'static',
+      value: 'none',
+    }
+  },
+
+  /** 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: 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: Placholder */
+  inputPlaceholderColorText: {
+    fallback: {
+      type: 'func',
+      value: theme => {
+        if(theme.inputColorTextProvided) {
+          return mutedTextColor(theme.inputColorText);
+        }
+        return mutedTextColor(theme.colorText);
+      }
+    }
+  },
+  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: Selection */
+  inputSelectionColorText: {
+    fallback: {
+      type: 'static',
+      value: 'initial',
+    }
+  },
+  inputSelectionColorBackground: {
+    fallback: {
+      type: 'static',
+      value: 'initial',
+    }
+  },
+
+  /** 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: 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: 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: 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: 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;
+  },
+
+  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;
+  }
+});