@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/styles/theme/createTheme/createPalette.js

@@ -1,56 +1,177 @@
-const grey = {
-  50: '#fafafa',
-  100: '#f5f5f5',
-  200: '#eeeeee',
-  300: '#e0e0e0',
-  400: '#bdbdbd',
-  500: '#9e9e9e',
-  600: '#757575',
-  700: '#616161',
-  800: '#424242',
-  900: '#212121',
-  A100: '#f5f5f5',
-  A200: '#eeeeee',
-  A400: '#bdbdbd',
-  A700: '#616161'
+import "core-js/modules/es.array.reduce.js";
+import merge from 'lodash/merge';
+import isPlainObject from 'lodash/isPlainObject';
+import { isColor, toHsl, lighten, darken, getContrastRatio } from "../utils";
+import { paletteSchema } from "./createPalette.types";
+const defaultTextLight = {
+  primary: '#202020',
+  secondary: '#575757',
+  disabled: '#ACACAC'
+};
+const defaultTextDark = {
+  primary: '#fff',
+  secondary: '#a8a8a8',
+  disabled: '#535353'
 };
-
 /**
- * Creates a palette object for the theme.
- * @returns {Object} The palette object.
+ * Retrieves a text color that matches a passed background color.
+ * @param options The options for getting the contrast text color.
+ * @returns The matching contrast text color
  */
-const createPalette = () => {
-  const palette = {
-    primary: {
-      main: 'var(--color-primary)',
-      contrast: 'var(--color-primary-contrast)'
-    },
-    secondary: {
-      main: 'var(--color-secondary)',
-      contrast: 'var(--color-secondary-contrast)'
-    },
-    error: {
-      main: 'var(--color-state-alert)'
-    },
-    warning: {
-      main: 'var(--color-state-warning)'
-    },
-    success: {
-      main: 'var(--color-state-ok)'
-    },
-    cta: {
-      main: 'var(--color-button-cta)',
-      contrast: 'var(--color-button-cta-contrast)'
-    },
-    text: {
-      primary: 'var(--color-text-high-emphasis)',
-      secondary: 'var(--color-text-medium-emphasis)',
-      tertiary: 'var(--color-text-low-emphasis)'
-    }
+const getContrastText = options => {
+  const {
+    background,
+    threshold,
+    textContrastColorLight = defaultTextLight.primary,
+    textContrastColorDark = defaultTextDark.primary
+  } = options ?? {};
+  if (!isColor(background)) {
+    return textContrastColorLight;
+  }
+  const contrastValue = getContrastRatio(background, textContrastColorDark, '#fff');
+  return contrastValue >= threshold ? textContrastColorDark : textContrastColorLight;
+};
+/**
+ * Adds a light or dark variant to a color intent if not already provided.
+ * @param options The options for adding the sub color.
+ * @returns The augmented color intent with the new variant added if it was
+ * missing.
+ */
+const addSubColor = options => {
+  const {
+    intent,
+    direction,
+    tonalOffset
+  } = options ?? {};
+  const tonalOffsetLight = tonalOffset;
+  const tonalOffsetDark = tonalOffset * 1.5;
+  const result = {
+    ...intent
   };
-  return {
-    ...palette,
-    grey
+  if (!intent[direction]) {
+    if (direction === 'light') {
+      // @ts-expect-error - We are sure about the type here
+      result.light = lighten(intent.main, tonalOffsetLight);
+    } else if (direction === 'dark') {
+      // @ts-expect-error - We are sure about the type here
+      result.dark = darken(intent.main, tonalOffsetDark);
+    }
+  }
+  return result;
+};
+/**
+ * Creates an augmented color object with "main", "dark" and "light" color + contrast text helper
+ * @param options The options for augmenting the color.
+ * @returns The augmented color object.
+ */
+const augmentColor = options => {
+  const {
+    color,
+    tonalOffset = 0.2,
+    contrastThreshold = 3,
+    textContrastColorLight,
+    textContrastColorDark
+  } = options ?? {};
+  if (!color?.main || !isColor(color.main)) {
+    return color;
+  }
+  let result = {
+    ...color
   };
+  result = addSubColor({
+    intent: result,
+    direction: 'dark',
+    tonalOffset
+  });
+  result = addSubColor({
+    intent: result,
+    direction: 'light',
+    tonalOffset
+  });
+  if (!result.contrastText) {
+    result.contrastText = getContrastText({
+      background: result.main,
+      threshold: contrastThreshold,
+      textContrastColorLight,
+      textContrastColorDark
+    });
+  }
+  return result;
+};
+
+/**
+ * Recursively transforms all color values in the palette using the provided transform function.
+ * @param palette The palette to transform.
+ * @param transformFn The function to apply to each color value in the palette.
+ * @returns The transformed palette
+ */
+const transformPalette = (palette, transformFn) => {
+  // @ts-expect-error - We are sure about the type here
+  function recurse(obj) {
+    return Object.fromEntries(
+    // @ts-expect-error - Object.entries is hard to type
+    Object.entries(obj).map(([key, value]) => {
+      if (isPlainObject(value)) {
+        return [key, recurse(value)];
+      }
+      if (isColor(value)) {
+        // @ts-expect-error - We are sure about the type here
+        return [key, transformFn(value)];
+      }
+      return [key, value];
+    }));
+  }
+  return recurse(palette);
+};
+/**
+ * Unifies color values in the palette to HSL and adds light/dark variants and contrast text
+ * where missing.
+ * @param options The options for extending the palette.
+ * @returns The extended palette.
+ */
+export const extendPalette = options => {
+  const {
+    palette,
+    tonalOffset,
+    contrastThreshold
+  } = options ?? {};
+  if (!isPlainObject(palette)) {
+    return palette;
+  }
+
+  // Convert all colors to HSL first to ensure consistent color manipulation
+  const hslPalette = transformPalette(palette, toHsl);
+
+  // Augment the palette with light/dark variants and contrast text
+  const augmentedPalette = Object.entries(hslPalette).reduce((acc, [key, value]) => {
+    // @ts-expect-error - We are sure about the type here
+    acc[key] = augmentColor({
+      // @ts-expect-error - We are sure about the type here
+      color: value,
+      tonalOffset,
+      contrastThreshold
+    });
+    return acc;
+  }, {});
+  return augmentedPalette;
+};
+
+/**
+ * Creates a palette object for the theme.
+ * @param inputPalette The input palette options.
+ * @returns The palette object.
+ */
+const createPalette = inputPalette => {
+  const {
+    tonalOffset = 0.2,
+    contrastThreshold = 3,
+    ...paletteOptions
+  } = inputPalette ?? {};
+  const mergedPalette = extendPalette({
+    palette: merge({}, paletteSchema, paletteOptions),
+    tonalOffset,
+    contrastThreshold
+  });
+  return mergedPalette;
 };
 export default createPalette;

package/styles/theme/createTheme/createPalette.types.d.ts

@@ -0,0 +1,165 @@
+type ColorPartialKeys = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'A100' | 'A200' | 'A400' | 'A700';
+export type ColorPartial = Record<ColorPartialKeys, string>;
+/**
+ * Represents a color with variants that are derived from the main color. Also includes a contrast
+ * text color that can be used for text on top of the main color.
+ */
+export type AugmentedPaletteColor = {
+    /**
+     * The main shade of the color
+     */
+    main: string;
+    /**
+     * A lighter shade of `main`
+     */
+    light?: string;
+    /**
+     * A darker shade of `main`
+     */
+    dark?: string;
+    /**
+     * Text color, intended to contrast with `main`
+     */
+    contrastText?: string;
+};
+/**
+ * Variant of the augmented palette color type where all properties are required.
+ *  Used for the final theme palette that can be used via `const { palette } = useTheme();`
+ */
+type AugmentedPaletteColorForTheme = Required<AugmentedPaletteColor>;
+type Leaf = string | number | boolean | null | undefined;
+/**
+ * Derives the **resolved** palette type from `paletteSchema`.
+ *
+ * Represents the palette after theme creation, where all color variants
+ * are guaranteed to exist.
+ *
+ * Rules:
+ * - Leaf values become `string`.
+ * - Objects containing `main` become `AugmentedPaletteColorForTheme`
+ *   (all variants required).
+ * - Other objects are recursively mapped.
+ *
+ */
+type PaletteFromSchema<T> = T extends Leaf ? string : T extends readonly (infer U)[] ? readonly PaletteFromSchema<U>[] : T extends object ? ('main' extends keyof T ? AugmentedPaletteColorForTheme : {
+    [K in keyof T]: PaletteFromSchema<T[K]>;
+}) : string;
+/**
+ * Derives the **input** palette type from `paletteSchema`.
+ *
+ * Represents what needs to be provided to `createTheme`.
+ *
+ * Rules:
+ * - Leaf values become `string`.
+ * - Objects containing `main` require `main` and allow optional
+ *   `light`, `dark`, and `contrastText`.
+ * - Other objects are recursively mapped.
+ */
+type PaletteInputFromSchema<T> = T extends Leaf ? string : T extends readonly (infer U)[] ? readonly PaletteInputFromSchema<U>[] : T extends object ? ('main' extends keyof T ? {
+    main: string;
+    light?: string;
+    dark?: string;
+    contrastText?: string;
+} : {
+    [K in keyof T]: PaletteInputFromSchema<T[K]>;
+}) : string;
+type PaletteKeysWithMain<T> = {
+    [K in keyof T]-?: T[K] extends {
+        main: unknown;
+    } ? K : never;
+}[keyof T];
+export type PaletteColorsWithMain = PaletteKeysWithMain<PaletteFromSchema<typeof paletteSchema>>;
+/**
+ * Schema that defines the shape of the palette object.
+ *
+ * Every new color added to the palette should be added here to get proper typings for the
+ * theme palette.
+ */
+export declare const paletteSchema: {
+    /**
+     * Color scheme for primary interface elements
+     */
+    readonly primary: {
+        readonly main: "";
+    };
+    /**
+     * Color scheme for secondary interface elements
+     */
+    readonly secondary: {
+        readonly main: "";
+    };
+    /**
+     * Color scheme for elements that the user should be made aware of
+     */
+    readonly error: {
+        readonly main: "";
+    };
+    /**
+     * Color scheme for potentially dangerous actions or important messages
+     */
+    readonly warning: {
+        readonly main: "";
+    };
+    /**
+     * Color scheme for the successful completion of an action that the user triggered
+     */
+    readonly success: {
+        readonly main: "";
+    };
+    /**
+     * Colors to be used for the background of various elements
+     */
+    readonly background: {
+        /**
+         * The color used for the background of the application
+         */
+        readonly default: "";
+    };
+    readonly text: {
+        readonly primary: "";
+        readonly secondary: "";
+    };
+    /**
+     * Palette with grey colors, intended for backgrounds, borders, and dividers.
+     * The numbers represent the lightness of the color,
+     */
+    readonly grey: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#eeeeee";
+        readonly 300: "#e0e0e0";
+        readonly 400: "#bdbdbd";
+        readonly 500: "#9e9e9e";
+        readonly 600: "#757575";
+        readonly 700: "#616161";
+        readonly 800: "#424242";
+        readonly 900: "#212121";
+        readonly A100: "#f5f5f5";
+        readonly A200: "#eeeeee";
+        readonly A400: "#bdbdbd";
+        readonly A700: "#616161";
+    };
+    readonly action: {
+        readonly disabled: "#808080";
+        readonly disabledBackground: "#CCCCCC";
+    };
+};
+/**
+ * Additional settings for the palette
+ */
+interface PaletteOptionsExtensions {
+    /**
+     * The tonal offset is used to calculate the light and dark variants of a color if they are not provided.
+     * @default 0.2
+     */
+    tonalOffset?: number;
+    /**
+     * The contrast threshold is used to determine which contrast text color to use for a given background
+     * @default 3
+     */
+    contrastThreshold?: number;
+}
+export type PaletteOptions = PaletteInputFromSchema<typeof paletteSchema> & PaletteOptionsExtensions;
+export type Palette = PaletteFromSchema<typeof paletteSchema>;
+export {};
+//# sourceMappingURL=createPalette.types.d.ts.map

package/styles/theme/createTheme/createPalette.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPalette.types.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createPalette.types.ts"],"names":[],"mappings":"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"}

package/styles/theme/createTheme/createPalette.types.js

@@ -0,0 +1,123 @@
+/**
+ * Represents a color with variants that are derived from the main color. Also includes a contrast
+ * text color that can be used for text on top of the main color.
+ */
+
+/**
+ * Variant of the augmented palette color type where all properties are required.
+ *  Used for the final theme palette that can be used via `const { palette } = useTheme();`
+ */
+
+/**
+ * Derives the **resolved** palette type from `paletteSchema`.
+ *
+ * Represents the palette after theme creation, where all color variants
+ * are guaranteed to exist.
+ *
+ * Rules:
+ * - Leaf values become `string`.
+ * - Objects containing `main` become `AugmentedPaletteColorForTheme`
+ *   (all variants required).
+ * - Other objects are recursively mapped.
+ *
+ */
+
+/**
+ * Derives the **input** palette type from `paletteSchema`.
+ *
+ * Represents what needs to be provided to `createTheme`.
+ *
+ * Rules:
+ * - Leaf values become `string`.
+ * - Objects containing `main` require `main` and allow optional
+ *   `light`, `dark`, and `contrastText`.
+ * - Other objects are recursively mapped.
+ */
+
+// Creates a type with only the keys of the palette that have a "main" color
+
+const grey = {
+  50: '#fafafa',
+  100: '#f5f5f5',
+  200: '#eeeeee',
+  300: '#e0e0e0',
+  400: '#bdbdbd',
+  500: '#9e9e9e',
+  600: '#757575',
+  700: '#616161',
+  800: '#424242',
+  900: '#212121',
+  A100: '#f5f5f5',
+  A200: '#eeeeee',
+  A400: '#bdbdbd',
+  A700: '#616161'
+};
+
+/**
+ * Schema that defines the shape of the palette object.
+ *
+ * Every new color added to the palette should be added here to get proper typings for the
+ * theme palette.
+ */
+export const paletteSchema = {
+  /**
+   * Color scheme for primary interface elements
+   */
+  primary: {
+    main: ''
+  },
+  /**
+   * Color scheme for secondary interface elements
+   */
+  secondary: {
+    main: ''
+  },
+  /**
+   * Color scheme for elements that the user should be made aware of
+   */
+  error: {
+    main: ''
+  },
+  /**
+   * Color scheme for potentially dangerous actions or important messages
+   */
+  warning: {
+    main: ''
+  },
+  /**
+   * Color scheme for the successful completion of an action that the user triggered
+   */
+  success: {
+    main: ''
+  },
+  /**
+   * Colors to be used for the background of various elements
+   */
+  background: {
+    /**
+     * The color used for the background of the application
+     */
+    default: ''
+  },
+  text: {
+    primary: '',
+    secondary: ''
+  },
+  /**
+   * Palette with grey colors, intended for backgrounds, borders, and dividers.
+   * The numbers represent the lightness of the color,
+   */
+  grey,
+  action: {
+    disabled: '#808080',
+    disabledBackground: '#CCCCCC'
+  }
+};
+
+/**
+ * Additional settings for the palette
+ */
+
+// The palette options type represents the palette input that can be provided to createTheme
+
+// The final palette type represents the palette after theme creation

package/styles/theme/createTheme/createShape.d.ts

@@ -0,0 +1,11 @@
+export interface Shape {
+    borderRadius: number | string;
+}
+export type ShapeOptions = Partial<Shape>;
+/**
+ * Creates a shape object based on the provided options, with defaults for any missing values.
+ * @param options The shape options to customize the shape object.
+ * @returns A shape object with the specified options and defaults for any missing values.
+ */
+export default function createShape(options?: ShapeOptions): Shape;
+//# sourceMappingURL=createShape.d.ts.map

package/styles/theme/createTheme/createShape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createShape.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createShape.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAM1C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,OAAO,GAAE,YAAiB,GAAG,KAAK,CAKrE"}

package/styles/theme/createTheme/createShape.js

@@ -0,0 +1,15 @@
+const shape = {
+  borderRadius: 4
+};
+
+/**
+ * Creates a shape object based on the provided options, with defaults for any missing values.
+ * @param options The shape options to customize the shape object.
+ * @returns A shape object with the specified options and defaults for any missing values.
+ */
+export default function createShape(options = {}) {
+  return {
+    ...shape,
+    ...options
+  };
+}

package/styles/theme/createTheme/createThemeFromColorScheme.d.ts

@@ -0,0 +1,30 @@
+import type { ColorSchemeOptions, BaseTheme } from './types';
+/**
+ * Helper function to add an alpha value to a color.
+ * @param color The color to modify.
+ * @param coefficient The alpha coefficient to apply, either a number or a string representing a CSS calculation.
+ * @returns A string representing the color with the applied alpha value.
+ */
+export declare const alpha: (color: string, coefficient: number | string) => string;
+/**
+ * Helper function to lighten a color by a given coefficient.
+ * @param color The color to modify.
+ * @param coefficient The coefficient to apply, either a number or a string representing a CSS calculation.
+ * @returns A string representing the lightened color.
+ */
+export declare const lighten: (color: string, coefficient?: number | string) => string;
+/**
+ * Helper function to darken a color by a given coefficient.
+ * @param color The color to modify.
+ * @param coefficient The coefficient to apply, either a number or a string representing a CSS calculation.
+ * @returns A string representing the darkened color.
+ */
+export declare const darken: (color: string, coefficient?: number | string) => string;
+/**
+ * Creates a theme object for a given color scheme (light or dark).
+ * @param colorScheme The color scheme options.
+ * @returns A theme object for the given color scheme.
+ */
+declare const createThemeFromColorScheme: (colorScheme: ColorSchemeOptions) => BaseTheme;
+export default createThemeFromColorScheme;
+//# sourceMappingURL=createThemeFromColorScheme.d.ts.map

package/styles/theme/createTheme/createThemeFromColorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createThemeFromColorScheme.d.ts","sourceRoot":"","sources":["../../../../styles/theme/createTheme/createThemeFromColorScheme.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAc7D;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAChB,OAAO,MAAM,EACb,aAAa,MAAM,GAAG,MAAM,KAC3B,MAAkH,CAAC;AAEtH;;;;;GAKG;AACH,eAAO,MAAM,OAAO,GAClB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;;GAKG;AACH,eAAO,MAAM,MAAM,GACjB,OAAO,MAAM,EACb,cAAa,MAAM,GAAG,MAAY,KACjC,MAAuF,CAAC;AAE3F;;;;GAIG;AACH,QAAA,MAAM,0BAA0B,GAAI,aAAa,kBAAkB,KAAG,SA0BrE,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/styles/theme/createTheme/createThemeFromColorScheme.js

@@ -0,0 +1,70 @@
+import createPalette from "./createPalette";
+import createTypography from "./createTypography";
+import createComponents from "./createComponents";
+import createShape from "./createShape";
+import shadows from "./shadows";
+/**
+ * Calculates the percentage value for a given coefficient, which can be a number or a string representing a CSS calculation.
+ * @param coefficient The coefficient to convert, either a number or a string.
+ * @returns A string representing the percentage value of the coefficient.
+ */
+const coefficientToPercentage = coefficient => {
+  if (typeof coefficient === 'number') {
+    return `${(coefficient * 100).toFixed(0)}%`;
+  }
+  return `calc((${coefficient}) * 100%)`;
+};
+
+/**
+ * Helper function to add an alpha value to a color.
+ * @param color The color to modify.
+ * @param coefficient The alpha coefficient to apply, either a number or a string representing a CSS calculation.
+ * @returns A string representing the color with the applied alpha value.
+ */
+export const alpha = (color, coefficient) => `oklch(from ${color} l c h / ${typeof coefficient === 'string' ? `calc(${coefficient})` : coefficient})`;
+
+/**
+ * Helper function to lighten a color by a given coefficient.
+ * @param color The color to modify.
+ * @param coefficient The coefficient to apply, either a number or a string representing a CSS calculation.
+ * @returns A string representing the lightened color.
+ */
+export const lighten = (color, coefficient = 0.2) => `color-mix(in oklch, ${color}, #fff ${coefficientToPercentage(coefficient)})`;
+
+/**
+ * Helper function to darken a color by a given coefficient.
+ * @param color The color to modify.
+ * @param coefficient The coefficient to apply, either a number or a string representing a CSS calculation.
+ * @returns A string representing the darkened color.
+ */
+export const darken = (color, coefficient = 0.2) => `color-mix(in oklch, ${color}, #000 ${coefficientToPercentage(coefficient)})`;
+
+/**
+ * Creates a theme object for a given color scheme (light or dark).
+ * @param colorScheme The color scheme options.
+ * @returns A theme object for the given color scheme.
+ */
+const createThemeFromColorScheme = colorScheme => {
+  const {
+    palette: paletteInput = {},
+    typography: typographyInput = {},
+    components: componentsInput = {},
+    shape: shapeInput = {}
+  } = colorScheme;
+  const palette = createPalette(paletteInput);
+  const typography = createTypography(palette, typographyInput);
+  const components = createComponents(componentsInput);
+  const shape = createShape(shapeInput);
+  const theme = {
+    palette,
+    typography,
+    components,
+    shape,
+    shadows,
+    alpha,
+    lighten,
+    darken
+  };
+  return theme;
+};
+export default createThemeFromColorScheme;