@rebilly/instruments 2.1.0-beta.0 → 3.1.0-beta.0

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

@@ -0,0 +1,804 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _colorValues = require("../utils/color-values");
+
+var _border = _interopRequireDefault(require("../utils/border"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 => (0, _colorValues.mutedTextColor)(theme.colorText)
+    }
+  },
+  colorMutedBorder: {
+    fallback: {
+      type: 'func',
+      value: theme => (0, _colorValues.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: Hover */
+  buttonHoverColorBackground: {
+    fallback: {
+      type: 'func',
+      value: theme => {
+        if (theme.buttonColorBackgroundProvided) {
+          return (0, _colorValues.darken)(theme.buttonColorBackground, 20);
+        }
+
+        return (0, _colorValues.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.default(theme.buttonBorder);
+        return buttonBorder.updateColor(theme.buttonHoverColorBackground).value;
+      }
+    }
+  },
+  buttonHoverBorderRadius: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonBorderRadius'
+    }
+  },
+  buttonHoverBoxShadow: {
+    fallback: {
+      type: 'variable',
+      value: 'buttonBoxShadow'
+    }
+  },
+
+  /** 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: 'static',
+      value: '1.5'
+    }
+  },
+  inputFontWeight: {
+    fallback: {
+      type: 'variable',
+      value: 'fontWeightBase'
+    }
+  },
+  inputBorder: {
+    fallback: {
+      type: 'func',
+      value: theme => `1px solid ${(0, _colorValues.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.default(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 (0, _colorValues.mutedTextColor)(theme.inputColorText);
+        }
+
+        return (0, _colorValues.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: 'highlight'
+    }
+  },
+
+  /** 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.default(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 (0, _colorValues.mutedTextColor)(theme.inputErrorColorText);
+        }
+
+        return (0, _colorValues.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'
+    }
+  }
+};
+
+var _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;
+  }
+});
+
+exports.default = _default;