@vonq/hapi-elements-types 1.4.0 → 1.5.0

package/src/theming/utils.ts

@@ -0,0 +1,581 @@
+import { getColorInstanceOrUndefined } from "../common/color"
+import { HapiTheme, ThemeGlobalStyles } from "./types"
+import {
+    THEME_LIGHT_BASE_COMPONENT_STYLES,
+    THEME_LIGHT_DEFAULT_COLORS,
+    themeBaseVars,
+} from "./consts"
+import { mergeDeepOverwriteArrays } from "../common/immutable"
+import { RecursivePartial } from "../common/types"
+
+export const borderWidthForThingsLikeTabs = "3px"
+
+export const getDefaultTheme = (
+    globalColors?: RecursivePartial<ThemeGlobalStyles>,
+): HapiTheme => {
+    return {
+        global: globalColors || THEME_LIGHT_DEFAULT_COLORS,
+        link: {
+            color: "var(--hapi-global-primary-background-color)",
+        },
+        loadingSpinner: {
+            fill: "var(--hapi-global-primary-background-color)",
+        },
+        userJourneyBar: {},
+        card: {
+            display: "block",
+            backgroundColor: "#FFF",
+            borderRadius: "var(--hapi-global-border-radius)",
+            boxShadow: "0px 1px 3px rgba(51, 51, 51, 0.2)",
+        },
+        modal: {
+            backgroundColor: "#FFF",
+            borderLeftWidth: "6px",
+            borderLeftColor: "var(--hapi-global-primary-background-color)",
+            dropShadow:
+                "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))",
+            "&:focus-visible": {
+                outline: "none !important",
+            },
+        },
+        modalBackdrop: {
+            backdropFilter: "brightness(0.75)",
+        },
+        tabHeaders: {
+            ".tab--horizontal &": {
+                columnGap: themeBaseVars.gap!["2"],
+            },
+            ".tab--vertical &": {
+                rowGap: themeBaseVars.gap!["2"],
+            },
+        },
+        tabHeader: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            flex: themeBaseVars.flex!["1"],
+            padding: `${themeBaseVars.padding!["4"]} ${
+                themeBaseVars.padding!["12"]
+            }`,
+            borderRadius: "0px",
+            backgroundColor: getColorInstanceOrUndefined(
+                globalColors?.fadedBackgroundColor ||
+                    THEME_LIGHT_DEFAULT_COLORS.fadedBackgroundColor,
+            )?.hex(),
+            ".tab--horizontal &.active": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.infoSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.infoSecondaryBackgroundColor,
+                )?.hex(),
+                borderTopWidth: borderWidthForThingsLikeTabs,
+                borderTopStyle: "solid",
+                borderTopColor:
+                    globalColors?.primaryBackgroundColor ||
+                    THEME_LIGHT_DEFAULT_COLORS.primaryBackgroundColor,
+            },
+            ".tab--vertical &.active": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.infoSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.infoSecondaryBackgroundColor,
+                )?.hex(),
+                borderLeftWidth: borderWidthForThingsLikeTabs,
+                borderLeftStyle: "solid",
+                borderLeftColor:
+                    globalColors?.primaryBackgroundColor ||
+                    THEME_LIGHT_DEFAULT_COLORS.primaryBackgroundColor,
+            },
+            ".tab--horizontal &:first-child": {
+                borderTopLeftRadius:
+                    globalColors?.borderRadius ||
+                    THEME_LIGHT_DEFAULT_COLORS.borderRadius,
+            },
+            ".tab--horizontal &:last-child": {
+                borderTopRightRadius:
+                    globalColors?.borderRadius ||
+                    THEME_LIGHT_DEFAULT_COLORS.borderRadius,
+            },
+            ".tab--vertical &:first-child": {
+                borderTopLeftRadius:
+                    globalColors?.borderRadius ||
+                    THEME_LIGHT_DEFAULT_COLORS.borderRadius,
+            },
+            ".tab--vertical &:last-child": {
+                borderBottomLeftRadius:
+                    globalColors?.borderRadius ||
+                    THEME_LIGHT_DEFAULT_COLORS.borderRadius,
+            },
+        },
+        tabPanels: {},
+        tabPanel: {
+            backgroundColor: getColorInstanceOrUndefined(
+                globalColors?.infoSecondaryBackgroundColor ||
+                    THEME_LIGHT_DEFAULT_COLORS.infoSecondaryBackgroundColor,
+            )?.hex(),
+            ".tab--horizontal &": {
+                padding: `${themeBaseVars.padding!["4"]} ${
+                    themeBaseVars.padding!["2"]
+                }`,
+            },
+            ".tab--vertical &": {
+                padding: `${themeBaseVars.padding!["2"]} ${
+                    themeBaseVars.padding!["4"]
+                }`,
+            },
+        },
+        buttonBase: THEME_LIGHT_BASE_COMPONENT_STYLES["button"] || {},
+        buttonPrimary: {
+            extend: "buttonBase",
+            backgroundColor: "var(--hapi-global-primary-background-color)",
+            color: "var(--hapi-global-primary-text-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.primaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.primaryBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.primaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.primaryBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonSecondary: {
+            extend: "buttonBase",
+            backgroundColor: "var(--hapi-global-secondary-background-color)",
+            color: "var(--hapi-global-secondary-text-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.secondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.secondaryBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.secondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.secondaryBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonDanger: {
+            extend: "buttonBase",
+            backgroundColor: "var(--hapi-global-danger-background-color)",
+            color: "var(--hapi-global-danger-text-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.dangerBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.dangerBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.dangerBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.dangerBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonDangerSecondary: {
+            extend: "buttonBase",
+            backgroundColor:
+                "var(--hapi-global-danger-secondary-background-color)",
+            color: "var(--hapi-global-danger-background-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.dangerSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.dangerSecondaryBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.dangerSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.dangerSecondaryBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonSuccess: {
+            extend: "buttonBase",
+            backgroundColor: "var(--hapi-global-success-background-color)",
+            color: "var(--hapi-global-success-text-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.successBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.successBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.successBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.successBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonSuccessSecondary: {
+            extend: "buttonBase",
+            backgroundColor:
+                "var(--hapi-global-success-secondary-background-color)",
+            color: "var(--hapi-global-success-background-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.successSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.successSecondaryBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.successSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.successSecondaryBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonInfo: {
+            extend: "buttonBase",
+            backgroundColor: "var(--hapi-global-info-background-color)",
+            color: "var(--hapi-global-info-text-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.infoBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.infoBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.infoBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.infoBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonInfoSecondary: {
+            extend: "buttonBase",
+            backgroundColor:
+                "var(--hapi-global-info-secondary-background-color)",
+            color: "var(--hapi-global-info-background-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.infoSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.infoSecondaryBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.infoSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.infoSecondaryBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonWarning: {
+            extend: "buttonBase",
+            backgroundColor: "var(--hapi-global-warning-background-color)",
+            color: "var(--hapi-global-warning-text-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.warningBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.warningBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.warningBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.warningBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonWarningSecondary: {
+            extend: "buttonBase",
+            backgroundColor:
+                "var(--hapi-global-warning-secondary-background-color)",
+            color: "var(--hapi-global-warning-background-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.warningSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.warningSecondaryBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.warningSecondaryBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.warningSecondaryBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonAccent: {
+            extend: "buttonBase",
+            backgroundColor: "var(--hapi-global-accent-background-color)",
+            color: "var(--hapi-global-accent-text-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.accentBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.accentBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.accentBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.accentBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        buttonFaded: {
+            extend: "buttonBase",
+            backgroundColor: "var(--hapi-global-faded-background-color)",
+            color: "var(--hapi-global-faded-text-color)",
+            "&:disabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.fadedBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.fadedBackgroundColor,
+                )
+                    ?.fade(0.3)
+                    .hexa(),
+            },
+            "&:hover:enabled": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    globalColors?.fadedBackgroundColor ||
+                        THEME_LIGHT_DEFAULT_COLORS.fadedBackgroundColor,
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        badgeBase: {
+            backgroundColor: "var(--hapi-global-primary-background-color)",
+            color: "var(--hapi-global-primary-text-color)",
+        },
+        headingBase: {},
+        headingOne: {
+            fontSize: themeBaseVars.fontSize!["5xl"][0],
+            lineHeight: themeBaseVars.fontSize!["5xl"][1].lineHeight,
+        },
+        headingTwo: {
+            fontSize: themeBaseVars.fontSize!["4xl"][0],
+            lineHeight: themeBaseVars.fontSize!["4xl"][1].lineHeight,
+        },
+        headingThree: {
+            fontSize: themeBaseVars.fontSize!["3xl"][0],
+            lineHeight: themeBaseVars.fontSize!["3xl"][1].lineHeight,
+        },
+        headingFour: {
+            fontSize: themeBaseVars.fontSize!["2xl"][0],
+            lineHeight: themeBaseVars.fontSize!["2xl"][1].lineHeight,
+        },
+        headingFive: {
+            fontSize: themeBaseVars.fontSize!["xl"][0],
+            lineHeight: themeBaseVars.fontSize!["xl"][1].lineHeight,
+        },
+        headingSix: {
+            fontSize: themeBaseVars.fontSize!["lg"][0],
+            lineHeight: themeBaseVars.fontSize!["lg"][1].lineHeight,
+        },
+        formFieldBase: THEME_LIGHT_BASE_COMPONENT_STYLES["formFieldBase"] || {},
+        inputSelectBase:
+            THEME_LIGHT_BASE_COMPONENT_STYLES["inputSelectBase"] || {},
+        input: {
+            extend: [
+                THEME_LIGHT_BASE_COMPONENT_STYLES["formFieldBase"] || {},
+                THEME_LIGHT_BASE_COMPONENT_STYLES["inputSelectBase"] || {},
+            ],
+        },
+        inputHtml: {
+            extend: () => {
+                const style: any = {}
+
+                const combinedStyles = {
+                    ...THEME_LIGHT_BASE_COMPONENT_STYLES["formFieldBase"],
+                    ...THEME_LIGHT_BASE_COMPONENT_STYLES["inputSelectBase"],
+                }
+
+                Object.keys(combinedStyles)
+                    .filter((key) => !key.includes("padding"))
+                    .forEach((key) => (style[key] = combinedStyles[key]))
+
+                return style
+            },
+        },
+        inputRange: {
+            extend: "formFieldBase",
+            backgroundColor: "var(--hapi-global-secondary-background-color)",
+            borderColor: "var(--hapi-global-primary-background-color)",
+        },
+        inputTags: {
+            extend: () => {
+                const style: any = {}
+
+                const combinedStyles = {
+                    ...THEME_LIGHT_BASE_COMPONENT_STYLES["formFieldBase"],
+                    ...THEME_LIGHT_BASE_COMPONENT_STYLES["inputSelectBase"],
+                }
+
+                Object.keys(combinedStyles)
+                    .filter(
+                        (key) =>
+                            !key.includes("border") && !key.includes("padding"),
+                    )
+                    .forEach((key) => (style[key] = combinedStyles[key]))
+
+                return style
+            },
+            marginBottom: "0",
+            flex: "1",
+            padding: "0",
+            border: "0",
+            "&:focus": {
+                border: "0",
+                boxShadow: "none",
+                outline: "none",
+            },
+        },
+        textarea: {
+            extend: [
+                THEME_LIGHT_BASE_COMPONENT_STYLES["formFieldBase"] || {},
+                THEME_LIGHT_BASE_COMPONENT_STYLES["inputSelectBase"] || {},
+            ],
+        },
+        select: {
+            extend: () => {
+                const style: any = {}
+
+                const combinedStyles = {
+                    ...THEME_LIGHT_BASE_COMPONENT_STYLES["formFieldBase"],
+                    ...THEME_LIGHT_BASE_COMPONENT_STYLES["inputSelectBase"],
+                }
+
+                Object.keys(combinedStyles)
+                    .filter(
+                        (key) =>
+                            !key.includes("padding") &&
+                            (key === "borderRadius" || !key.includes("border")),
+                    )
+                    .forEach((key) => (style[key] = combinedStyles[key]))
+
+                return style
+            },
+        },
+        checkbox: {
+            extend: "formFieldBase",
+            "&:checked": {
+                color: THEME_LIGHT_DEFAULT_COLORS.primaryBackgroundColor,
+            },
+        },
+        radio: {
+            extend: () => {
+                const style: any = {}
+                Object.keys(
+                    THEME_LIGHT_BASE_COMPONENT_STYLES["formFieldBase"] || {},
+                )
+                    .filter((key) => key !== "borderRadius")
+                    .forEach((key) => {
+                        if (
+                            THEME_LIGHT_BASE_COMPONENT_STYLES["formFieldBase"]
+                        ) {
+                            style[key] =
+                                THEME_LIGHT_BASE_COMPONENT_STYLES[
+                                    "formFieldBase"
+                                ][key]
+                        }
+                    })
+                return style
+            },
+            "&:checked": {
+                color: THEME_LIGHT_DEFAULT_COLORS.primaryBackgroundColor,
+            },
+        },
+        accordionButton: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            borderRadius: "var(--hapi-global-border-radius)",
+            color: "#000",
+            fontWeight: themeBaseVars.fontWeight!["medium"],
+            textAlign: "left",
+            padding: `${themeBaseVars.padding!["2"]} ${
+                themeBaseVars.padding!["4"]
+            }`,
+            backgroundColor: themeBaseVars.backgroundColor!["gray"]["100"],
+            cursor: "pointer",
+            "&:hover": {
+                backgroundColor: getColorInstanceOrUndefined(
+                    themeBaseVars.backgroundColor!["gray"]["100"],
+                )
+                    ?.darken(0.1)
+                    .hex(),
+            },
+        },
+        accordionArrow: {
+            height: themeBaseVars.height!["4"],
+            width: themeBaseVars.width!["4"],
+            color: themeBaseVars.textColor!["gray"]["500"],
+        },
+        accordionPanel: {
+            marginBottom: themeBaseVars.margin!["2"],
+            paddingBottom: themeBaseVars.padding!["5"],
+            paddingRight: themeBaseVars.padding!["5"],
+            paddingLeft: themeBaseVars.padding!["5"],
+            fontSize: themeBaseVars.fontSize!["sm"],
+            color: themeBaseVars.textColor!["gray"]["500"],
+            backgroundColor: themeBaseVars.backgroundColor!["gray"]["100"],
+        },
+        accordionTitle: {
+            display: "inline-flex",
+            flex: themeBaseVars.flex!["1"],
+            alignItems: "center",
+        },
+        alert: {
+            maxWidth: themeBaseVars.maxWidth!["md"],
+        },
+    }
+}
+
+export const getUpdatedTheme = (
+    updatedTheme: Partial<HapiTheme>,
+): Partial<HapiTheme> => {
+    const newTheme: Partial<HapiTheme> = getDefaultTheme(
+        mergeDeepOverwriteArrays(
+            THEME_LIGHT_DEFAULT_COLORS,
+            updatedTheme.global,
+        ),
+    )
+    return newTheme
+}

package/src/theming/validations.types.ts

@@ -0,0 +1,62 @@
+import {
+    ZodArray,
+    ZodLiteral,
+    ZodObject,
+    ZodOptional,
+    ZodRecord,
+    ZodString,
+    ZodTypeAny,
+    ZodUnion,
+} from "zod"
+
+export type ZodThemeGlobalStyles = ZodObject<{
+    borderRadius: ZodString
+
+    primaryBackgroundColor: ZodString
+    primaryTextColor: ZodString
+
+    secondaryBackgroundColor: ZodString
+    secondaryTextColor: ZodString
+
+    successBackgroundColor: ZodString
+    successTextColor: ZodString
+
+    dangerBackgroundColor: ZodString
+    dangerTextColor: ZodString
+
+    warningBackgroundColor: ZodString
+    warningTextColor: ZodString
+
+    infoBackgroundColor: ZodString
+    infoTextColor: ZodString
+
+    fadedBackgroundColor: ZodString
+    fadedTextColor: ZodString
+
+    accentBackgroundColor: ZodString
+    accentTextColor: ZodString
+}>
+
+export type ZodFontFace = ZodObject<{
+    fontFamily: ZodString
+    src: ZodString
+    fontWeight: ZodOptional<ZodString>
+    fontStyle: ZodOptional<ZodString>
+    fontSize: ZodOptional<ZodString>
+}>
+export type ZodFontFaces = ZodArray<ZodFontFace>
+export type ZodFontOptions = ZodObject<{
+    fontFamily: ZodString
+    fontFaces: ZodFontFaces
+}>
+export type ZodTheme = ZodRecord<
+    ZodUnion<[ZodLiteral<"global">, ZodString]>,
+    ZodObject<{ global: ZodTypeAny }>
+>
+export type WindowHapiValidationsTheming = {
+    globalTheme: ZodThemeGlobalStyles
+    theme: ZodTheme
+    fontFace: ZodFontFace
+    fontFaces: ZodFontFaces
+    fontOptions: ZodFontOptions
+}