@caspeco/casper-ui-library 0.0.1

package/dist/theme/theme-config/theme.js

@@ -0,0 +1,453 @@
+import { ThemeColorVariable as u } from "../theme-types.js";
+import { ThemeIconSizeToken as n, ThemeBreakPointToken as k, ThemeShadowToken as D, ThemeFontSizeToken as r, ThemeFontToken as m, ThemeRadiusToken as t, ThemeSpaceToken as d, ThemeBorderToken as i, ThemeColorToken as e } from "./theme-tokens.js";
+function S(a, f) {
+  return {
+    colors: {
+      [e.Primary]: {
+        default: a.primary,
+        ...a.primaryDark && { _dark: a.primaryDark }
+      },
+      [e.PrimaryHover]: {
+        default: a.primaryHover,
+        ...a.primaryHoverDark && { _dark: a.primaryHoverDark }
+      },
+      [e.PrimaryActive]: {
+        default: a.primaryActive,
+        ...a.primaryActiveDark && { _dark: a.primaryActiveDark }
+      },
+      [e.OnPrimary]: {
+        default: a.onPrimary,
+        ...a.onPrimaryDark && { _dark: a.onPrimaryDark }
+      },
+      [e.PrimaryContainer]: {
+        default: a.primaryContainer,
+        ...a.primaryContainerDark && {
+          _dark: a.primaryContainerDark
+        }
+      },
+      [e.OnPrimaryContainer]: {
+        default: a.onPrimaryContainer,
+        ...a.onPrimaryContainerDark && {
+          _dark: a.onPrimaryContainerDark
+        }
+      },
+      [e.Secondary]: {
+        default: a.secondary,
+        ...a.secondaryDark && { _dark: a.secondaryDark }
+      },
+      [e.SecondaryHover]: {
+        default: a.secondaryHover,
+        ...a.secondaryHoverDark && { _dark: a.secondaryHoverDark }
+      },
+      [e.SecondaryActive]: {
+        default: a.secondaryActive,
+        ...a.secondaryActiveDark && {
+          _dark: a.secondaryActiveDark
+        }
+      },
+      [e.OnSecondary]: {
+        default: a.onSecondary,
+        ...a.onSecondaryDark && { _dark: a.onSecondaryDark }
+      },
+      [e.SecondaryContainer]: {
+        default: a.secondaryContainer,
+        ...a.secondaryContainerDark && {
+          _dark: a.secondaryContainerDark
+        }
+      },
+      [e.OnSecondaryContainer]: {
+        default: a.onSecondaryContainer,
+        ...a.onSecondaryContainerDark && {
+          _dark: a.onSecondaryContainerDark
+        }
+      },
+      [e.Accent]: {
+        default: a.accent,
+        ...a.accentDark && { _dark: a.accentDark }
+      },
+      [e.AccentHover]: {
+        default: a.accentHover,
+        ...a.accentHoverDark && { _dark: a.accentHoverDark }
+      },
+      [e.AccentHoverAlpha]: {
+        default: a.accentHoverAlpha,
+        ...a.accentHoverAlphaDark && {
+          _dark: a.accentHoverAlphaDark
+        }
+      },
+      [e.AccentActive]: {
+        default: a.accentActive,
+        ...a.accentActiveDark && { _dark: a.accentActiveDark }
+      },
+      [e.AccentActiveAlpha]: {
+        default: a.accentActiveAlpha,
+        ...a.accentActiveAlphaDark && {
+          _dark: a.accentActiveAlphaDark
+        }
+      },
+      [e.OnAccent]: {
+        default: a.onAccent,
+        ...a.onAccentDark && { _dark: a.onAccentDark }
+      },
+      [e.AccentContainer]: {
+        default: a.accentContainer,
+        ...a.accentContainerDark && {
+          _dark: a.accentContainerDark
+        }
+      },
+      [e.OnAccentContainer]: {
+        default: a.onAccentContainer,
+        ...a.onAccentContainerDark && {
+          _dark: a.onAccentContainerDark
+        }
+      },
+      [e.Background]: {
+        default: a.background,
+        ...a.backgroundDark && { _dark: a.backgroundDark }
+      },
+      [e.OnBackground]: {
+        default: a.onBackground,
+        ...a.onBackgroundDark && { _dark: a.onBackgroundDark }
+      },
+      [e.OnBackgroundBorder]: {
+        default: a.onBackgroundBorder,
+        ...a.onBackgroundBorderDark && {
+          _dark: a.onBackgroundBorderDark
+        }
+      },
+      [e.OnBackgroundSubdued]: {
+        default: a.onBackgroundSubdued,
+        ...a.onBackgroundSubduedDark && {
+          _dark: a.onBackgroundSubduedDark
+        }
+      },
+      [e.BackgroundDisabled]: {
+        default: a.backgroundDisabled,
+        ...a.backgroundDisabledDark && {
+          _dark: a.backgroundDisabledDark
+        }
+      },
+      [e.OnBackgroundHeader]: {
+        default: a.onBackgroundHeader,
+        ...a.onBackgroundHeaderDark && {
+          _dark: a.onBackgroundHeaderDark
+        }
+      },
+      [e.Surface]: {
+        default: a.surface,
+        ...a.surfaceDark && { _dark: a.surfaceDark }
+      },
+      [e.OnSurface]: {
+        default: a.onSurface,
+        ...a.onSurfaceDark && { _dark: a.onSurfaceDark }
+      },
+      [e.OnSurfaceBorder]: {
+        default: a.onSurfaceBorder,
+        ...a.onSurfaceBorderDark && {
+          _dark: a.onSurfaceBorderDark
+        }
+      },
+      [e.OnSurfaceSubdued]: {
+        default: a.onSurfaceSubdued,
+        ...a.onSurfaceSubduedDark && {
+          _dark: a.onSurfaceSubduedDark
+        }
+      },
+      [e.SurfaceDisabled]: {
+        default: a.surfaceDisabled,
+        ...a.surfaceDisabledDark && {
+          _dark: a.surfaceDisabledDark
+        }
+      },
+      [e.OnSurfaceHeader]: {
+        default: a.onSurfaceHeader,
+        ...a.onSurfaceHeaderDark && {
+          _dark: a.onSurfaceHeaderDark
+        }
+      },
+      [e.Info]: {
+        default: a.info,
+        ...a.infoDark && { _dark: a.infoDark }
+      },
+      [e.InfoHover]: {
+        default: a.infoHover,
+        ...a.infoHoverDark && { _dark: a.infoHoverDark }
+      },
+      [e.InfoActive]: {
+        default: a.infoActive,
+        ...a.infoActiveDark && { _dark: a.infoActiveDark }
+      },
+      [e.OnInfo]: {
+        default: a.onInfo,
+        ...a.onInfoDark && { _dark: a.onInfoDark }
+      },
+      [e.InfoContainer]: {
+        default: a.infoContainer,
+        ...a.infoContainerDark && { _dark: a.infoContainerDark }
+      },
+      [e.OnInfoContainer]: {
+        default: a.onInfoContainer,
+        ...a.onInfoContainerDark && {
+          _dark: a.onInfoContainerDark
+        }
+      },
+      [e.Success]: {
+        default: a.success,
+        ...a.successDark && { _dark: a.successDark }
+      },
+      [e.SuccessHover]: {
+        default: a.successHover,
+        ...a.successHoverDark && { _dark: a.successHoverDark }
+      },
+      [e.SuccessActive]: {
+        default: a.successActive,
+        ...a.successActiveDark && { _dark: a.successActiveDark }
+      },
+      [e.OnSuccess]: {
+        default: a.onSuccess,
+        ...a.onSuccessDark && { _dark: a.onSuccessDark }
+      },
+      [e.SuccessContainer]: {
+        default: a.successContainer,
+        ...a.successContainerDark && {
+          _dark: a.successContainerDark
+        }
+      },
+      [e.OnSuccessContainer]: {
+        default: a.onSuccessContainer,
+        ...a.onSuccessContainerDark && {
+          _dark: a.onSuccessContainerDark
+        }
+      },
+      [e.Warning]: {
+        default: a.warning,
+        ...a.warningDark && { _dark: a.warningDark }
+      },
+      [e.WarningHover]: {
+        default: a.warningHover,
+        ...a.warningHoverDark && { _dark: a.warningHoverDark }
+      },
+      [e.WarningActive]: {
+        default: a.warningActive,
+        ...a.warningActiveDark && { _dark: a.warningActiveDark }
+      },
+      [e.OnWarning]: {
+        default: a.onWarning,
+        ...a.onWarningDark && { _dark: a.onWarningDark }
+      },
+      [e.WarningContainer]: {
+        default: a.warningContainer,
+        ...a.warningContainerDark && {
+          _dark: a.warningContainerDark
+        }
+      },
+      [e.OnWarningContainer]: {
+        default: a.onWarningContainer,
+        ...a.onWarningContainerDark && {
+          _dark: a.onWarningContainerDark
+        }
+      },
+      [e.Error]: {
+        default: a.error,
+        ...a.errorDark && { _dark: a.errorDark }
+      },
+      [e.ErrorHover]: {
+        default: a.errorHover,
+        ...a.errorHoverDark && { _dark: a.errorHoverDark }
+      },
+      [e.ErrorActive]: {
+        default: a.errorActive,
+        ...a.errorActiveDark && { _dark: a.errorActiveDark }
+      },
+      [e.OnError]: {
+        default: a.onError,
+        ...a.onErrorDark && { _dark: a.onErrorDark }
+      },
+      [e.ErrorContainer]: {
+        default: a.errorContainer,
+        ...a.errorContainerDark && {
+          _dark: a.errorContainerDark
+        }
+      },
+      [e.OnErrorContainer]: {
+        default: a.onErrorContainer,
+        ...a.onErrorContainerDark && {
+          _dark: a.onErrorContainerDark
+        }
+      },
+      [e.Neutral]: {
+        default: a.neutral,
+        ...a.neutralDark && { _dark: a.neutralDark }
+      },
+      [e.NeutralHover]: {
+        default: a.neutralHover,
+        ...a.neutralHoverDark && { _dark: a.neutralHoverDark }
+      },
+      [e.NeutralActive]: {
+        default: a.neutralActive,
+        ...a.neutralActiveDark && { _dark: a.neutralActiveDark }
+      },
+      [e.OnNeutral]: {
+        default: a.onNeutral,
+        ...a.onNeutralDark && { _dark: a.onNeutralDark }
+      },
+      [e.NeutralContainer]: {
+        default: a.neutralContainer,
+        ...a.neutralContainerDark && {
+          _dark: a.neutralContainerDark
+        }
+      },
+      [e.OnNeutralContainer]: {
+        default: a.onNeutralContainer,
+        ...a.onNeutralContainerDark && {
+          _dark: a.onNeutralContainerDark
+        }
+      },
+      [e.Shadow]: "#000000",
+      [e.ModalOverlay]: "#FAFAFA50",
+      // 80% opacity
+      [e.ViewFinderOverlay]: "#00000078",
+      // 48% opacity
+      [e.ViewHeaderBackground]: "#F6F5F4CC",
+      // 80% opacity
+      [e.ViewHeaderBackgroundDark]: "#0B2533CC",
+      // 80% opacity
+      [e.ShadowHeader]: "#0000003D",
+      // 24% opacity
+      [e.ShadowFooter]: "#00000029",
+      // 16% opacity
+      [e.ShadowCard]: "#00000029",
+      // 16% opacity
+      [e.ShadowScroll]: "#0000001F",
+      // 12% opacity
+      [e.PickerOnPicker]: "#151411",
+      [e.PickerBerry]: "#A9B2CD",
+      [e.PickerBerryLight]: "#CAD0E7",
+      [e.PickerCoral]: "#F69C9C",
+      [e.PickerCoralLight]: "#FFCCCC",
+      [e.PickerFlamingo]: "#E39FB6",
+      [e.PickerFlamingoLight]: "#F1C6D1",
+      [e.PickerFog]: "#C3C3C3",
+      [e.PickerFogLight]: "#D9D9D9",
+      [e.PickerHoney]: "#F2B961",
+      [e.PickerHoneyLight]: "#F8D9A8",
+      [e.PickerLemon]: "#F5EE77",
+      [e.PickerLemonLight]: "#F4F0AF",
+      [e.PickerLime]: "#9BC87E",
+      [e.PickerLimeLight]: "#CAE1BA",
+      [e.PickerOlive]: "#9BCDB6",
+      [e.PickerOliveLight]: "#CBE4D7",
+      [e.PickerPlum]: "#D2A5C2",
+      [e.PickerPlumLight]: "#E5C3DA",
+      [e.PickerSky]: "#84C1E9",
+      [e.PickerSkyLight]: "#BFDDF2"
+    },
+    borders: {
+      [i.None]: "none",
+      [i.XSmall]: "0.0625rem solid",
+      // 1px
+      [i.Small]: "0.125rem solid",
+      // 2px
+      [i.Medium]: "0.25rem solid",
+      // 4px
+      [i.Large]: "0.5rem solid",
+      // 8px
+      [i.XLarge]: "0.5rem solid"
+      // 8px purposly same as Large for now
+    },
+    space: {
+      [d.None]: "0",
+      [d.XSmall]: "0.25rem",
+      // 4px
+      [d.Small]: "0.5rem",
+      // 8px
+      [d.Medium]: "1rem",
+      // 16px
+      [d.Large]: "2rem",
+      // 32px
+      [d.XLarge]: "3rem",
+      // 48px
+      [d.X2Large]: "5rem"
+      // 80px
+    },
+    radii: {
+      [t.None]: "0",
+      [t.XSmall]: "0.125rem",
+      // 2px
+      [t.Small]: "0.25rem",
+      // 4px
+      [t.Medium]: "0.5rem",
+      // 8px
+      [t.Large]: "1rem",
+      // 16px
+      [t.XLarge]: "31.25rem"
+      // 500px
+    },
+    fonts: {
+      [m.Body]: f.body,
+      [m.Header]: f.header,
+      [m.SubHeader]: f.subheader
+    },
+    fontSizes: {
+      [r.XSmall]: "0.75rem",
+      // 12px
+      [r.Small]: "0.875rem",
+      // 14px
+      [r.Medium]: "1rem",
+      // 16px
+      [r.Large]: "1.125rem",
+      // 18px
+      [r.XLarge]: "1.5rem",
+      // 24px
+      [r.X2Large]: "2rem",
+      // 32px
+      [r.X3Large]: "2.5rem",
+      // 40px
+      [r.X4Large]: "3.25rem",
+      // 52px
+      [r.X5Large]: "4rem",
+      // 64px
+      [r.X6Large]: "5rem"
+      // 80px
+    },
+    shadows: {
+      [D.Small]: `0px 4px 12px 0px ${u.ShadowCard}`,
+      [D.Medium]: `0px 4px 20px 4px ${u.ShadowCard}`,
+      [D.Large]: `0px 8px 40px 8px ${u.ShadowCard}`,
+      [D.Header]: `0px 8px 40px 8px ${u.ShadowHeader}`,
+      [D.Footer]: `0px 0px 16px 0px ${u.ShadowFooter}`
+    },
+    breakpoints: {
+      [k.Base]: "0em",
+      [k.Small]: "30em",
+      // 480px
+      [k.Medium]: "48em",
+      // 768px
+      [k.Large]: "62em",
+      // 992px
+      [k.XLarge]: "80em",
+      // 1280px
+      [k.X2Large]: "96em"
+      // 1536px
+    },
+    iconSizes: {
+      [n.XSmall]: "1rem",
+      // 16px
+      [n.Small]: "1.25rem",
+      // 20px
+      [n.Medium]: "1.5rem",
+      // 24px
+      [n.Large]: "2rem",
+      // 32px
+      [n.XLarge]: "2.5rem",
+      // 40px
+      [n.X2Large]: "3rem",
+      // 48 px
+      [n.X3Large]: "3.5rem"
+      // 56px
+    }
+  };
+}
+export {
+  S as createSemanticTokens
+};

package/dist/theme/theme-helper.d.ts

@@ -0,0 +1,5 @@
+/** function that checks if users device has a touchscreen
+ * used for setting different hover behaviours depending on
+ * touchscreen or not. They can get messed up on iOS i particular */
+export declare const isTouchScreenDevice: () => boolean;
+//# sourceMappingURL=theme-helper.d.ts.map

package/dist/theme/theme-helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-helper.d.ts","sourceRoot":"","sources":["../../lib/theme/theme-helper.ts"],"names":[],"mappings":"AAAA;;oEAEoE;AACpE,eAAO,MAAM,mBAAmB,QAAO,OAKtC,CAAC"}

package/dist/theme/theme-helper.js

@@ -0,0 +1,4 @@
+const e = () => typeof window > "u" ? !1 : "ontouchstart" in window;
+export {
+  e as isTouchScreenDevice
+};

package/dist/theme/theme-provider-context.composition.d.ts

@@ -0,0 +1,10 @@
+export declare function Colors(): import("react/jsx-runtime").JSX.Element;
+export declare function Fonts(): import("react/jsx-runtime").JSX.Element;
+export declare function FontSizes(): import("react/jsx-runtime").JSX.Element;
+export declare function Space(): import("react/jsx-runtime").JSX.Element;
+export declare function BorderRadii(): import("react/jsx-runtime").JSX.Element;
+export declare function BorderWidths(): import("react/jsx-runtime").JSX.Element;
+export declare function Shadows(): import("react/jsx-runtime").JSX.Element;
+export declare function BreakPoints(): import("react/jsx-runtime").JSX.Element;
+export declare function IconSizes(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-provider-context.composition.d.ts.map

package/dist/theme/theme-provider-context.composition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider-context.composition.d.ts","sourceRoot":"","sources":["../../lib/theme/theme-provider-context.composition.tsx"],"names":[],"mappings":"AAaA,wBAAgB,MAAM,4CA8BrB;AAED,wBAAgB,KAAK,4CAkBpB;AAED,wBAAgB,SAAS,4CAcxB;AAED,wBAAgB,KAAK,4CAyBpB;AAED,wBAAgB,WAAW,4CA2B1B;AAED,wBAAgB,YAAY,4CA2B3B;AAED,wBAAgB,OAAO,4CA6BtB;AAED,wBAAgB,WAAW,4CAa1B;AAED,wBAAgB,SAAS,4CAgCxB"}

package/dist/theme/theme-provider-context.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme-provider-context.spec.d.ts.map

package/dist/theme/theme-provider-context.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider-context.spec.d.ts","sourceRoot":"","sources":["../../lib/theme/theme-provider-context.spec.tsx"],"names":[],"mappings":""}

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { GlobalStyles, ThemeColorValues, ThemeFontValues } from './theme-types.js';
+export type ThemeProviderProps = {
+    /** Children to be rendered within this theme. */
+    children: ReactNode;
+    /** Custom colors for theme. */
+    colors?: ThemeColorValues;
+    /** Font families used for custom theme fonts.
+     * Font names must match the names of imported fonts in @fontStyleSheet */
+    fonts?: ThemeFontValues;
+    /** Style sheet containing font faces to be used
+     * for custom Theme Fonts.
+     * See example usage in theme-casper.ui.ts */
+    fontStyleSheet?: string;
+    globalStyles?: GlobalStyles;
+};
+type ThemeProviderContextType = {
+    colors: ThemeColorValues;
+    fonts: ThemeFontValues;
+    fontStyleSheet: string;
+    globalStyles: GlobalStyles;
+};
+export declare const ThemeProviderContext: import('react').Context<ThemeProviderContextType>;
+/**
+ * Provides theme appearance to all children rendered within the provider.
+ * Default theme values are set to a Casper UI-theme. To override them,
+ * provide your own theme variables.
+ */
+export declare function ThemeProvider({ colors, fonts, fontStyleSheet, globalStyles, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom Casper UI wrapper for Chakra ColorModeScript to handle color mode throughout the app,
+ * currently always set to light as initial color mode.
+ *
+ * @see https://bit.cloud/caspeco/casper-ui-library/base-ui/theme
+ */
+export declare function ThemeColorModeScript(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/theme/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../lib/theme/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAE/F,MAAM,MAAM,kBAAkB,GAAG;IAChC,iDAAiD;IACjD,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;8EAC0E;IAC1E,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;iDAE6C;IAC7C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,eAAe,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mDAK/B,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC7B,MAA6B,EAC7B,KAA2B,EAC3B,cAA6C,EAC7C,YAAyC,EACzC,QAAQ,GACR,EAAE,kBAAkB,2CAsBpB;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,4CAKnC"}

package/dist/theme/theme-provider.js

@@ -0,0 +1,39 @@
+import { jsx as e } from "react/jsx-runtime";
+import { extendTheme as f, ChakraProvider as a, ColorModeScript as h } from "@chakra-ui/react";
+import { createContext as p } from "react";
+import { createSemanticTokens as d } from "./theme-config/theme.js";
+import { componentsConfig as S } from "./theme-config/theme-components.js";
+import { casperUITheme as o } from "./theme-config/theme-casper-ui.js";
+const C = p({
+  colors: o.colors,
+  fonts: o.fonts,
+  fontStyleSheet: o.fontStyleSheet,
+  globalStyles: o.globalStyles
+});
+function M({
+  colors: t = o.colors,
+  fonts: r = o.fonts,
+  fontStyleSheet: n = o.fontStyleSheet,
+  globalStyles: i = o.globalStyles,
+  children: l
+}) {
+  const m = {
+    cssVarPrefix: "theme",
+    initialColorMode: "light",
+    useSystemColorMode: !1
+  }, s = { global: { ...i, fontStyleSheet: n } }, c = f({
+    semanticTokens: d(t, r),
+    components: S,
+    config: m,
+    styles: s
+  });
+  return /* @__PURE__ */ e(C.Provider, { value: { colors: t, fonts: r, fontStyleSheet: n, globalStyles: i }, children: /* @__PURE__ */ e(a, { theme: c, children: l }) });
+}
+function P() {
+  return /* @__PURE__ */ e(h, { initialColorMode: "light" });
+}
+export {
+  P as ThemeColorModeScript,
+  M as ThemeProvider,
+  C as ThemeProviderContext
+};