@rebilly/instruments 4.8.0 → 4.8.2

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

@@ -1,955 +0,0 @@
-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 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',
-        },
-    },
-
-    /** 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 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 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: 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: 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: 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 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: 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(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;
-    },
-});