@wavv/ui 2.2.7 → 2.3.0-alpha.1

package/build/theme/mono/dark/dark.js

@@ -0,0 +1,562 @@
+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
+        }
+    },
+    toggleButton: {
+        ...index_js_button,
+        primary: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.brandTint0,
+                hover: colors.brandTint2,
+                active: colors.brandTint4
+            },
+            border: {
+                default: colors.brand,
+                hover: colors.brand,
+                active: colors.brand
+            }
+        },
+        secondary: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: darkScale.scale0,
+                hover: darkScale.scale1,
+                active: darkScale.scale3
+            },
+            border: {
+                default: darkScale.background5,
+                hover: darkScale.background5,
+                active: darkScale.background5
+            }
+        },
+        negative: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.errorTint0,
+                hover: colors.errorTint2,
+                active: colors.errorTint4
+            },
+            border: {
+                default: colors.error,
+                hover: colors.error,
+                active: colors.error
+            }
+        },
+        positive: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.successTint0,
+                hover: colors.successTint2,
+                active: colors.successTint4
+            },
+            border: {
+                default: colors.success,
+                hover: colors.success,
+                active: colors.success
+            }
+        },
+        caution: {
+            color: {
+                default: darkScale.scale10,
+                hover: darkScale.scale10,
+                active: darkScale.scale10
+            },
+            background: {
+                default: colors.warningTint0,
+                hover: colors.warningTint2,
+                active: colors.warningTint4
+            },
+            border: {
+                default: colors.warning,
+                hover: colors.warning,
+                active: colors.warning
+            }
+        },
+        disabled: {
+            color: {
+                default: darkScale.scale4,
+                hover: darkScale.scale4,
+                active: darkScale.scale4
+            },
+            background: {
+                default: darkScale.scale0,
+                hover: darkScale.scale0,
+                active: darkScale.scale0
+            },
+            border: {
+                default: darkScale.scale1,
+                hover: darkScale.scale1,
+                active: darkScale.scale1
+            }
+        }
+    },
+    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/mono/dark/darkScale.d.ts

@@ -0,0 +1,22 @@
+declare const darkScale: {
+    scale0: string;
+    scale1: string;
+    scale2: string;
+    scale3: string;
+    scale4: string;
+    scale5: string;
+    scale6: string;
+    scale7: string;
+    scale8: string;
+    scale9: string;
+    scale10: string;
+    accent: string;
+    accentShade: string;
+    background0: string;
+    background1: string;
+    background2: string;
+    background3: string;
+    background4: string;
+    background5: string;
+};
+export default darkScale;

package/build/theme/mono/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 };

package/build/theme/mono/light/light.d.ts

@@ -0,0 +1,3 @@
+import type { ITheme } from '../../ThemeTypes';
+declare const light: ITheme;
+export default light;