@veracity/vui 1.9.1 → 2.0.0

package/dist/esm/button/theme.js

@@ -1,61 +1,11 @@
-function variantOutlined(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        ...variantText(props)?.container,
-        borderColor: `${c}.80`,
-        hoverBorderColor: `${c}.80`,
-        focusRing: 3
-    };
-    return { container };
-}
-function variantSolid(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        hoverBg: `${c}.90`,
-        hoverBorderColor: `${c}.90`,
-        activeBg: `${c}.100`,
-        bg: `${c}.80`,
-        borderColor: `${c}.80`,
-        borderWidth: 1,
-        color: 'white'
-    };
-    // Special cases
-    if (c === 'prussian') {
-        container.activeBg = 'prussian.50';
-        container.hoverBg = 'prussian.60';
-        container.hoverBorderColor = 'prussian.60';
-    }
-    return { container };
-}
-function variantText(props) {
-    const { colorScheme: c } = props;
-    const container = {
-        hoverBg: `${c}.20`,
-        hoverBorderColor: `${c}.20`,
-        activeBg: `${c}.30`,
-        bg: 'transparent',
-        borderColor: 'transparent',
-        borderWidth: 1,
-        color: `${c}.80`,
-        focusRing: 2
-    };
-    // Special cases
-    if (c === 'prussian') {
-        container.activeBg = 'blue.30';
-        container.hoverBg = 'blue.20';
-        container.hoverBorderColor = 'blue.20';
-    }
-    return { container };
-}
 const baseStyle = {};
 const defaultProps = {
-    colorScheme: 'prussian',
     size: 'md',
-    variant: 'solid'
+    variant: 'primaryDark'
 };
 const parts = ['container', 'icon', 'text'];
 const sizes = {
-    xs: {
+    sm: {
         container: {
             fontSize: 'sm',
             h: 24,
@@ -67,7 +17,7 @@ const sizes = {
         },
         text: {}
     },
-    sm: {
+    md: {
         container: {
             fontSize: 'sm',
             h: 32,
@@ -79,7 +29,7 @@ const sizes = {
         },
         text: {}
     },
-    md: {
+    lg: {
         container: {
             fontSize: 'md',
             h: 40,
@@ -91,7 +41,7 @@ const sizes = {
         },
         text: {}
     },
-    lg: {
+    xl: {
         container: {
             fontSize: 'lg',
             h: 48,
@@ -105,9 +55,221 @@ const sizes = {
     }
 };
 const variants = {
-    outlined: variantOutlined,
-    solid: variantSolid,
-    text: variantText
+    primaryDark: {
+        container: {
+            bg: 'buttonTypePrimaryDefaultBackgroundColorDark',
+            borderColor: 'buttonTypePrimaryDefaultBorderColorDark',
+            color: 'buttonTypePrimaryDefaultTextColorDark',
+            hoverBg: 'buttonTypePrimaryHoverBackgroundColorDark',
+            hoverBorderColor: 'buttonTypePrimaryHoverBorderColorDark',
+            hoverColor: 'buttonTypePrimaryHoverTextColorDark',
+            activeBg: 'buttonTypePrimaryActiveBackgroundColorDark',
+            activeBorderColor: 'buttonTypePrimaryActiveBorderColorDark',
+            activeColor: 'buttonTypePrimaryActiveTextColorDark'
+        }
+    },
+    primaryLight: {
+        container: {
+            bg: 'buttonTypePrimaryDefaultBackgroundColorLight',
+            borderColor: 'buttonTypePrimaryDefaultBorderColorLight',
+            color: 'buttonTypePrimaryDefaultTextColorLight',
+            hoverBg: 'buttonTypePrimaryHoverBackgroundColorLight',
+            hoverBorderColor: 'buttonTypePrimaryHoverBorderColorLight',
+            hoverColor: 'buttonTypePrimaryHoverTextColorLight',
+            activeBg: 'buttonTypePrimaryActiveBackgroundColorLight',
+            activeBorderColor: 'buttonTypePrimaryActiveBorderColorLight',
+            activeColor: 'buttonTypePrimaryActiveTextColorLight'
+        }
+    },
+    secondaryDark: {
+        container: {
+            bg: 'buttonTypeSecondaryDefaultBackgroundColorDark',
+            borderColor: 'buttonTypeSecondaryDefaultBorderColorDark',
+            color: 'buttonTypeSecondaryDefaultTextColorDark',
+            // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
+            // hover will change from 90 to 85
+            hoverBg: 'buttonTypeSecondaryHoverBackgroundColorDark',
+            hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorDark',
+            hoverColor: 'buttonTypeSecondaryHoverTextColorDark',
+            // discussed with Jesus, the decision was made on 2-may-2022 that OneDesign designers will update to VUI shade
+            // active will change from 95% to 90%
+            activeBg: 'buttonTypeSecondaryActiveBackgroundColorDark',
+            activeBorderColor: 'buttonTypeSecondaryActiveBorderColorDark',
+            activeColor: 'buttonTypeSecondaryActiveTextColorDark'
+        }
+    },
+    secondaryLight: {
+        container: {
+            bg: 'buttonTypeSecondaryDefaultBackgroundColorLight',
+            borderColor: 'buttonTypeSecondaryDefaultBorderColorLight',
+            color: 'buttonTypeSecondaryDefaultTextColorLight',
+            hoverBg: 'buttonTypeSecondaryHoverBackgroundColorLight',
+            hoverBorderColor: 'buttonTypeSecondaryHoverBorderColorLight',
+            hoverColor: 'buttonTypeSecondaryHoverTextColorLight',
+            activeBg: 'buttonTypeSecondaryActiveBackgroundColorLight',
+            activeBorderColor: 'buttonTypeSecondaryActiveBorderColorLight',
+            activeColor: 'buttonTypeSecondaryActiveTextColorLight'
+        }
+    },
+    tertiaryDark: {
+        container: {
+            bg: 'buttonTypeTertiaryDefaultBackgroundColorDark',
+            borderColor: 'buttonTypeTertiaryDefaultBorderColorDark',
+            color: 'buttonTypeTertiaryDefaultTextColorDark',
+            hoverBg: 'buttonTypeTertiaryHoverBackgroundColorDark',
+            hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorDark',
+            hoverColor: 'buttonTypeTertiaryHoverTextColorDark',
+            activeBg: 'buttonTypeTertiaryActiveBackgroundColorDark',
+            activeBorderColor: 'buttonTypeTertiaryActiveBorderColorDark',
+            activeColor: 'buttonTypeTertiaryActiveTextColorDark'
+        }
+    },
+    tertiaryLight: {
+        container: {
+            bg: 'buttonTypeTertiaryDefaultBackgroundColorLight',
+            borderColor: 'buttonTypeTertiaryDefaultBorderColorLight',
+            color: 'buttonTypeTertiaryDefaultTextColorLight',
+            hoverBg: 'buttonTypeTertiaryHoverBackgroundColorLight',
+            hoverBorderColor: 'buttonTypeTertiaryHoverBorderColorLight',
+            hoverColor: 'buttonTypeTertiaryHoverTextColorLight',
+            activeBg: 'buttonTypeTertiaryActiveBackgroundColorLight',
+            activeBorderColor: 'buttonTypeTertiaryActiveBorderColorLight',
+            activeColor: 'buttonTypeTertiaryActiveTextColorLight'
+        }
+    },
+    solidBlue: {
+        container: {
+            bg: 'seaBlue.28',
+            borderColor: 'seaBlue.28',
+            color: 'white',
+            disabledBg: 'darkBlue.75',
+            disabledBorderColor: 'darkBlue.75',
+            disabledColor: 'white',
+            // proper order next: hover, focus, active
+            hoverBg: 'seaBlue.20',
+            hoverBorderColor: 'seaBlue.20',
+            focusBg: 'seaBlue.28',
+            activeBg: 'seaBlue.35',
+            activeBorderColor: 'seaBlue.35'
+        }
+    },
+    blueOutlined: {
+        container: {
+            bg: 'white',
+            borderColor: 'seaBlue.28',
+            color: 'seaBlue.28',
+            disabledBg: 'white',
+            disabledBorderColor: 'darkBlue.75',
+            disabledColor: 'darkBlue.75',
+            hoverBg: 'skyBlue.85',
+            hoverBorderColor: 'seaBlue.35',
+            // focusBg: 'white',
+            activeBg: 'skyBlue.90',
+            activeBorderColor: 'seaBlue.35'
+        }
+    },
+    blueText: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            color: 'seaBlue.28',
+            disabledBg: 'white',
+            disabledBorderColor: 'white',
+            disabledColor: 'darkBlue.75',
+            hoverBg: 'skyBlue.85',
+            hoverBorderColor: 'skyBlue.85',
+            focusBg: 'transparent',
+            activeBg: 'skyBlue.90',
+            activeBorderColor: 'skyBlue.90'
+        }
+    },
+    solidGreen: {
+        container: {
+            bg: 'landGreen.35',
+            borderColor: 'landGreen.35',
+            color: 'white',
+            disabledBg: 'landGreen.70',
+            disabledBorderColor: 'landGreen.70',
+            disabledColor: 'white',
+            hoverBg: 'landGreen.25',
+            hoverBorderColor: 'landGreen.25',
+            focusBg: 'landGreen.35',
+            activeBg: 'landGreen.41',
+            activeBorderColor: 'landGreen.41'
+        }
+    },
+    solidRed: {
+        container: {
+            bg: 'energyRed.45',
+            borderColor: 'energyRed.45',
+            color: 'white',
+            disabledBg: 'energyRed.80',
+            disabledBorderColor: 'energyRed.80',
+            disabledColor: 'white',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'energyRed.35',
+            hoverBorderColor: 'energyRed.35',
+            focusBg: 'energyRed.45',
+            activeBg: 'energyRed.50',
+            activeBorderColor: 'energyRed.50'
+        }
+    },
+    // subtleBlue is an internal variant, used in notification; based on primaryDark
+    subtleBlue: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            color: 'seaBlue.28',
+            disabledBg: 'white',
+            disabledBorderColor: 'darkBlue.75',
+            disabledColor: 'darkBlue.75',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'skyBlue.90',
+            hoverBorderColor: 'skyBlue.90',
+            focusBg: 'transparent',
+            activeBg: 'skyBlue.85',
+            activeBorderColor: 'skyBlue.85'
+        }
+    },
+    // subtleRed is an internal variant, used in notification; based on primaryDark
+    subtleRed: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'energyRed.90',
+            hoverBorderColor: 'energyRed.90',
+            focusBg: 'transparent',
+            activeBg: 'energyRed.85',
+            color: 'energyRed.45'
+        }
+    },
+    // subtleYellow is an internal variant, used in notification; based on primaryDark
+    subtleYellow: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'sunflower.70',
+            hoverBorderColor: 'sunflower.70',
+            focusBg: 'transparent',
+            activeBg: 'sunflower.65',
+            color: 'sunflower.15'
+        }
+    },
+    // subtleGreen is an internal variant, used in notification; based on primaryDark
+    subtleGreen: {
+        container: {
+            bg: 'transparent',
+            borderColor: 'transparent',
+            // proper order is important next: hover >  focus >  active
+            hoverBg: 'landGreen.90',
+            hoverBorderColor: 'landGreen.90',
+            focusBg: 'transparent',
+            activeBg: 'landGreen.85',
+            color: 'landGreen.30'
+        }
+    }
 };
 export default {
     baseStyle,

package/dist/esm/buttonGroup/buttonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SA2C5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDAiBtB,CAAA;AAEF,eAAe,WAAW,CAAA"}
+{"version":3,"file":"buttonGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAItD,eAAO,MAAM,eAAe;;sBAA2D,MAAM;SA2C5F,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,yDActB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/esm/buttonGroup/buttonGroup.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { styled, th, vui } from '../core';
-import { activeClassName, activeItemShade, cs, filterUndefined } from '../utils';
+import { activeClassName, cs, filterUndefined } from '../utils';
 import { ButtonGroupProvider } from './context';
 import { getInnerBorderColor } from './helpers';
 export const ButtonGroupBase = styled.divBox `
@@ -39,12 +39,12 @@ export const ButtonGroupBase = styled.divBox `
   }
 
   > *:disabled {
-    border-color: disabled.border;
+    border-color: disabled .border;
   }
 
   //
   > .${activeClassName} {
-    background-color: ${p => th.color(`${p.colorScheme}.${activeItemShade}`)};
+    background-color: ${p => th.color('skyBlue.90')};
   }
 `;
 /**
@@ -52,9 +52,9 @@ export const ButtonGroupBase = styled.divBox `
  * Exposes some props to the children via context.
  */
 export const ButtonGroup = vui((props, ref) => {
-    const { className, colorScheme, disabled, innerBorderColor, size, variant, ...rest } = props;
-    const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const { className, disabled, innerBorderColor, size, variant = 'secondaryDark', ...rest } = props;
+    const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant]);
     return (React.createElement(ButtonGroupProvider, { value: context },
-        React.createElement(ButtonGroupBase, { className: cs('vui-buttonGroup', className), ...{ colorScheme, innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }, ...rest })));
+        React.createElement(ButtonGroupBase, { className: cs('vui-buttonGroup', className), ...{ innerBorderColor: innerBorderColor ? innerBorderColor : getInnerBorderColor(props), ref }, ...rest })));
 });
 export default ButtonGroup;

package/dist/esm/buttonGroup/buttonGroup.types.d.ts

@@ -1,9 +1,8 @@
-import { ButtonColorScheme } from '../button/button.types';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 export declare type ButtonGroupProps = SystemProps & ThemingProps<'ButtonGroup'> & {
-    /** Available theme colors for this component. */
-    colorScheme?: ButtonColorScheme;
+    /** Available theme colors for this component. @deprecated */
+    colorScheme?: string;
     /** Makes all wrapped buttons disabled. */
     disabled?: boolean;
     /** Border color between the buttons. */

package/dist/esm/buttonGroup/buttonGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GACxC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,iDAAiD;IACjD,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA"}
+{"version":3,"file":"buttonGroup.types.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/buttonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,WAAW,GACxC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA"}

package/dist/esm/buttonGroup/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAQnE"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/buttonGroup/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEtD,oEAAoE;AACpE,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAMnE"}

package/dist/esm/buttonGroup/helpers.js

@@ -1,8 +1,7 @@
 /** Returns appropriate color for the border between the buttons. */
 export function getInnerBorderColor(props) {
-    const { colorScheme = 'prussian', disabled, variant = 'solid' } = props;
+    const { disabled, variant } = props;
     if (disabled)
         return 'disabled.border';
-    const shade = variant === 'solid' ? '100' : '80';
-    return `${colorScheme}.${shade}`;
+    return `${variant}`;
 }

package/dist/esm/buttonToggleGroup/buttonToggleGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,gBAY9D,CAAA;AAED,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"buttonToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAA;AAElE;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,sBAAsB,gBAU9D,CAAA;AAED,eAAe,iBAAiB,CAAA"}

package/dist/esm/buttonToggleGroup/buttonToggleGroup.js

@@ -6,6 +6,6 @@ import { cs, dimmedBorderColor } from '../utils';
  */
 export const ButtonToggleGroup = (props) => {
     const { className, isDimmedBorder } = props;
-    return (React.createElement(ButtonGroup, { className: cs('vui-buttonToggleGroup', className), colorScheme: "blue", innerBorderColor: isDimmedBorder ? dimmedBorderColor : '', variant: "outlined", ...props }));
+    return (React.createElement(ButtonGroup, { className: cs('vui-buttonToggleGroup', className), innerBorderColor: isDimmedBorder ? dimmedBorderColor : '', ...props }));
 };
 export default ButtonToggleGroup;

package/dist/esm/checkbox/checkbox.js

@@ -5,7 +5,7 @@ import T from '../t';
 import { cs, filterUndefined } from '../utils';
 import { useCheckboxGroupContext } from './context';
 const CheckboxControl = styled.spanBox `
-  border-radius: sm;
+  border-radius: none;
   display: inline-flex;
   flex-shrink: 0;
   position: relative;

package/dist/esm/copyToClipboard/copyToClipboard.js

@@ -12,7 +12,7 @@ import { useCopyToClipboard } from './useCopyToClipboard';
  *
  */
 export const CopyToClipboard = vui((props, ref) => {
-    const { disabled, copyText, className, size = 'xs', variant = 'text', ...rest } = props;
+    const { disabled, copyText, className, size = 'sm', variant = 'tertiaryDark', ...rest } = props;
     const { copy, isCopyDisabled } = useCopyToClipboard(copyText);
     return (React.createElement(Button, { className: cs('vui-copy-to-clipboard', className), disabled: disabled || isCopyDisabled, icon: "falCopy", onClick: () => copy(), ref: ref, size: size, variant: variant, ...rest }));
 });

package/dist/esm/core/vuiProvider/globalStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"globalStyle.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/globalStyle.tsx"],"names":[],"mappings":"AAMA,aAAK,gBAAgB,GAAG;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;;AACH,wBA0DC"}
+{"version":3,"file":"globalStyle.d.ts","sourceRoot":"","sources":["../../../../src/core/vuiProvider/globalStyle.tsx"],"names":[],"mappings":"AAMA,aAAK,gBAAgB,GAAG;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;;AACH,wBA2EC"}

package/dist/esm/core/vuiProvider/globalStyle.js

@@ -11,62 +11,79 @@ import fontFaces from './fontFaces';
  * - CSS variables for each theme value
  */
 export default createGlobalStyle `
-	${fontFaces}
+  ${fontFaces}
+  :root {
+    ${generateCSSVariables}
+  }
 
-	:root {
-		${generateCSSVariables}
-	}
+  * {
+    --x-ring-color: var(--vui-colors-focusColor);
+    // Fixes a box-shadow issue between some parent and child components
+    --x-shadow: 0 0 0 0 transparent;
+  }
 
-	* {
-		--x-ring-color: var(--vui-colors-blue-50);
-		// Fixes a box-shadow issue between some parent and child components
-		--x-shadow: 0 0 0 0 transparent;
-	}
+  button {
+    --x-ring-color: transparent;
+  }
 
-	${p => p.globalStyle &&
+  button:focus-visible, li:focus-visible {
+    --x-ring-color: var(--vui-colors-focusColor);
+    outline: var(--vui-colors-focusColor) solid 3px;
+    z-index: 1;
+  }
+
+  ${p => p.globalStyle &&
     css `
       body {
-        color: prussian.80;
+        color: sandstone 0.1;
         font-family: avenir;
         font-size: md;
       }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5 {
+        color: darkBlue 0.18;
+      }
     `}
 
-	@keyframes vui-bounce {
-		${bounce}
-	}
+  @keyframes vui-bounce {
+  ${bounce}
+  }
 
-	@keyframes vui-fadeDown {
-		${fadeDown}
-	}
+  @keyframes vui-fadeDown {
+  ${fadeDown}
+  }
 
-	@keyframes vui-fadeIn {
-		${fadeIn}
-	}
+  @keyframes vui-fadeIn {
+  ${fadeIn}
+  }
 
-	@keyframes vui-fadeLeft {
-		${fadeLeft}
-	}
+  @keyframes vui-fadeLeft {
+  ${fadeLeft}
+  }
 
-	@keyframes vui-fadeOut {
-		${fadeOut}
-	}
+  @keyframes vui-fadeOut {
+  ${fadeOut}
+  }
 
-	@keyframes vui-fadeRight {
-		${fadeRight}
-	}
+  @keyframes vui-fadeRight {
+  ${fadeRight}
+  }
 
-	@keyframes vui-fadeUp {
-		${fadeUp}
-	}
+  @keyframes vui-fadeUp {
+  ${fadeUp}
+  }
 
-	@keyframes vui-pulse {
-		${pulse}
-	}
+  @keyframes vui-pulse {
+  ${pulse}
+  }
 
-	@keyframes vui-spin {
-		${spin}
-	}
+  @keyframes vui-spin {
+  ${spin}
+  }
 `;
 /** Recursively maps through all theme styles and generates a set of CSS properties. */
 function generateCSSVariables() {

package/dist/esm/footer/footerTrademark.js

@@ -13,7 +13,7 @@ export const FooterTrademark = vui((props, ref) => {
     const styles = useStyleConfig('Footer', useFooterContext());
     return (React.createElement(Box, { className: cs('vui-footerTrademark', className), ref: ref, w: "100%", wrap: true, ...styles.trademark, ...rest },
         React.createElement(FooterColumn, { centerV: true, flex: { xs: '0 0 100%', md: '0 0 25%' } },
-            React.createElement(Link, { colorScheme: "white", fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, iconLeft: React.createElement(Link.Icon, { mr: 1, name: "fabLinkedin", size: "sm" }), isExternal: true }, "Follow us")),
+            React.createElement(Link, { fontWeight: "demi", href: linkedIn ?? defaultLinkedInUrl, iconLeft: React.createElement(Link.Icon, { mr: 1, name: "fabLinkedin", size: "sm" }), isExternal: true, variant: "white" }, "Follow us")),
         React.createElement(FooterColumn, { centerV: true, flex: { xs: '0 0 100%', md: '0 0 75%' } },
             React.createElement(T, { size: "xs" },
                 React.createElement(T, { size: "xs", weight: "demi" }, "Veracity by DNV"),

package/dist/esm/heading/heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/heading/heading.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,WAAW,8HAGvB,CAAA;AAED,6FAA6F;AAC7F,eAAO,MAAM,OAAO,oDAkBlB,CAAA;AAEF,eAAe,OAAO,CAAA"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../src/heading/heading.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,WAAW,8HAGvB,CAAA;AAED,6FAA6F;AAC7F,eAAO,MAAM,OAAO,oDAmClB,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/esm/heading/heading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
+import { omitThemingProps, styled, useStyleConfig, useUp, vui } from '../core';
 import { cs, filterUndefined } from '../utils';
 export const HeadingBase = styled.h2Box `
   font-weight: demi;
@@ -9,6 +9,7 @@ export const HeadingBase = styled.h2Box `
 export const Heading = vui((props, ref) => {
     const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props);
     const styles = useStyleConfig('Heading', props);
+    const { fontSize, lineHeight, ...restStyles } = styles;
     const hClassName = props.size ? `vui-${props.size}` : '';
     const aliasedProps = filterUndefined({
         fontWeight: weight,
@@ -16,6 +17,11 @@ export const Heading = vui((props, ref) => {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (React.createElement(HeadingBase, { className: cs('vui-heading', hClassName, className), ref: ref, ...styles, ...aliasedProps, ...rest }, children ?? text));
+    const isDesktop = useUp(993);
+    const fontSizeDesktop = fontSize?.desktop || fontSize;
+    const fontSizeMobile = fontSize?.mobile || fontSize;
+    const lineHeightDesktop = lineHeight?.desktop || lineHeight;
+    const lineHeightMobile = lineHeight?.mobile || lineHeight;
+    return (React.createElement(HeadingBase, { className: cs('vui-heading', hClassName, className), fontSize: isDesktop ? fontSizeDesktop : fontSizeMobile, lineHeight: isDesktop ? lineHeightDesktop : lineHeightMobile, ref: ref, ...restStyles, ...aliasedProps, ...rest }, children ?? text));
 });
 export default Heading;

package/dist/esm/heading/heading.types.d.ts

@@ -13,4 +13,5 @@ export declare type HeadingProps = SystemProps & ThemingProps<'Heading'> & {
     /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
 };
+export declare type HeadingSize = 'title' | 'lead' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 //# sourceMappingURL=heading.types.d.ts.map

package/dist/esm/heading/heading.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.types.d.ts","sourceRoot":"","sources":["../../../src/heading/heading.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,YAAY,GAAG,WAAW,GACpC,YAAY,CAAC,SAAS,CAAC,GAAG;IACxB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACpC,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,iDAAiD;IACjD,UAAU,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAC9C,uDAAuD;IACvD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA"}
+{"version":3,"file":"heading.types.d.ts","sourceRoot":"","sources":["../../../src/heading/heading.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,YAAY,GAAG,WAAW,GACpC,YAAY,CAAC,SAAS,CAAC,GAAG;IACxB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACpC,gDAAgD;IAChD,MAAM,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAA;IACzC,iDAAiD;IACjD,UAAU,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAC9C,uDAAuD;IACvD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CACvC,CAAA;AAEH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA"}