@shipengine/giger-theme 0.3.0 → 0.4.0

package/dist/lib/Theme.d.ts

@@ -0,0 +1,526 @@
+import * as csstype from 'csstype';
+import { FontFacesVariables } from './FontFaces.js';
+import { GridVariables } from './Grid.js';
+import { CardVariables } from './Card.js';
+import { TypographyVariables } from './Typographies.js';
+import { PaletteVariables } from './Palette.js';
+import { IconsVariables } from './Icons.js';
+import { BorderRadiusVariables } from './BorderRadius.js';
+import { ComponentsVariables } from './Components/Components.js';
+import { ElevationsVariables } from './Elevations.js';
+import { BreakpointsVariables } from './Breakpoints.js';
+import { ThemeData, CustomThemeData } from './ThemeTypes.js';
+
+declare class Theme implements ThemeData {
+    borderRadius: BorderRadiusVariables & {
+        XS?: string | undefined;
+        S?: string | undefined;
+        M?: string | undefined;
+        L?: string | undefined;
+        XL?: string | undefined;
+    };
+    breakPoints: BreakpointsVariables & {
+        mobileLarge?: number | undefined;
+        tablet?: number | undefined;
+        tabletLarge?: number | undefined;
+        desktop?: number | undefined;
+    };
+    iconSize: IconsVariables & {
+        small?: string | undefined;
+        medium?: string | undefined;
+        regular?: string | undefined;
+        large?: string | undefined;
+        extra_large?: string | undefined;
+    };
+    palette: PaletteVariables & {
+        primary?: {
+            main?: string | undefined;
+            light?: string | undefined;
+            dark?: string | undefined;
+            ultraLight?: string | undefined;
+        } | undefined;
+        secondary?: {
+            main?: string | undefined;
+            light?: string | undefined;
+            dark?: string | undefined;
+            ultraLight?: string | undefined;
+        } | undefined;
+        alert?: {
+            main?: string | undefined;
+            light?: string | undefined;
+        } | undefined;
+        info?: {
+            main?: string | undefined;
+            light?: string | undefined;
+        } | undefined;
+        success?: {
+            main?: string | undefined;
+            light?: string | undefined;
+        } | undefined;
+        error?: {
+            main?: string | undefined;
+            light?: string | undefined;
+        } | undefined;
+        gray?: {
+            main?: string | undefined;
+            light?: string | undefined;
+            dark?: string | undefined;
+            ultraLight?: string | undefined;
+            megaLight?: string | undefined;
+        } | undefined;
+        black?: string | undefined;
+        white?: string | undefined;
+        dataVisualization?: {
+            highContrast?: {
+                blueDark?: string | undefined;
+                coral?: string | undefined;
+                purpleDark?: string | undefined;
+                orange?: string | undefined;
+                purple?: string | undefined;
+                orangeDark?: string | undefined;
+                blue?: string | undefined;
+                cyan?: string | undefined;
+                pink?: string | undefined;
+                green?: string | undefined;
+            } | undefined;
+            lowContrast?: {
+                blueDark?: string | undefined;
+                coral?: string | undefined;
+                purpleDark?: string | undefined;
+                orange?: string | undefined;
+                purple?: string | undefined;
+                orangeDark?: string | undefined;
+                blue?: string | undefined;
+                cyan?: string | undefined;
+                pink?: string | undefined;
+                green?: string | undefined;
+            } | undefined;
+        } | undefined;
+    };
+    spacingBase: number;
+    typography: TypographyVariables & {
+        fontSize?: {
+            XS?: string | undefined;
+            S?: string | undefined;
+            M?: string | undefined;
+            L?: string | undefined;
+            XL?: string | undefined;
+            XXS?: string | undefined;
+            XXL?: string | undefined;
+            XXXL?: string | undefined;
+            XXXXL?: string | undefined;
+        } | undefined;
+        fontWeight?: {
+            light?: number | undefined;
+            normal?: number | undefined;
+            semibold?: number | undefined;
+            bold?: number | undefined;
+        } | undefined;
+        lineHeight?: {
+            S?: string | undefined;
+            M?: string | undefined;
+            L?: string | undefined;
+            XL?: string | undefined;
+            XXL?: string | undefined;
+            XXXL?: string | undefined;
+        } | undefined;
+        letterSpacing?: {
+            S?: number | undefined;
+            M?: number | undefined;
+            L?: number | undefined;
+            XL?: number | undefined;
+            XXL?: number | undefined;
+            XXXL?: number | undefined;
+        } | undefined;
+    };
+    card: CardVariables & {
+        borderRadius?: {
+            mobile?: string | undefined;
+            tablet?: string | undefined;
+            desktop?: string | undefined;
+        } | undefined;
+    };
+    elevations: ElevationsVariables & {
+        flat1?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        flat2?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        above?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        sticky?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        raised?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        raisedInverted1?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        raisedInverted2?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        popout1?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        popout2?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        backdrop?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        overlay1?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+        overlay2?: {
+            boxShadow?: string | undefined;
+            zIndex?: number | undefined;
+        } | undefined;
+    };
+    grid: GridVariables & {
+        mobile?: {
+            columns?: number | undefined;
+            horizontalSpace?: number | undefined;
+            verticalSpace?: number | undefined;
+            gutter?: number | undefined;
+        } | undefined;
+        mobileLarge?: {
+            columns?: number | undefined;
+            horizontalSpace?: number | undefined;
+            verticalSpace?: number | undefined;
+            gutter?: number | undefined;
+        } | undefined;
+        tablet?: {
+            columns?: number | undefined;
+            horizontalSpace?: number | undefined;
+            verticalSpace?: number | undefined;
+            gutter?: number | undefined;
+        } | undefined;
+        tabletLarge?: {
+            columns?: number | undefined;
+            horizontalSpace?: number | undefined;
+            verticalSpace?: number | undefined;
+            gutter?: number | undefined;
+        } | undefined;
+        desktop?: {
+            columns?: number | undefined;
+            horizontalSpace?: number | undefined;
+            verticalSpace?: number | undefined;
+            gutter?: number | undefined;
+        } | undefined;
+        desktopLarge?: {
+            columns?: number | undefined;
+            horizontalSpace?: number | undefined;
+            verticalSpace?: number | undefined;
+            gutter?: number | undefined;
+        } | undefined;
+    };
+    fontFaces: FontFacesVariables[];
+    defaultFontFamily: string;
+    components: {
+        Chip?: {
+            backgroundColor?: string | undefined;
+            border?: string | undefined;
+            borderRadius?: string | undefined;
+            color?: string | undefined;
+            fontWeight?: number | undefined;
+            padding?: string | undefined;
+            isSelected?: {
+                border?: string | undefined;
+                backgroundColor?: string | undefined;
+                color?: string | undefined;
+            } | undefined;
+        } | undefined;
+        Link?: {
+            defaultColor?: string | undefined;
+            visitedColor?: string | undefined;
+            hoverColor?: string | undefined;
+            activeColor?: string | undefined;
+            isDark?: {
+                defaultColor?: string | undefined;
+                visitedColor?: string | undefined;
+                hoverColor?: string | undefined;
+                activeColor?: string | undefined;
+            } | undefined;
+        } | undefined;
+        Button?: {
+            borderRadius?: string | undefined;
+        } | undefined;
+        Dialog?: {
+            action?: {
+                justifyContent?: string | undefined;
+            } | undefined;
+            content?: {
+                textAlign?: csstype.Property.TextAlign | undefined;
+                padding?: number | undefined;
+            } | undefined;
+            dialog?: {
+                backgroundColor?: string | undefined;
+                borderRadius?: string | undefined;
+            } | undefined;
+            header?: {
+                titleColor?: string | undefined;
+                padding?: number | undefined;
+                borderBottom?: string | undefined;
+            } | undefined;
+        } | undefined;
+        Typography?: {
+            heading1?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading2?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading3?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading4?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading5?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading6?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            subtitle1?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            subtitle2?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            body1?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            body2?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            small?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+        } | undefined;
+        Checkbox?: {
+            borderRadius?: string | undefined;
+            square?: boolean | undefined;
+        } | undefined;
+        Field?: {
+            fontWeight?: number | undefined;
+            color?: string | undefined;
+            placeholder?: {
+                fontWeight?: number | undefined;
+            } | undefined;
+        } | undefined;
+        FieldContainer?: {
+            borderRadius?: string | undefined;
+        } | undefined;
+        Table?: {
+            border?: string | undefined;
+            borderRadius?: string | undefined;
+            boxShadow?: string | undefined;
+        } | undefined;
+    };
+    constructor({ borderRadius, breakPoints, iconSize, palette, spacingBase, typography, card, elevations, grid, fontFaces, defaultFontFamily, components, }?: CustomThemeData);
+    private removePx;
+    mediaQuery: (breakpoint: keyof BreakpointsVariables) => string;
+    getComponent: <Component extends keyof ComponentsVariables>(component: Component) => ComponentsVariables[Component];
+    getComponentOverride: <Component extends keyof ComponentsVariables>(component: Component) => NonNullable<{
+        Chip?: {
+            backgroundColor?: string | undefined;
+            border?: string | undefined;
+            borderRadius?: string | undefined;
+            color?: string | undefined;
+            fontWeight?: number | undefined;
+            padding?: string | undefined;
+            isSelected?: {
+                border?: string | undefined;
+                backgroundColor?: string | undefined;
+                color?: string | undefined;
+            } | undefined;
+        } | undefined;
+        Link?: {
+            defaultColor?: string | undefined;
+            visitedColor?: string | undefined;
+            hoverColor?: string | undefined;
+            activeColor?: string | undefined;
+            isDark?: {
+                defaultColor?: string | undefined;
+                visitedColor?: string | undefined;
+                hoverColor?: string | undefined;
+                activeColor?: string | undefined;
+            } | undefined;
+        } | undefined;
+        Button?: {
+            borderRadius?: string | undefined;
+        } | undefined;
+        Dialog?: {
+            action?: {
+                justifyContent?: string | undefined;
+            } | undefined;
+            content?: {
+                textAlign?: csstype.Property.TextAlign | undefined;
+                padding?: number | undefined;
+            } | undefined;
+            dialog?: {
+                backgroundColor?: string | undefined;
+                borderRadius?: string | undefined;
+            } | undefined;
+            header?: {
+                titleColor?: string | undefined;
+                padding?: number | undefined;
+                borderBottom?: string | undefined;
+            } | undefined;
+        } | undefined;
+        Typography?: {
+            heading1?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading2?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading3?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading4?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading5?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            heading6?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            subtitle1?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            subtitle2?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            body1?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            body2?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+            small?: {
+                fontSize?: string | undefined;
+                fontWeight?: number | undefined;
+                lineHeight?: string | undefined;
+                letterSpacing?: number | undefined;
+            } | undefined;
+        } | undefined;
+        Checkbox?: {
+            borderRadius?: string | undefined;
+            square?: boolean | undefined;
+        } | undefined;
+        Field?: {
+            fontWeight?: number | undefined;
+            color?: string | undefined;
+            placeholder?: {
+                fontWeight?: number | undefined;
+            } | undefined;
+        } | undefined;
+        FieldContainer?: {
+            borderRadius?: string | undefined;
+        } | undefined;
+        Table?: {
+            border?: string | undefined;
+            borderRadius?: string | undefined;
+            boxShadow?: string | undefined;
+        } | undefined;
+    }[Component]>;
+    spacing: (multiplier?: number) => number;
+    getElevation: (elevation: keyof ElevationsVariables) => {
+        boxShadow: string;
+        zIndex: number;
+    };
+    getCardStyle: () => {
+        [x: string]: string | {
+            borderRadius: string;
+        };
+        backgroundColor: string;
+        borderRadius: string;
+    };
+    toRem: (fontSizePx: string, baseFontSizePx?: string) => string;
+    toEm: (percentage: number) => string;
+    toPercentage: (value: number) => string;
+    toRGBA: (hexCode: string, alpha: number | string) => string;
+    getLineHeight: (fontSizePx: string, lineHeightPx: string) => number;
+}
+
+export { Theme };

package/dist/lib/Theme.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var merge = require('lodash/fp/merge');
+var fallback = require('./FallbackTheme/fallback.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var merge__default = /*#__PURE__*/_interopDefault(merge);
+
+class Theme {
+  constructor() {
+    let {
+      borderRadius = {},
+      breakPoints = {},
+      iconSize = {},
+      palette = {},
+      spacingBase,
+      typography = {},
+      card = {},
+      elevations = {},
+      grid = {},
+      fontFaces,
+      defaultFontFamily,
+      components = {}
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    this.borderRadius = merge__default.default(fallback.fallbackTheme.borderRadius, borderRadius);
+    this.breakPoints = merge__default.default(fallback.fallbackTheme.breakPoints, breakPoints);
+    this.iconSize = merge__default.default(fallback.fallbackTheme.iconSize, iconSize);
+    this.palette = merge__default.default(fallback.fallbackTheme.palette, palette);
+    this.spacingBase = spacingBase || fallback.fallbackTheme.spacingBase;
+    this.typography = merge__default.default(fallback.fallbackTheme.typography, typography);
+    this.card = merge__default.default(fallback.fallbackTheme.card, card);
+    this.elevations = merge__default.default(fallback.fallbackTheme.elevations, elevations);
+    this.grid = merge__default.default(fallback.fallbackTheme.grid, grid);
+    this.fontFaces = fontFaces || fallback.fallbackTheme.fontFaces;
+    this.defaultFontFamily = defaultFontFamily || fallback.fallbackTheme.defaultFontFamily;
+    this.components = components;
+  }
+  removePx = px => parseInt(px.substring(0, px.indexOf('px')));
+  mediaQuery = breakpoint => `@media (min-width: ${this.breakPoints[breakpoint]}px)`;
+
+  /*
+   * @deprecated Please use getComponentOverride. Types may not be accurate if used outside @packlink/brands
+   * We switched to allow partial component overrides, so this styling may be incomplete
+   */
+  getComponent = component => this.components[component] || {};
+  getComponentOverride = component => {
+    return this.components[component] || {};
+  };
+  spacing = (() => {
+    var _this = this;
+    return function () {
+      let multiplier = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      return _this.spacingBase * multiplier;
+    };
+  })();
+  getElevation = elevation => ({
+    boxShadow: this.elevations[elevation].boxShadow,
+    zIndex: this.elevations[elevation].zIndex
+  });
+  getCardStyle = () => ({
+    backgroundColor: this.palette.white,
+    borderRadius: this.card.borderRadius.mobile,
+    [this.mediaQuery('tablet')]: {
+      borderRadius: this.card.borderRadius.tablet
+    },
+    [this.mediaQuery('desktop')]: {
+      borderRadius: this.card.borderRadius.desktop
+    }
+  });
+  toRem = (() => {
+    var _this2 = this;
+    return function (fontSizePx) {
+      let baseFontSizePx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this2.typography.fontSize.M;
+      return `${_this2.removePx(fontSizePx) / _this2.removePx(baseFontSizePx)}rem`;
+    };
+  })();
+  toEm = percentage => `${percentage / 100}em`;
+  toPercentage = value => `${value * 100}%`;
+  toRGBA = (hexCode, alpha) => {
+    let hex = hexCode.replace('#', '');
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    const red = parseInt(hex.substring(0, 2), 16),
+      green = parseInt(hex.substring(2, 4), 16),
+      blue = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  };
+  getLineHeight = (fontSizePx, lineHeightPx) => this.removePx(lineHeightPx) / this.removePx(fontSizePx);
+}
+
+exports.Theme = Theme;
+//# sourceMappingURL=Theme.js.map

package/dist/lib/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.js","sources":["../../src/Theme.ts"],"sourcesContent":["import merge from 'lodash/fp/merge';\n\nimport { ComponentsVariables, CustomComponentsVariables } from './Components';\nimport { ElevationsVariables } from './Elevations';\nimport { BreakpointsVariables } from './Breakpoints';\nimport { fallbackTheme } from './FallbackTheme';\nimport { CustomThemeData, ThemeData } from './ThemeTypes';\n\nexport class Theme implements ThemeData {\n    public borderRadius;\n    public breakPoints;\n    public iconSize;\n    public palette;\n    public spacingBase;\n    public typography;\n    public card;\n    public elevations;\n    public grid;\n    public fontFaces;\n    public defaultFontFamily;\n    public components;\n\n    constructor({\n        borderRadius = {},\n        breakPoints = {},\n        iconSize = {},\n        palette = {},\n        spacingBase,\n        typography = {},\n        card = {},\n        elevations = {},\n        grid = {},\n        fontFaces,\n        defaultFontFamily,\n        components = {},\n    }: CustomThemeData = {}) {\n        this.borderRadius = merge(fallbackTheme.borderRadius, borderRadius);\n        this.breakPoints = merge(fallbackTheme.breakPoints, breakPoints);\n        this.iconSize = merge(fallbackTheme.iconSize, iconSize);\n        this.palette = merge(fallbackTheme.palette, palette);\n        this.spacingBase = spacingBase || fallbackTheme.spacingBase;\n        this.typography = merge(fallbackTheme.typography, typography);\n        this.card = merge(fallbackTheme.card, card);\n        this.elevations = merge(fallbackTheme.elevations, elevations);\n        this.grid = merge(fallbackTheme.grid, grid);\n        this.fontFaces = fontFaces || fallbackTheme.fontFaces;\n        this.defaultFontFamily = defaultFontFamily || fallbackTheme.defaultFontFamily;\n        this.components = components;\n    }\n\n    private removePx = (px: string): number => parseInt(px.substring(0, px.indexOf('px')));\n\n    mediaQuery = (breakpoint: keyof BreakpointsVariables): string =>\n        `@media (min-width: ${this.breakPoints[breakpoint]}px)`;\n\n    /*\n     * @deprecated Please use getComponentOverride. Types may not be accurate if used outside @packlink/brands\n     * We switched to allow partial component overrides, so this styling may be incomplete\n     */\n    getComponent = <Component extends keyof ComponentsVariables>(\n        component: Component\n    ): ComponentsVariables[Component] => (this.components[component] || {}) as ComponentsVariables[Component];\n\n    getComponentOverride = <Component extends keyof ComponentsVariables>(\n        component: Component\n    ): NonNullable<CustomComponentsVariables[Component]> => {\n        return this.components[component] || {};\n    };\n\n    spacing = (multiplier = 1): number => this.spacingBase * multiplier;\n\n    getElevation = (elevation: keyof ElevationsVariables) => ({\n        boxShadow: this.elevations[elevation].boxShadow,\n        zIndex: this.elevations[elevation].zIndex,\n    });\n\n    getCardStyle = () => ({\n        backgroundColor: this.palette.white,\n        borderRadius: this.card.borderRadius.mobile,\n        [this.mediaQuery('tablet')]: {\n            borderRadius: this.card.borderRadius.tablet,\n        },\n        [this.mediaQuery('desktop')]: {\n            borderRadius: this.card.borderRadius.desktop,\n        },\n    });\n\n    toRem = (fontSizePx: string, baseFontSizePx: string = this.typography.fontSize.M): string =>\n        `${this.removePx(fontSizePx) / this.removePx(baseFontSizePx)}rem`;\n\n    toEm = (percentage: number): string => `${percentage / 100}em`;\n\n    toPercentage = (value: number): string => `${value * 100}%`;\n\n    toRGBA = (hexCode: string, alpha: number | string): string => {\n        let hex = hexCode.replace('#', '');\n\n        if (hex.length === 3) {\n            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n        }\n\n        const red = parseInt(hex.substring(0, 2), 16),\n            green = parseInt(hex.substring(2, 4), 16),\n            blue = parseInt(hex.substring(4, 6), 16);\n\n        return `rgba(${red}, ${green}, ${blue}, ${alpha})`;\n    };\n\n    getLineHeight = (fontSizePx: string, lineHeightPx: string): number =>\n        this.removePx(lineHeightPx) / this.removePx(fontSizePx);\n}\n"],"names":["Theme","constructor","borderRadius","breakPoints","iconSize","palette","spacingBase","typography","card","elevations","grid","fontFaces","defaultFontFamily","components","arguments","length","undefined","merge","fallbackTheme","removePx","px","parseInt","substring","indexOf","mediaQuery","breakpoint","getComponent","component","getComponentOverride","spacing","_this","multiplier","getElevation","elevation","boxShadow","zIndex","getCardStyle","backgroundColor","white","mobile","tablet","desktop","toRem","_this2","fontSizePx","baseFontSizePx","fontSize","M","toEm","percentage","toPercentage","value","toRGBA","hexCode","alpha","hex","replace","red","green","blue","getLineHeight","lineHeightPx"],"mappings":"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"}

package/dist/lib/ThemeTypes.d.ts

@@ -0,0 +1,31 @@
+import { BorderRadiusVariables } from './BorderRadius.js';
+import { BreakpointsVariables } from './Breakpoints.js';
+import { CardVariables } from './Card.js';
+import { CustomComponentsVariables } from './Components/Components.js';
+import { ElevationsVariables } from './Elevations.js';
+import { FontFacesVariables } from './FontFaces.js';
+import { GridVariables } from './Grid.js';
+import { IconsVariables } from './Icons.js';
+import { PaletteVariables } from './Palette.js';
+import { DeepPartial } from './Types.js';
+import { TypographyVariables } from './Typographies.js';
+
+interface CustomThemeData extends DeepPartial<ThemeData> {
+    fontFaces?: FontFacesVariables[];
+}
+interface ThemeData {
+    borderRadius: BorderRadiusVariables;
+    breakPoints: BreakpointsVariables;
+    iconSize: IconsVariables;
+    palette: PaletteVariables;
+    spacingBase: number;
+    typography: TypographyVariables;
+    card: CardVariables;
+    elevations: ElevationsVariables;
+    grid: GridVariables;
+    defaultFontFamily: string;
+    components?: CustomComponentsVariables;
+    fontFaces: FontFacesVariables[];
+}
+
+export { CustomThemeData, ThemeData };

package/dist/lib/Types.d.ts

@@ -0,0 +1,5 @@
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+
+export { DeepPartial };