@wavv/ui 2.2.2-alpha.4 → 2.2.2-alpha.6

package/build/theme/core/light/light.js

@@ -0,0 +1,456 @@
+import common, { button as index_js_button } from "../../common/index.js";
+import colors from "../colors.js";
+import lightScale from "./lightScale.js";
+const white = '#FFFFFF';
+const light_light = {
+    ...common,
+    ...lightScale,
+    name: 'light',
+    button: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: white,
+                hover: white,
+                active: white
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.brand,
+                hover: colors.brandShade1,
+                active: colors.brandShade2
+            },
+            outlineBackground: {
+                default: colors.brandTint0,
+                hover: colors.brandTint1,
+                active: colors.brandTint2
+            },
+            border: {
+                default: colors.brand,
+                hover: colors.brandShade1,
+                active: colors.brandShade2
+            },
+            divider: lightScale.scale2
+        },
+        secondary: {
+            color: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: lightScale.scale1,
+                hover: lightScale.scale2,
+                active: lightScale.scale3
+            },
+            outlineBackground: {
+                default: lightScale.scale1,
+                hover: lightScale.scale2,
+                active: lightScale.scale3
+            },
+            border: {
+                default: lightScale.scale2,
+                hover: lightScale.scale2,
+                active: lightScale.scale2
+            },
+            divider: lightScale.scale2
+        },
+        positive: {
+            color: {
+                default: white,
+                hover: white,
+                active: white
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.success,
+                hover: colors.successShade1,
+                active: colors.successShade2
+            },
+            outlineBackground: {
+                default: colors.successTint0,
+                hover: colors.successTint1,
+                active: colors.successTint2
+            },
+            border: {
+                default: colors.success,
+                hover: colors.successShade1,
+                active: colors.successShade2
+            },
+            divider: lightScale.scale2
+        },
+        negative: {
+            color: {
+                default: white,
+                hover: white,
+                active: white
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.error,
+                hover: colors.errorShade1,
+                active: colors.errorShade2
+            },
+            outlineBackground: {
+                default: colors.errorTint0,
+                hover: colors.errorTint1,
+                active: colors.errorTint2
+            },
+            border: {
+                default: colors.error,
+                hover: colors.errorShade1,
+                active: colors.errorShade2
+            },
+            divider: lightScale.scale2
+        },
+        caution: {
+            color: {
+                default: white,
+                hover: white,
+                active: white
+            },
+            outlineColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            background: {
+                default: colors.warning,
+                hover: colors.warningShade1,
+                active: colors.warningShade2
+            },
+            outlineBackground: {
+                default: colors.warningTint0,
+                hover: colors.warningTint1,
+                active: colors.warningTint2
+            },
+            border: {
+                default: colors.warning,
+                hover: colors.warningShade1,
+                active: colors.warningShade2
+            },
+            divider: lightScale.scale2
+        },
+        subtle: {
+            color: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            },
+            outlineColor: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            },
+            secondaryColor: {
+                default: lightScale.scale10,
+                hover: lightScale.scale10,
+                active: lightScale.scale10
+            },
+            positiveColor: {
+                default: colors.success,
+                hover: colors.success,
+                active: colors.success
+            },
+            negativeColor: {
+                default: colors.error,
+                hover: colors.error,
+                active: colors.error
+            },
+            cautionColor: {
+                default: colors.warning,
+                hover: colors.warning,
+                active: colors.warning
+            },
+            background: {
+                default: 'transparent',
+                hover: lightScale.scale1,
+                active: lightScale.scale2
+            },
+            outlineBackground: {
+                default: 'transparent',
+                hover: lightScale.scale1,
+                active: lightScale.scale2
+            },
+            border: {
+                default: 'transparent',
+                hover: lightScale.scale2,
+                active: lightScale.scale2
+            },
+            divider: lightScale.scale2
+        },
+        link: {
+            color: {
+                default: colors.brand,
+                hover: colors.brandShade1,
+                active: colors.brandShade2
+            },
+            outlineColor: {
+                default: colors.brand,
+                hover: colors.brandShade1,
+                active: colors.brandShade2
+            },
+            secondaryColor: {
+                default: lightScale.scale8,
+                hover: lightScale.scale9,
+                active: lightScale.scale10
+            },
+            positiveColor: {
+                default: colors.success,
+                hover: colors.successShade1,
+                active: colors.successShade2
+            },
+            negativeColor: {
+                default: colors.error,
+                hover: colors.errorShade1,
+                active: colors.errorShade2
+            },
+            cautionColor: {
+                default: colors.warning,
+                hover: colors.warningShade1,
+                active: colors.warningShade2
+            },
+            background: {
+                default: 'transparent',
+                hover: 'transparent',
+                active: 'transparent'
+            },
+            outlineBackground: {
+                default: 'transparent',
+                hover: 'transparent',
+                active: 'transparent'
+            },
+            border: {
+                default: 'transparent',
+                hover: 'transparent',
+                active: 'transparent'
+            },
+            divider: 'transparent'
+        },
+        disabled: {
+            color: {
+                default: lightScale.scale4,
+                hover: lightScale.scale4,
+                active: lightScale.scale4
+            },
+            outlineColor: {
+                default: lightScale.scale4,
+                hover: lightScale.scale4,
+                active: lightScale.scale4
+            },
+            background: {
+                default: lightScale.scale1,
+                hover: lightScale.scale1,
+                active: lightScale.scale1
+            },
+            outlineBackground: {
+                default: lightScale.scale0,
+                hover: lightScale.scale0,
+                active: lightScale.scale0
+            },
+            border: {
+                default: lightScale.scale1,
+                hover: lightScale.scale1,
+                active: lightScale.scale1
+            },
+            divider: lightScale.scale1
+        },
+        color: {
+            default: white
+        }
+    },
+    calendar: {
+        background: {
+            container: colors.contrast10,
+            hover: lightScale.scale1,
+            active: colors.brand,
+            activeHover: colors.brandShade1,
+            activeRange: colors.brandTint4
+        },
+        color: {
+            disabled: lightScale.scale4,
+            default: lightScale.scale10,
+            active: colors.contrast10,
+            current: colors.brand,
+            outside: lightScale.scale6,
+            weekday: lightScale.scale8,
+            monthYear: lightScale.scale8,
+            iconDefault: lightScale.scale6,
+            iconDisabled: lightScale.scale2,
+            iconHover: lightScale.scale10
+        }
+    },
+    defaultBorder: `1px solid ${lightScale.scale1}`,
+    formControl: {
+        color: {
+            default: lightScale.scale8,
+            hover: lightScale.scale10,
+            active: colors.brand,
+            activeHover: colors.brandShade1,
+            disabled: lightScale.scale4
+        }
+    },
+    input: {
+        borderRadius: 4,
+        background: {
+            default: lightScale.scale0,
+            hover: lightScale.scale1,
+            focused: lightScale.scale1,
+            disabled: lightScale.scale0,
+            invalid: colors.errorTint2,
+            invalidHover: colors.errorTint1
+        },
+        color: {
+            default: lightScale.scale10,
+            disabled: lightScale.scale4,
+            placeholder: lightScale.scale6,
+            description: lightScale.scale6,
+            descriptionError: colors.error
+        },
+        borderColor: {
+            default: lightScale.scale6,
+            hover: lightScale.scale8,
+            focused: colors.brand,
+            disabled: lightScale.scale4,
+            error: colors.error
+        },
+        labelColor: {
+            default: lightScale.scale8,
+            hover: lightScale.scale8,
+            filled: lightScale.scale6,
+            focused: colors.brand,
+            disabled: lightScale.scale4
+        }
+    },
+    menu: {
+        background: lightScale.background1
+    },
+    menuItem: {
+        borderColor: colors.brand,
+        background: {
+            active: lightScale.scale0,
+            hover: lightScale.scale1,
+            inactive: 'transparent'
+        },
+        color: {
+            active: lightScale.scale10,
+            hover: lightScale.scale10,
+            inactive: lightScale.scale6
+        }
+    },
+    modal: {
+        background: colors.contrast10,
+        color: {
+            header: lightScale.scale10,
+            body: lightScale.scale6
+        }
+    },
+    options: {
+        background: colors.contrast10,
+        backdropFilter: void 0
+    },
+    optionItem: {
+        background: {
+            hover: lightScale.scale0,
+            active: lightScale.scale1,
+            inactive: 'transparent'
+        },
+        color: {
+            active: lightScale.scale10,
+            inactive: lightScale.scale10,
+            accent: colors.brand
+        }
+    },
+    table: {
+        color: {
+            header: lightScale.scale6,
+            body: lightScale.scale10
+        },
+        backgroundLevel: {
+            0: lightScale.background0,
+            1: lightScale.background1,
+            2: lightScale.background2,
+            3: lightScale.background3,
+            4: lightScale.background4,
+            5: lightScale.background5
+        },
+        borderColor: lightScale.scale1
+    },
+    tag: {
+        default: {
+            background: lightScale.scale1,
+            backgroundHover: lightScale.scale2,
+            backgroundDisabled: lightScale.scale0
+        },
+        error: {
+            background: colors.errorTint2,
+            backgroundHover: colors.error,
+            backgroundDisabled: colors.errorTint1
+        },
+        success: {
+            background: colors.successTint2,
+            backgroundHover: colors.success,
+            backgroundDisabled: colors.successTint1
+        },
+        warning: {
+            background: colors.warningTint2,
+            backgroundHover: colors.warning,
+            backgroundDisabled: colors.warningTint1
+        }
+    },
+    toast: {
+        color: lightScale.scale10,
+        background: {
+            default: '#F2F3F4',
+            info: '#CCE3FD',
+            success: '#CCF3D9',
+            warning: '#FFEBCC',
+            error: '#FFDFE1'
+        },
+        border: {
+            default: lightScale.scale8,
+            info: colors.brand,
+            success: colors.success,
+            warning: colors.warning,
+            error: colors.error
+        }
+    },
+    toggle: {
+        slider: colors.contrast10
+    },
+    tooltip: {
+        background: '#FFF',
+        color: {
+            default: lightScale.scale10,
+            subtext: lightScale.scale6
+        }
+    },
+    editor: {
+        highlight: {
+            yellow: colors.alert,
+            blue: colors.brandDarkShade1,
+            red: colors.error,
+            green: colors.success,
+            orange: colors.warning
+        }
+    }
+};
+const light = light_light;
+export { light as default };

package/build/theme/core/light/lightScale.js

@@ -0,0 +1,35 @@
+import colors from "../colors.js";
+const scale0 = colors.grayscale0;
+const scale1 = colors.grayscale1;
+const scale2 = colors.grayscale2;
+const scale3 = colors.grayscale3;
+const scale4 = colors.grayscale4;
+const scale5 = colors.grayscale5;
+const scale6 = colors.grayscale6;
+const scale7 = colors.grayscale7;
+const scale8 = colors.grayscale8;
+const scale9 = colors.grayscale9;
+const scale10 = colors.grayscale10;
+const lightScale = {
+    scale0,
+    scale1,
+    scale2,
+    scale3,
+    scale4,
+    scale5,
+    scale6,
+    scale7,
+    scale8,
+    scale9,
+    scale10,
+    accent: colors.brand,
+    accentShade: colors.brandShade1,
+    background0: '#FFFFFF',
+    background1: '#F2F3F4',
+    background2: '#E6E9EB',
+    background3: '#CCD2D6',
+    background4: '#B3BCC2',
+    background5: '#99A5AD'
+};
+const light_lightScale = lightScale;
+export { light_lightScale as default };

package/build/theme/eighties/colors.js

@@ -0,0 +1,78 @@
+import { transparentize } from "polished";
+const brand = '#40E0D0';
+const brandDark = '#FF00A8';
+const error = '#FF3366';
+const warning = '#FFD23F';
+const alertColor = '#FFFF66';
+const success = '#0ECD9D';
+const grayVal = '#2B003E';
+const white = '#FFFDF2';
+const colors = {
+    logo1: brand,
+    logo2: brandDark,
+    logo3: '#8A2BE2',
+    brand,
+    brandShade1: '#E00096',
+    brandShade2: '#C00084',
+    brandDark,
+    brandDarkShade1: '#36C7B8',
+    brandTint0: transparentize(0.95, brand),
+    brandTint1: transparentize(0.9, brand),
+    brandTint2: transparentize(0.8, brand),
+    brandTint3: transparentize(0.7, brand),
+    brandTint4: transparentize(0.6, brand),
+    brandBackground0: '#2C073B',
+    brandBackground1: '#360948',
+    brandBackground2: '#400A55',
+    brandBackground3: '#4A0C62',
+    brandBackground4: '#540D6E',
+    brandBackground5: '#6F3386',
+    error,
+    errorShade1: '#E02E5C',
+    errorShade2: '#C92852',
+    errorTint0: transparentize(0.95, error),
+    errorTint1: transparentize(0.9, error),
+    errorTint2: transparentize(0.8, error),
+    warning,
+    warningShade1: '#E6AF00',
+    warningShade2: '#CC9B00',
+    warningTint0: transparentize(0.95, warning),
+    warningTint1: transparentize(0.9, warning),
+    warningTint2: transparentize(0.8, warning),
+    alert: alertColor,
+    alertShade1: '#E6E652',
+    alertShade2: '#CCCC48',
+    alertTint0: transparentize(0.95, alertColor),
+    alertTint1: transparentize(0.9, alertColor),
+    alertTint2: transparentize(0.8, alertColor),
+    success,
+    successShade1: '#33E512',
+    successShade2: '#2CCF10',
+    successTint0: transparentize(0.95, success),
+    successTint1: transparentize(0.9, success),
+    successTint2: transparentize(0.8, success),
+    grayscale0: transparentize(0.95, grayVal),
+    grayscale1: transparentize(0.9, grayVal),
+    grayscale2: transparentize(0.8, grayVal),
+    grayscale3: transparentize(0.7, grayVal),
+    grayscale4: transparentize(0.6, grayVal),
+    grayscale5: transparentize(0.5, grayVal),
+    grayscale6: transparentize(0.4, grayVal),
+    grayscale7: transparentize(0.3, grayVal),
+    grayscale8: transparentize(0.2, grayVal),
+    grayscale9: transparentize(0.1, grayVal),
+    grayscale10: grayVal,
+    contrast0: transparentize(0.95, white),
+    contrast1: transparentize(0.9, white),
+    contrast2: transparentize(0.8, white),
+    contrast3: transparentize(0.7, white),
+    contrast4: transparentize(0.6, white),
+    contrast5: transparentize(0.5, white),
+    contrast6: transparentize(0.4, white),
+    contrast7: transparentize(0.3, white),
+    contrast8: transparentize(0.2, white),
+    contrast9: transparentize(0.1, white),
+    contrast10: white
+};
+const eighties_colors = colors;
+export { eighties_colors as default };