@kaizen/components 1.4.16 → 1.4.18

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.18](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.17...@kaizen/components@1.4.18) (2023-02-28)
+
+**Note:** Version bump only for package @kaizen/components
+
+
+
+
+
+## [1.4.17](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.16...@kaizen/components@1.4.17) (2023-02-28)
+
+
+### Bug Fixes
+
+* design-tokens-aio-import ([#3323](https://github.com/cultureamp/kaizen-design-system/issues/3323)) ([9dcf307](https://github.com/cultureamp/kaizen-design-system/commit/9dcf30761a5c8886c64b207ddb9484e8f8fb3962))
+
+
+
+
+
 ## [1.4.16](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/components@1.4.15...@kaizen/components@1.4.16) (2023-02-27)
 
 

package/dist/KaizenProvider/ThemeProvider/index.d.ts

@@ -1,16 +1,7 @@
-import React, { Context } from 'react';
-import { Theme } from '@kaizen/design-tokens';
-import { ThemeManager } from './ThemeManager.js';
-
-declare const ThemeContext: Context<Theme>;
-/**
- * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
- * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
- */
-declare const ThemeProvider: ({ themeManager, ...props }: {
-    themeManager?: ThemeManager<Theme> | undefined;
-    children: React.ReactNode;
-}) => JSX.Element;
-declare const useTheme: () => Theme;
-
-export { ThemeContext, ThemeManager, ThemeProvider, useTheme };
+export { T as ThemeContext, a as ThemeProvider, u as useTheme } from '../../ThemeProvider-7786826c.js';
+export { ThemeManager } from './ThemeManager.js';
+export { defaultTheme } from './themes/index.js';
+export { default as heartTheme } from './themes/heart.js';
+export { CSSVariableTheme, DeepMapObjectLeafs, Theme, ThemeKey, TypographyFont } from './themes/types.js';
+import '@kaizen/design-tokens';
+import 'react';

package/dist/KaizenProvider/ThemeProvider/index.js

@@ -2,13 +2,22 @@
 
 
 
-var _chunkRZK3BIEOjs = require('../../chunk-RZK3BIEO.js');
+var _chunkMXW3YHBEjs = require('../../chunk-MXW3YHBE.js');
+
+
+var _chunkWDAFEOSVjs = require('../../chunk-WDAFEOSV.js');
+require('../../chunk-FBL47PXS.js');
 
 
 var _chunkJ42JQYBYjs = require('../../chunk-J42JQYBY.js');
 
 
+var _chunk7T4E5A7Mjs = require('../../chunk-7T4E5A7M.js');
+
+
+
+
 
 
 
-exports.ThemeContext = _chunkRZK3BIEOjs.ThemeContext; exports.ThemeManager = _chunkJ42JQYBYjs.ThemeManager; exports.ThemeProvider = _chunkRZK3BIEOjs.ThemeProvider; exports.useTheme = _chunkRZK3BIEOjs.useTheme;
+exports.ThemeContext = _chunkMXW3YHBEjs.ThemeContext; exports.ThemeManager = _chunkJ42JQYBYjs.ThemeManager; exports.ThemeProvider = _chunkMXW3YHBEjs.ThemeProvider; exports.defaultTheme = _chunkWDAFEOSVjs.defaultTheme; exports.heartTheme = _chunk7T4E5A7Mjs.heartTheme; exports.useTheme = _chunkMXW3YHBEjs.useTheme;

package/dist/KaizenProvider/ThemeProvider/themes/heart.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from './types.js';
+import 'react';
+
+declare const heartTheme: Theme;
+
+export { heartTheme as default, heartTheme };

package/dist/KaizenProvider/ThemeProvider/themes/heart.js

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunk7T4E5A7Mjs = require('../../../chunk-7T4E5A7M.js');
+
+
+
+exports.default = _chunk7T4E5A7Mjs.heart_default; exports.heartTheme = _chunk7T4E5A7Mjs.heartTheme;

package/dist/KaizenProvider/ThemeProvider/themes/index.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from './types.js';
+export { CSSVariableTheme, DeepMapObjectLeafs, ThemeKey, TypographyFont } from './types.js';
+export { default as heartTheme } from './heart.js';
+import 'react';
+
+declare const defaultTheme: Theme;
+
+export { Theme, defaultTheme };

package/dist/KaizenProvider/ThemeProvider/themes/index.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkWDAFEOSVjs = require('../../../chunk-WDAFEOSV.js');
+require('../../../chunk-FBL47PXS.js');
+
+
+var _chunk7T4E5A7Mjs = require('../../../chunk-7T4E5A7M.js');
+
+
+
+exports.defaultTheme = _chunkWDAFEOSVjs.defaultTheme; exports.heartTheme = _chunk7T4E5A7Mjs.heartTheme;

package/dist/KaizenProvider/ThemeProvider/themes/types.d.ts

@@ -0,0 +1,231 @@
+import { CSSProperties } from 'react';
+
+/**
+ * Use a custom type for CSS properties becauase we should eventually write a more strongly typed version using template literal types.
+ * This could definitely be contributed back to the community too. An example starting point here https://github.com/ghoullier/awesome-template-literal-types#css-parser
+ * For example:
+ * ```ts
+ * type Font = {
+ *   fontSize: `${number}rem`,
+ *
+ *  }
+ * type HexDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F ;
+ * type Color = `rgba(${number}, ${number}, ${number}, ${number}) | #${HexDigit}${HexDigit}${HexDigit}` // You get the point
+ *
+ * ```
+ * */
+type KaizenCSSProperties = CSSProperties;
+type Hex = string;
+type TypographyFont = {
+    fontFamily: KaizenCSSProperties["fontFamily"];
+    fontWeight: KaizenCSSProperties["fontWeight"];
+    fontSize: KaizenCSSProperties["fontSize"];
+    lineHeight: KaizenCSSProperties["lineHeight"];
+    letterSpacing: KaizenCSSProperties["letterSpacing"];
+};
+type ThemeKey = "heart" | "custom";
+type Theme = {
+    themeKey: ThemeKey;
+    border: {
+        solid: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        dashed: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+        borderless: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        focusRing: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+    };
+    animation: {
+        easingFunction: {
+            easeInOut: string;
+            easeIn: string;
+            easeOut: string;
+            linear: string;
+            bounceIn: string;
+            bounceOut: string;
+            bounceInOut: string;
+        };
+        duration: {
+            instant: string;
+            immediate: string;
+            rapid: string;
+            fast: string;
+            slow: string;
+            deliberate: string;
+        };
+    };
+    color: {
+        purple: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+            "800": Hex;
+        };
+        blue: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        green: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        yellow: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        red: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        orange: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        gray: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+        };
+        white: Hex;
+    };
+    dataViz: {
+        favorable: Hex;
+        unfavorable: Hex;
+    };
+    layout: {
+        contentMaxWidth: string;
+        contentMaxWidthWithSidebar: string;
+        contentSideMargin: string;
+        mobileActionsDrawerHeight: string;
+        navigationBarHeight: string;
+        breakpoints: {
+            medium: string;
+            large: string;
+        };
+    };
+    shadow: {
+        small: {
+            boxShadow: string;
+        };
+        large: {
+            boxShadow: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        xxxxxl: string;
+        0: string;
+        1: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        32: string;
+        40: string;
+        48: string;
+        56: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        112: string;
+        128: string;
+        160: string;
+        200: string;
+        240: string;
+        280: string;
+        320: string;
+    };
+    typography: {
+        dataLarge: TypographyFont;
+        dataLargeUnits: TypographyFont;
+        dataMedium: TypographyFont;
+        dataMediumUnits: TypographyFont;
+        dataSmall: TypographyFont;
+        dataSmallUnits: TypographyFont;
+        display0: TypographyFont;
+        heading1: TypographyFont;
+        heading2: TypographyFont;
+        heading3: TypographyFont;
+        heading4: TypographyFont;
+        heading5: TypographyFont;
+        heading6: TypographyFont;
+        paragraphIntroLede: TypographyFont;
+        paragraphBody: TypographyFont;
+        paragraphSmall: TypographyFont;
+        paragraphExtraSmall: TypographyFont;
+        paragraphBold: {
+            fontWeight: KaizenCSSProperties["fontWeight"];
+        };
+        buttonPrimary: TypographyFont;
+        buttonSecondary: TypographyFont;
+    };
+};
+type DeepMapObjectLeafs<T, LeafType> = T extends string | number | bigint | boolean | symbol | null | undefined | ((...params: any[]) => any) ? LeafType : T extends Record<any, any> ? {
+    [Key in keyof T]: DeepMapObjectLeafs<T[Key], LeafType>;
+} : T;
+/**
+ * Apologies for the complex types.
+ * This type represents the Theme type but with every leaf value in the tree mapped strictly to a string, rather than a number or a more complex type such as a string union.
+ * The reason for this is to have a more accurate type for the generated hierarchy of design tokens which are represented as CSS custom properties, e.g. `var(--color-purple-800)`.
+ */
+type CSSVariableTheme = DeepMapObjectLeafs<Theme, string>;
+
+export { CSSVariableTheme, DeepMapObjectLeafs, Theme, ThemeKey, TypographyFont };

package/dist/KaizenProvider/ThemeProvider/themes/types.js

@@ -0,0 +1 @@
+"use strict";require('../../../chunk-FBL47PXS.js');

package/dist/KaizenProvider/index.d.ts

@@ -1,4 +1,8 @@
 export { a as KaizenProvider, K as KaizenProviderProps } from '../KaizenProvider-af031107.js';
+export { T as ThemeContext, a as ThemeProvider, u as useTheme } from '../ThemeProvider-7786826c.js';
+export { ThemeManager } from './ThemeProvider/ThemeManager.js';
+export { defaultTheme } from './ThemeProvider/themes/index.js';
+export { default as heartTheme } from './ThemeProvider/themes/heart.js';
+export { CSSVariableTheme, DeepMapObjectLeafs, Theme, ThemeKey, TypographyFont } from './ThemeProvider/themes/types.js';
 import 'react';
-import './ThemeProvider/ThemeManager.js';
 import '@kaizen/design-tokens';

package/dist/KaizenProvider/index.js

@@ -1,8 +1,27 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkHO4BDPVXjs = require('../chunk-HO4BDPVX.js');
-require('../chunk-RZK3BIEO.js');
-require('../chunk-J42JQYBY.js');
+var _chunk7ZAJ7755js = require('../chunk-7ZAJ7755.js');
 
 
-exports.KaizenProvider = _chunkHO4BDPVXjs.KaizenProvider;
+
+
+var _chunkMXW3YHBEjs = require('../chunk-MXW3YHBE.js');
+
+
+var _chunkWDAFEOSVjs = require('../chunk-WDAFEOSV.js');
+require('../chunk-FBL47PXS.js');
+
+
+var _chunkJ42JQYBYjs = require('../chunk-J42JQYBY.js');
+
+
+var _chunk7T4E5A7Mjs = require('../chunk-7T4E5A7M.js');
+
+
+
+
+
+
+
+
+exports.KaizenProvider = _chunk7ZAJ7755js.KaizenProvider; exports.ThemeContext = _chunkMXW3YHBEjs.ThemeContext; exports.ThemeManager = _chunkJ42JQYBYjs.ThemeManager; exports.ThemeProvider = _chunkMXW3YHBEjs.ThemeProvider; exports.defaultTheme = _chunkWDAFEOSVjs.defaultTheme; exports.heartTheme = _chunk7T4E5A7Mjs.heartTheme; exports.useTheme = _chunkMXW3YHBEjs.useTheme;

package/dist/ThemeProvider-7786826c.d.ts

@@ -0,0 +1,17 @@
+import * as _kaizen_design_tokens from '@kaizen/design-tokens';
+import React, { Context } from 'react';
+import { ThemeManager } from './KaizenProvider/ThemeProvider/ThemeManager.js';
+import { Theme } from './KaizenProvider/ThemeProvider/themes/types.js';
+
+declare const ThemeContext: Context<Theme>;
+/**
+ * Wrap your application in this provider using a ThemeManager, to synchronise it with a react context.
+ * This allows child react elements to more easily use theme variables, using the {@link useTheme} hook.
+ */
+declare const ThemeProvider: ({ themeManager, ...props }: {
+    themeManager?: ThemeManager<_kaizen_design_tokens.Theme> | undefined;
+    children: React.ReactNode;
+}) => JSX.Element;
+declare const useTheme: () => Theme;
+
+export { ThemeContext as T, ThemeProvider as a, useTheme as u };