@vonq/hapi-elements-types 1.5.0 → 1.7.0

package/src/theming/functions.types.ts

@@ -1,13 +0,0 @@
-import { HapiFontOptions, HapiTheme, HapiThemingThemeProvider } from "./types"
-
-export type ThemeStoreSetThemeProviderHandler = (
-    provider: HapiThemingThemeProvider,
-) => void
-
-export type ThemeStoreSetThemeHandler = (theme: HapiTheme) => void
-export type ThemeStoreSetFontOptionsHandler = (options: HapiFontOptions) => void
-
-export type ThemeStoreFunctions = {
-    setTheme: ThemeStoreSetThemeHandler
-    setFontOptions: ThemeStoreSetFontOptionsHandler
-}

package/src/theming/index.ts

@@ -1,11 +0,0 @@
-// created from 'create-ts-index'
-
-export * from './consts';
-export * from './functions.types';
-export * from './qa.types';
-export * from './state.initial';
-export * from './state.types';
-export * from './state.validations';
-export * from './types';
-export * from './utils';
-export * from './validations.types';

package/src/theming/state.initial.ts

@@ -1,16 +0,0 @@
-import { ThemeStoreState } from "./state.types"
-import { THEME_LIGHT } from "./consts"
-
-export const initialThemeStoreState: ThemeStoreState = {
-    fontOptions: {
-        fontFamily: "Poppins, Roboto, sans-serif",
-        fontFaces: [
-            {
-                src: "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Roboto:300,400,500,600,700",
-                rel: "stylesheet",
-                fontFamily: "Poppins",
-            },
-        ],
-    },
-    theme: THEME_LIGHT,
-}

package/src/theming/state.validations.ts

@@ -1,8 +0,0 @@
-import { ThemeStoreState } from "./state.types"
-import { StateValidations } from "../_window/state.types"
-
-export const themeStoreStoreStateValidations: StateValidations<ThemeStoreState> =
-    {
-        theme: "theming.theme",
-        fontOptions: "theming.fontOptions",
-    }

package/src/theming/utils.ts

@@ -1,581 +0,0 @@
-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
-}