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

package/build/theme/core/colors.js

@@ -0,0 +1,77 @@
+import { transparentize } from "polished";
+const brand = '#0074F4';
+const error = '#FF6068';
+const warning = '#FF9900';
+const alertColor = '#F0BB00';
+const success = '#00C242';
+const grayVal = '#001D32';
+const white = '#FFFFFF';
+const colors = {
+    logo1: brand,
+    logo2: '#00A9E2',
+    logo3: '#67C728',
+    brand,
+    brandShade1: '#0068DC',
+    brandShade2: '#005DC3',
+    brandDark: '#4C9EF7',
+    brandDarkShade1: '#5EA8F8',
+    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: '#001828',
+    brandBackground1: '#0D2433',
+    brandBackground2: '#192F3D',
+    brandBackground3: '#334653',
+    brandBackground4: '#475964',
+    brandBackground5: '#596A74',
+    error,
+    errorShade1: '#E6565E',
+    errorShade2: '#CC4D53',
+    errorTint0: transparentize(0.95, error),
+    errorTint1: transparentize(0.9, error),
+    errorTint2: transparentize(0.8, error),
+    warning,
+    warningShade1: '#E68A00',
+    warningShade2: '#CC7A00',
+    warningTint0: transparentize(0.95, warning),
+    warningTint1: transparentize(0.9, warning),
+    warningTint2: transparentize(0.8, warning),
+    alert: alertColor,
+    alertShade1: '#E4B200',
+    alertShade2: '#C09600',
+    alertTint0: transparentize(0.95, alertColor),
+    alertTint1: transparentize(0.9, alertColor),
+    alertTint2: transparentize(0.8, alertColor),
+    success,
+    successShade1: '#00AF3B',
+    successShade2: '#009B35',
+    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 core_colors = colors;
+export { core_colors as default };

package/build/theme/core/dark/dark.js

@@ -0,0 +1,457 @@
+import common, { button as index_js_button } from "../../common/index.js";
+import colors from "../colors.js";
+import darkScale from "./darkScale.js";
+const white = '#FFFFFF';
+const accent = colors.brandDark;
+const dark = {
+    ...common,
+    ...darkScale,
+    name: 'dark',
+    button: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            outlineColor: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.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: darkScale.scale2
+        },
+        secondary: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            outlineColor: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: darkScale.scale1,
+                hover: darkScale.scale2,
+                active: darkScale.scale3
+            },
+            outlineBackground: {
+                default: darkScale.scale1,
+                hover: darkScale.scale2,
+                active: darkScale.scale3
+            },
+            border: {
+                default: darkScale.scale2,
+                hover: darkScale.scale2,
+                active: darkScale.scale2
+            },
+            divider: darkScale.scale2
+        },
+        positive: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            outlineColor: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.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: darkScale.scale2
+        },
+        negative: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            outlineColor: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.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: darkScale.scale2
+        },
+        caution: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            outlineColor: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.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: darkScale.scale2
+        },
+        subtle: {
+            color: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            },
+            outlineColor: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            },
+            secondaryColor: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.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: darkScale.scale1,
+                active: darkScale.scale2
+            },
+            outlineBackground: {
+                default: 'transparent',
+                hover: darkScale.scale1,
+                active: darkScale.scale2
+            },
+            border: {
+                default: 'transparent',
+                hover: darkScale.scale2,
+                active: darkScale.scale2
+            },
+            divider: darkScale.scale2
+        },
+        link: {
+            color: {
+                default: colors.brandShade2,
+                hover: colors.brandShade1,
+                active: colors.brand
+            },
+            outlineColor: {
+                default: colors.brandShade2,
+                hover: colors.brandShade1,
+                active: colors.brand
+            },
+            secondaryColor: {
+                default: darkScale.scale8,
+                hover: darkScale.scale9,
+                active: darkScale.scale10
+            },
+            positiveColor: {
+                default: colors.successShade2,
+                hover: colors.successShade1,
+                active: colors.success
+            },
+            negativeColor: {
+                default: colors.errorShade2,
+                hover: colors.errorShade1,
+                active: colors.error
+            },
+            cautionColor: {
+                default: colors.warningShade2,
+                hover: colors.warningShade1,
+                active: colors.warning
+            },
+            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: darkScale.scale4,
+                hover: darkScale.scale4,
+                active: darkScale.scale4
+            },
+            outlineColor: {
+                default: darkScale.scale4,
+                hover: darkScale.scale4,
+                active: darkScale.scale4
+            },
+            background: {
+                default: darkScale.scale1,
+                hover: darkScale.scale1,
+                active: darkScale.scale1
+            },
+            outlineBackground: {
+                default: darkScale.scale0,
+                hover: darkScale.scale0,
+                active: darkScale.scale0
+            },
+            border: {
+                default: darkScale.scale1,
+                hover: darkScale.scale1,
+                active: darkScale.scale1
+            },
+            divider: darkScale.scale1
+        },
+        color: {
+            default: white
+        }
+    },
+    calendar: {
+        background: {
+            container: colors.brandBackground3,
+            hover: darkScale.scale1,
+            active: colors.brand,
+            activeHover: colors.brandShade1,
+            activeRange: colors.brandTint4
+        },
+        color: {
+            disabled: darkScale.scale4,
+            default: darkScale.scale10,
+            active: darkScale.scale10,
+            current: accent,
+            outside: darkScale.scale6,
+            weekday: darkScale.scale4,
+            monthYear: darkScale.scale8,
+            iconDefault: darkScale.scale6,
+            iconDisabled: darkScale.scale2,
+            iconHover: darkScale.scale10
+        }
+    },
+    defaultBorder: `1px solid ${darkScale.scale1}`,
+    formControl: {
+        color: {
+            default: darkScale.scale8,
+            hover: darkScale.scale10,
+            active: colors.brand,
+            activeHover: colors.brandShade1,
+            disabled: darkScale.scale4
+        }
+    },
+    input: {
+        borderRadius: 4,
+        background: {
+            default: darkScale.scale0,
+            hover: darkScale.scale1,
+            focused: darkScale.scale1,
+            disabled: darkScale.scale0,
+            invalid: colors.errorTint2,
+            invalidHover: colors.errorTint1
+        },
+        color: {
+            default: darkScale.scale10,
+            disabled: darkScale.scale4,
+            placeholder: darkScale.scale6,
+            description: darkScale.scale6,
+            descriptionError: colors.error
+        },
+        borderColor: {
+            default: darkScale.scale6,
+            hover: darkScale.scale8,
+            focused: accent,
+            disabled: darkScale.scale4,
+            error: colors.error
+        },
+        labelColor: {
+            default: darkScale.scale8,
+            hover: darkScale.scale8,
+            filled: darkScale.scale6,
+            focused: accent,
+            disabled: darkScale.scale4
+        }
+    },
+    menu: {
+        background: darkScale.background1
+    },
+    menuItem: {
+        borderColor: colors.brand,
+        background: {
+            active: darkScale.scale0,
+            hover: darkScale.scale1,
+            inactive: 'transparent'
+        },
+        color: {
+            active: darkScale.scale10,
+            hover: darkScale.scale10,
+            inactive: darkScale.scale6
+        }
+    },
+    modal: {
+        background: colors.brandBackground3,
+        color: {
+            header: darkScale.scale10,
+            body: darkScale.scale6
+        }
+    },
+    options: {
+        background: colors.brandBackground2,
+        backdropFilter: void 0
+    },
+    optionItem: {
+        background: {
+            hover: darkScale.scale0,
+            active: darkScale.scale1,
+            inactive: 'transparent'
+        },
+        color: {
+            active: darkScale.scale10,
+            inactive: darkScale.scale10,
+            accent
+        }
+    },
+    table: {
+        color: {
+            header: darkScale.scale6,
+            body: darkScale.scale10
+        },
+        backgroundLevel: {
+            0: darkScale.background0,
+            1: darkScale.background1,
+            2: darkScale.background2,
+            3: darkScale.background3,
+            4: darkScale.background4,
+            5: darkScale.background5
+        },
+        borderColor: darkScale.scale1
+    },
+    tag: {
+        default: {
+            background: darkScale.scale1,
+            backgroundHover: darkScale.scale2,
+            backgroundDisabled: darkScale.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: darkScale.scale10,
+        background: {
+            default: '#0D2433',
+            info: '#002A51',
+            success: '#003A2D',
+            warning: '#333220',
+            error: '#332635'
+        },
+        border: {
+            default: darkScale.scale8,
+            info: colors.brand,
+            success: colors.success,
+            warning: colors.warning,
+            error: colors.error
+        }
+    },
+    toggle: {
+        slider: colors.brandBackground0
+    },
+    tooltip: {
+        background: colors.brandBackground4,
+        color: {
+            default: darkScale.scale10,
+            subtext: darkScale.scale6
+        }
+    },
+    editor: {
+        highlight: {
+            yellow: colors.alertShade2,
+            blue: colors.brandShade2,
+            red: colors.errorShade2,
+            green: colors.successShade2,
+            orange: colors.warningShade2
+        }
+    }
+};
+const dark_dark = dark;
+export { dark_dark as default };

package/build/theme/core/dark/darkScale.js

@@ -0,0 +1,36 @@
+import colors from "../colors.js";
+const scale0 = colors.contrast0;
+const scale1 = colors.contrast1;
+const scale2 = colors.contrast2;
+const scale3 = colors.contrast3;
+const scale4 = colors.contrast4;
+const scale5 = colors.contrast5;
+const scale6 = colors.contrast6;
+const scale7 = colors.contrast7;
+const scale8 = colors.contrast8;
+const scale9 = colors.contrast9;
+const scale10 = colors.contrast10;
+const accent = colors.brandDark;
+const darkScale = {
+    scale0,
+    scale1,
+    scale2,
+    scale3,
+    scale4,
+    scale5,
+    scale6,
+    scale7,
+    scale8,
+    scale9,
+    scale10,
+    accent,
+    accentShade: colors.brandDarkShade1,
+    background0: colors.brandBackground0,
+    background1: colors.brandBackground1,
+    background2: colors.brandBackground2,
+    background3: colors.brandBackground3,
+    background4: colors.brandBackground4,
+    background5: colors.brandBackground5
+};
+const dark_darkScale = darkScale;
+export { dark_darkScale as default };