@lumx/react 2.1.0-alpha.14 → 2.1.0-alpha.15

package/esm/_internal/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"side-navigation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/skeleton.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';

package/esm/_internal/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"skeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/esm/_internal/slider.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/_internal/slideshow.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';

package/esm/_internal/slideshow.js.map

@@ -1 +1 @@
-{"version":3,"file":"slideshow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"slideshow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/switch.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/esm/_internal/table.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/esm/_internal/tabs.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/_internal/text-field.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';

package/esm/_internal/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"text-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/thumbnail.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/esm/_internal/toolbar.js

@@ -1,5 +1,6 @@
-import './getRootClassName.js';
+import './_rollupPluginBabelHelpers.js';
 import 'react';
+import './getRootClassName.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';

package/esm/_internal/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"toolbar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/esm/_internal/tooltip.js

@@ -1,5 +1,6 @@
-import './getRootClassName.js';
+import './_rollupPluginBabelHelpers.js';
 import 'react';
+import './getRootClassName.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/_internal/types.js

@@ -1,5 +1,5 @@
+import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import { AspectRatio } from './components.js';
-import { c as _objectSpread2 } from './getRootClassName.js';
 
 /**
  * All available aspect ratios.

package/esm/_internal/uploader.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';

package/esm/_internal/uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"uploader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"uploader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/esm/_internal/useDelayedVisibility.js

@@ -1,4 +1,4 @@
-import { f as _slicedToArray } from './getRootClassName.js';
+import { d as _slicedToArray } from './_rollupPluginBabelHelpers.js';
 import { useState, useEffect, useRef } from 'react';
 
 /**

package/esm/_internal/useRovingTabIndex.js

@@ -1,4 +1,4 @@
-import { i as _toConsumableArray, c as _objectSpread2, _ as _defineProperty, f as _slicedToArray } from './getRootClassName.js';
+import { e as _toConsumableArray, _ as _objectSpread2, a as _defineProperty, d as _slicedToArray } from './_rollupPluginBabelHelpers.js';
 import { createContext, useContext, useMemo, useEffect, useCallback } from 'react';
 import { u as uid } from '../index2.js';
 

package/esm/_internal/user-block.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/index.js

@@ -1,6 +1,7 @@
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography } from './_internal/components.js';
-import './_internal/getRootClassName.js';
+import './_internal/_rollupPluginBabelHelpers.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom } from './_internal/components.js';
 import 'react';
+import './_internal/getRootClassName.js';
 import './_internal/mdi.js';
 import './index2.js';
 import 'lodash/isBoolean';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.0-alpha.14",
-        "@lumx/icons": "^2.1.0-alpha.14",
+        "@lumx/core": "^2.1.0-alpha.15",
+        "@lumx/icons": "^2.1.0-alpha.15",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -123,9 +123,9 @@
         "storybook": "start-storybook -s ../site-demo/static/ -p 9000"
     },
     "sideEffects": false,
-    "version": "2.1.0-alpha.14",
+    "version": "2.1.0-alpha.15",
     "resolutions": {
         "**/style-loader": "^1.0.0"
     },
-    "gitHead": "abf90853f2a485c0700e87194dc140f01b615cd9"
+    "gitHead": "a202d8df8a28773fca6fbe6fadffc15f40125f2e"
 }

package/src/components/index.ts

@@ -87,9 +87,9 @@ export const Emphasis = {
 export type Emphasis = ValueOf<typeof Emphasis>;
 
 /**
- * List of typographies.
+ * List of typographies that can't be customized.
  */
-export const Typography = {
+export const TypographyInterface = {
     overline: 'overline',
     caption: 'caption',
     body1: 'body1',
@@ -100,7 +100,43 @@ export const Typography = {
     headline: 'headline',
     display1: 'display1',
 } as const;
-export type Typography = ValueOf<typeof Typography>;
+export type TypographyInterface = ValueOf<typeof TypographyInterface>;
+
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+export const TypographyTitleCustom = {
+    title1: 'custom-title1',
+    title2: 'custom-title2',
+    title3: 'custom-title3',
+    title4: 'custom-title4',
+    title5: 'custom-title5',
+    title6: 'custom-title6',
+} as const;
+export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+const TypographyCustom = {
+    ...TypographyTitleCustom,
+    intro: 'intro',
+    'body-large': 'body-large',
+    body: 'body',
+    quote: 'quote',
+    'publish-info': 'publish-info',
+    button: 'button',
+} as const;
+export type TypographyCustom = ValueOf<typeof TypographyCustom>;
+
+/**
+ * List of all typographies.
+ */
+export const Typography = {
+    ...TypographyInterface,
+    custom: TypographyCustom,
+} as const;
+export type Typography = TypographyInterface | TypographyCustom;
 
 /**
  * All available aspect ratios.

package/src/components/link/Link.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { mdiChevronDown, mdiLink } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Link, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Link, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import React, { Fragment } from 'react';
 
@@ -8,6 +8,8 @@ export default { title: 'LumX components/link/Link' };
 
 const onClick = () => console.log('clicked link');
 
+const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
+
 export const SimpleLink = () => (
     <>
         <Link
@@ -15,7 +17,7 @@ export const SimpleLink = () => (
             target={boolean('target: _blank', false, 'Link 1') ? '_blank' : ''}
             color={select('Color', ColorPalette, ColorPalette.blue, 'Link 1')}
             colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 1')}
-            typography={select('Typography', Typography, Typography.body2, 'Link 1')}
+            typography={select('Typography', linkTypographies, Typography.body2, 'Link 1')}
         >
             {text('Value', 'Here is a first link', 'Link 1')}
         </Link>
@@ -25,7 +27,7 @@ export const SimpleLink = () => (
             target={boolean('target: _blank', false, 'Link 2') ? '_blank' : ''}
             color={select('Color', ColorPalette, ColorPalette.blue, 'Link 2')}
             colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 2')}
-            typography={select('Typography', Typography, Typography.body1, 'Link 2')}
+            typography={select('Typography', linkTypographies, Typography.body1, 'Link 2')}
         >
             {text('Value', 'Here is a second link', 'Link 2')}
         </Link>
@@ -35,7 +37,7 @@ export const SimpleLink = () => (
             target={boolean('target: _blank', false, 'Link 3') ? '_blank' : ''}
             color={select('Color', ColorPalette, ColorPalette.blue, 'Link 3')}
             colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 3')}
-            typography={select('Typography', Typography, Typography.caption, 'Link 3')}
+            typography={select('Typography', linkTypographies, Typography.caption, 'Link 3')}
         >
             {text('Value', 'Here is a third link', 'Link 3')}
         </Link>
@@ -67,15 +69,16 @@ export const DisabledLink = () => (
 
 export const WithIcon = () => (
     <>
-        {Object.values(Typography).map((typography) => (
+        {Object.values(linkTypographies).map((typography) => (
             <Fragment key={typography}>
+                {typography}
                 <p>
-                    <Link rightIcon={mdiLink} href="https://www.google.com" typography={typography}>
+                    <Link rightIcon={mdiLink} href="https://www.google.com" typography={typography as any}>
                         With right icon
                     </Link>
                 </p>
                 <p>
-                    <Link leftIcon={mdiChevronDown} href="https://www.google.com" typography={typography}>
+                    <Link leftIcon={mdiChevronDown} href="https://www.google.com" typography={typography as any}>
                         With left icon
                     </Link>
                 </p>
@@ -84,7 +87,7 @@ export const WithIcon = () => (
                         leftIcon={mdiChevronDown}
                         rightIcon={mdiLink}
                         href="https://www.google.com"
-                        typography={typography}
+                        typography={typography as any}
                     >
                         With right and left icon
                     </Link>
@@ -93,3 +96,16 @@ export const WithIcon = () => (
         ))}
     </>
 );
+
+export const WithCustomizableTypography = () => (
+    <>
+        <style>{`
+        :root {
+            --lumx-typography-custom-title1-font-size: 5px;
+        }
+        `}</style>
+        <Link typography={Typography.custom.title1} href="https://google.com">
+            Link with customizable `body` typography
+        </Link>
+    </>
+);

package/src/components/link/Link.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
+import { Color, ColorVariant, Icon, Size, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
@@ -31,7 +31,7 @@ export interface LinkProps extends GenericProps {
     /** Link target. */
     target?: HTMLAnchorProps['target'];
     /** Typography variant. */
-    typography?: Typography;
+    typography?: TypographyInterface | TypographyTitleCustom;
 }
 
 /**
@@ -51,6 +51,12 @@ const getIconSize = (typography?: Typography) => {
 
         case Typography.headline:
         case Typography.title:
+        case Typography.custom.title1:
+        case Typography.custom.title2:
+        case Typography.custom.title3:
+        case Typography.custom.title4:
+        case Typography.custom.title5:
+        case Typography.custom.title6:
         case Typography.body2:
         case Typography.subtitle2:
             return Size.s;

package/src/components/skeleton/SkeletonTypography.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { CSSProperties, forwardRef } from 'react';
 
-import { Theme, Typography } from '@lumx/react';
+import { Theme, TypographyInterface } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 /**
@@ -11,7 +11,7 @@ export interface SkeletonTypographyProps extends GenericProps {
     /** Theme adapting the component to light or dark background. */
     theme?: Theme;
     /** Typography variant. */
-    typography: Typography;
+    typography: TypographyInterface;
     /** Width CSS property. */
     width?: CSSProperties['width'];
 }

package/types.d.ts

@@ -112,9 +112,65 @@ export declare const Emphasis: {
 };
 export declare type Emphasis = ValueOf<typeof Emphasis>;
 /**
- * List of typographies.
+ * List of typographies that can't be customized.
+ */
+export declare const TypographyInterface: {
+	readonly overline: "overline";
+	readonly caption: "caption";
+	readonly body1: "body1";
+	readonly body2: "body2";
+	readonly subtitle1: "subtitle1";
+	readonly subtitle2: "subtitle2";
+	readonly title: "title";
+	readonly headline: "headline";
+	readonly display1: "display1";
+};
+export declare type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+export declare const TypographyTitleCustom: {
+	readonly title1: "custom-title1";
+	readonly title2: "custom-title2";
+	readonly title3: "custom-title3";
+	readonly title4: "custom-title4";
+	readonly title5: "custom-title5";
+	readonly title6: "custom-title6";
+};
+export declare type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+declare const TypographyCustom: {
+	readonly intro: "intro";
+	readonly "body-large": "body-large";
+	readonly body: "body";
+	readonly quote: "quote";
+	readonly "publish-info": "publish-info";
+	readonly button: "button";
+	readonly title1: "custom-title1";
+	readonly title2: "custom-title2";
+	readonly title3: "custom-title3";
+	readonly title4: "custom-title4";
+	readonly title5: "custom-title5";
+	readonly title6: "custom-title6";
+};
+export declare type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
  */
 export declare const Typography: {
+	readonly custom: {
+		readonly intro: "intro";
+		readonly "body-large": "body-large";
+		readonly body: "body";
+		readonly quote: "quote";
+		readonly "publish-info": "publish-info";
+		readonly button: "button";
+		readonly title1: "custom-title1";
+		readonly title2: "custom-title2";
+		readonly title3: "custom-title3";
+		readonly title4: "custom-title4";
+		readonly title5: "custom-title5";
+		readonly title6: "custom-title6";
+	};
 	readonly overline: "overline";
 	readonly caption: "caption";
 	readonly body1: "body1";
@@ -125,7 +181,7 @@ export declare const Typography: {
 	readonly headline: "headline";
 	readonly display1: "display1";
 };
-export declare type Typography = ValueOf<typeof Typography>;
+export declare type Typography = TypographyInterface | TypographyCustom;
 /**
  * All available aspect ratios.
  */
@@ -1333,7 +1389,7 @@ export interface LinkProps extends GenericProps {
 	/** Link target. */
 	target?: HTMLAnchorProps["target"];
 	/** Typography variant. */
-	typography?: Typography;
+	typography?: TypographyInterface | TypographyTitleCustom;
 }
 /**
  * Link component.
@@ -1934,7 +1990,7 @@ export interface SkeletonTypographyProps extends GenericProps {
 	/** Theme adapting the component to light or dark background. */
 	theme?: Theme;
 	/** Typography variant. */
-	typography: Typography;
+	typography: TypographyInterface;
 	/** Width CSS property. */
 	width?: CSSProperties["width"];
 }