@veracity/vui 2.5.1 → 2.6.1

package/dist/esm/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/theme/foundations/index.d.ts

@@ -485,6 +485,7 @@ declare const _default: {
         l2: string;
         l3: string;
         l4: string;
+        modal: string;
     };
     sizes: {};
     spaces: {};

package/dist/esm/theme/foundations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,wBAqBC"}

package/dist/esm/theme/foundations/shadows.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
     l2: string;
     l3: string;
     l4: string;
+    modal: string;
 };
 export default _default;
 //# sourceMappingURL=shadows.d.ts.map

package/dist/esm/theme/foundations/shadows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/shadows.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAMA,wBAkBC"}
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../../src/theme/foundations/shadows.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAOA,wBAmBC"}

package/dist/esm/theme/foundations/shadows.js

@@ -2,6 +2,7 @@ import { hexToRGBA } from '../../utils';
 import { grey } from './colors';
 const greyLight = hexToRGBA(grey[80], 0.4);
 const greyDark = hexToRGBA(grey[80], 0.6);
+const modal = hexToRGBA('#000000', 0.15);
 export default {
     '0': `0 0 0 0 #fff`,
     '1': `0 2px 5px 0 ${greyLight}`,
@@ -19,5 +20,6 @@ export default {
     l1: `-2px 0 5px 0 ${greyLight}`,
     l2: `-4px 0 12px 0 ${greyLight}`,
     l3: `-7px 0 20px 0 ${greyDark}`,
-    l4: `-12px 0 30px 0 ${greyDark}`
+    l4: `-12px 0 30px 0 ${greyDark}`,
+    modal: `0 12px 30px 0 ${modal}`
 };

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

@@ -3,6 +3,7 @@ export declare type Animation = keyof VuiTheme['animations'];
 export declare type Border = keyof VuiTheme['borders'];
 export declare type Color = keyof VuiTheme['colors'];
 export declare type Component = keyof VuiTheme['components'];
+export declare type Elevation = keyof VuiTheme['shadows'];
 export declare type Font = keyof VuiTheme['fonts'];
 export declare type FontSize = keyof VuiTheme['fontSizes'];
 export declare type FontWeight = keyof VuiTheme['fontWeights'];

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAA;AACpD,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,SAAS,CAAC,CAAA;AAC9C,oBAAY,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAC5C,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAA;AACpD,oBAAY,IAAI,GAAG,MAAM,QAAQ,CAAC,OAAO,CAAC,CAAA;AAC1C,oBAAY,QAAQ,GAAG,MAAM,QAAQ,CAAC,WAAW,CAAC,CAAA;AAClD,oBAAY,UAAU,GAAG,MAAM,QAAQ,CAAC,aAAa,CAAC,CAAA;AACtD,oBAAY,kBAAkB,GAAG,MAAM,QAAQ,CAAC,qBAAqB,CAAC,CAAA;AACtE,oBAAY,eAAe,GAAG,MAAM,QAAQ,CAAC,kBAAkB,CAAC,CAAA;AAChE,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,OAAO,CAAC,CAAA;AAC5C,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAA;AACpD,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,SAAS,CAAC,CAAA;AAC9C,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,SAAS,CAAC,CAAA;AAC9C,oBAAY,IAAI,GAAG,MAAM,QAAQ,CAAC,OAAO,CAAC,CAAA;AAC1C,oBAAY,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAC5C,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAA;AACpD,oBAAY,kBAAkB,GAAG,MAAM,QAAQ,CAAC,WAAW,CAAC,CAAA;AAC5D,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,CAAA;AAE/C,oBAAY,gBAAgB,GAAG,OAAO,YAAY,CAAA;AAElD,mFAAmF;AACnF,MAAM,WAAW,kBAAkB;CAAG;AAEtC,+EAA+E;AAC/E,oBAAY,YAAY,CAAC,cAAc,SAAS,MAAM,GAAG,MAAM,IAAI;IACjE,OAAO,CAAC,EAAE,cAAc,SAAS,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,GAAG,MAAM,CAAA;IAC9G,IAAI,CAAC,EAAE,cAAc,SAAS,MAAM,QAAQ,CAAC,YAAY,CAAC,GACtD,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,GACrD,MAAM,CAAA;CACX,CAAA;AAGD,4EAA4E;AAC5E,oBAAY,QAAQ,GAAG,gBAAgB,GAAG,kBAAkB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAA;AACpD,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,SAAS,CAAC,CAAA;AAC9C,oBAAY,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAC5C,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAA;AACpD,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,SAAS,CAAC,CAAA;AACjD,oBAAY,IAAI,GAAG,MAAM,QAAQ,CAAC,OAAO,CAAC,CAAA;AAC1C,oBAAY,QAAQ,GAAG,MAAM,QAAQ,CAAC,WAAW,CAAC,CAAA;AAClD,oBAAY,UAAU,GAAG,MAAM,QAAQ,CAAC,aAAa,CAAC,CAAA;AACtD,oBAAY,kBAAkB,GAAG,MAAM,QAAQ,CAAC,qBAAqB,CAAC,CAAA;AACtE,oBAAY,eAAe,GAAG,MAAM,QAAQ,CAAC,kBAAkB,CAAC,CAAA;AAChE,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,OAAO,CAAC,CAAA;AAC5C,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAA;AACpD,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,SAAS,CAAC,CAAA;AAC9C,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,SAAS,CAAC,CAAA;AAC9C,oBAAY,IAAI,GAAG,MAAM,QAAQ,CAAC,OAAO,CAAC,CAAA;AAC1C,oBAAY,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAC5C,oBAAY,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAA;AACpD,oBAAY,kBAAkB,GAAG,MAAM,QAAQ,CAAC,WAAW,CAAC,CAAA;AAC5D,oBAAY,MAAM,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,CAAA;AAE/C,oBAAY,gBAAgB,GAAG,OAAO,YAAY,CAAA;AAElD,mFAAmF;AACnF,MAAM,WAAW,kBAAkB;CAAG;AAEtC,+EAA+E;AAC/E,oBAAY,YAAY,CAAC,cAAc,SAAS,MAAM,GAAG,MAAM,IAAI;IACjE,OAAO,CAAC,EAAE,cAAc,SAAS,SAAS,GAAG,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC,UAAU,CAAC,GAAG,MAAM,CAAA;IAC9G,IAAI,CAAC,EAAE,cAAc,SAAS,MAAM,QAAQ,CAAC,YAAY,CAAC,GACtD,MAAM,QAAQ,CAAC,YAAY,CAAC,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,GACrD,MAAM,CAAA;CACX,CAAA;AAGD,4EAA4E;AAC5E,oBAAY,QAAQ,GAAG,gBAAgB,GAAG,kBAAkB,CAAA"}

package/dist/esm/utils/styles.d.ts

@@ -1,8 +1,18 @@
 import { Property } from 'csstype';
 /** Concatenates individual className arguments and returns a single string. */
 export declare function cs(...classNames: any[]): string;
+/** Parses HSL color code. */
+export declare function parseHSL(color: string): {
+    h: number;
+    s: number;
+    l: number;
+};
+/** Builds RGBA string. */
+export declare const buildRGBA: (r: number, g: number, b: number, alpha?: number) => string;
 /** Converts hex color value to rgb with optional alpha property. */
 export declare function hexToRGBA(hex: string, alpha?: number): string;
+/** Converts hsl color value to rgb with optional alpha property. */
+export declare function HSLToRGBA(h: number, s: number, l: number, alpha?: number): string;
 /** Styling to add ellipsis for long texts. */
 export declare const ellipsisOverflow: {
     overflow: string;

package/dist/esm/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,0BAA0B;AAC1B,eAAO,MAAM,SAAS,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,UAAU,MAAM,WACW,CAAA;AAEpF,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}

package/dist/esm/utils/styles.js

@@ -2,6 +2,14 @@
 export function cs(...classNames) {
     return classNames.filter(Boolean).join(' ');
 }
+/** Parses HSL color code. */
+export function parseHSL(color) {
+    const regexp = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g;
+    const res = regexp?.exec?.(color)?.slice?.(1);
+    return { h: Number(res?.[0]) || 0, s: Number(res?.[1]) || 0, l: Number(res?.[2]) || 0 };
+}
+/** Builds RGBA string. */
+export const buildRGBA = (r, g, b, alpha) => alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex, alpha) {
     let hexStr = hex;
@@ -15,7 +23,48 @@ export function hexToRGBA(hex, alpha) {
     const r = parseInt(hexStr.slice(0, 2), 16);
     const g = parseInt(hexStr.slice(2, 4), 16);
     const b = parseInt(hexStr.slice(4, 6), 16);
-    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
+    return buildRGBA(r, g, b, alpha);
+}
+/** Converts hsl color value to rgb with optional alpha property. */
+export function HSLToRGBA(h, s, l, alpha) {
+    s /= 100;
+    l /= 100;
+    const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(((h / 60) % 2) - 1)), m = l - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (0 <= h && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    }
+    else if (60 <= h && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    }
+    else if (120 <= h && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    }
+    else if (180 <= h && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    }
+    else if (240 <= h && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    }
+    else if (300 <= h && h < 360) {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    r = Math.round((r + m) * 255);
+    g = Math.round((g + m) * 255);
+    b = Math.round((b + m) * 255);
+    return buildRGBA(r, g, b, alpha);
 }
 /** Styling to add ellipsis for long texts. */
 export const ellipsisOverflow = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/box/box.tsx

@@ -20,9 +20,10 @@ export const Box = vui<'div', BoxProps>((props, ref) => {
     className,
     column,
     direction,
-    hoverShadow,
+    elevation,
+    hoverShadow: hoverBoxShadow,
     justify,
-    radius,
+    radius: borderRadius,
     shadow,
     wrap,
     ...rest
@@ -35,11 +36,10 @@ export const Box = vui<'div', BoxProps>((props, ref) => {
 
   const aliasedProps = filterUndefined<BoxProps>({
     alignItems: align ?? alignItems,
-    borderRadius: radius,
-    boxShadow: shadow,
+    borderRadius,
+    boxShadow: elevation ?? shadow,
     flexDirection: direction ?? flexDirection,
     flexWrap: wrap ? 'wrap' : undefined,
-    hoverBoxShadow: hoverShadow,
     justifyContent: justify ?? justifyContent
   })
 

package/src/box/box.types.ts

@@ -15,6 +15,8 @@ export type BoxProps = SystemProps &
     column?: boolean
     /** Alias for flexDirection prop. @deprecated */
     direction?: FlexboxesProps['flexDirection']
+    /** Alias for boxShadow prop. @deprecated */
+    elevation?: EffectsProps['boxShadow']
     /** Alias for hoverBoxShadow prop. @deprecated */
     hoverShadow?: EffectsProps['hoverBoxShadow']
     /** Alias for justifyContent prop. @deprecated */

package/src/button/button.types.ts

@@ -5,7 +5,7 @@ import { AnyString } from '../utils'
 
 export type ButtonProps = SystemProps &
   ThemingProps<'Button'> & {
-    /** Available theme colors for this component. @deprecated */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: string
     /** Icon for the drop-down element. @default falAngleDown */
     dropDownIcon?: IconProp

package/src/buttonGroup/buttonGroup.tsx

@@ -41,10 +41,6 @@ export const ButtonGroupBase = styled.divBox<{ colorScheme?: string; innerBorder
     border-color: ${p => th.color(p.innerBorderColor)};
   }
 
-  > *:disabled {
-    border-color: disabled .border;
-  }
-
   //
   > .${activeClassName} {
     background-color: ${p => th.color('skyBlue.90')};

package/src/core/links.tsx

@@ -18,11 +18,8 @@ export function getLoggedInLink(link: string, isLoggedIn?: boolean) {
   try {
     const url = new URL(link)
 
-    if (isLoggedIn) {
-      url.searchParams.append('loggedin', '1')
-    } else {
-      url.searchParams.delete('loggedin')
-    }
+    if (isLoggedIn) url.searchParams.append('loggedin', '1')
+    else url.searchParams.delete('loggedin')
 
     return url.toString()
   } catch {
@@ -63,9 +60,7 @@ export function useLoadLinks(env?: Environment, isLoggedIn?: boolean) {
 
       const data = await response.json()
 
-      if (isObject(data)) {
-        setLinks(updateLoggedInParam(data))
-      }
+      if (isObject(data)) setLinks(updateLoggedInParam(data))
     } catch {
       console.error('Failed to retrieve links')
     }

package/src/dialog/dialog.tsx

@@ -16,8 +16,8 @@ import DialogTitle from './dialogTitle'
 
 export const DialogBase = styled.divBox`
   background-color: white;
-  border-radius: md;
-  box-shadow: 4;
+  border-radius: 1px;
+  box-shadow: modal;
   display: flex;
   flex-direction: column;
   margin: 16px;

package/src/dialog/dialogCloseButton.tsx

@@ -14,16 +14,14 @@ export const DialogCloseButton = vui<'button', DialogCloseButtonProps>((props, r
 
   return (
     <CloseButton
-      activeBg="grey.30"
       className={cs('vui-dialogCloseButton', className)}
-      color="grey.80"
-      hoverBg="grey.20"
       onClick={onClose}
       position="absolute"
       ref={ref}
       right={16}
       size="sm"
       top={16}
+      variant="tertiaryDark"
       {...styles.closeButton}
       {...rest}
     />

package/src/footer/footer.tsx

@@ -1,49 +1,127 @@
 import React from 'react'
 
-import { styled, vui, VuiComponent } from '../core'
+import { styled, useDown, useStyleConfig, vui, VuiComponent } from '../core'
 import { Divider } from '../divider'
+import { Link } from '../link'
+import { T } from '../t'
 import { cs } from '../utils'
 import { FooterProvider } from './context'
-import { FooterProps } from './footer.types'
+import { FooterLinkData, FooterProps } from './footer.types'
 import FooterColumn from './footerColumn'
 import FooterContent from './footerContent'
 import FooterHeading from './footerHeading'
 import FooterLink from './footerLink'
 import FooterRow from './footerRow'
 import FooterSection from './footerSection'
-import FooterTrademark from './footerTrademark'
+import FooterSlimColumn from './footerSlimColumn'
+import { defaultLinkedInUrl, FooterTrademark } from './footerTrademark'
 
+/*@formatter:off*/
 export const FooterBase = styled.divBox`
-  background-color: prussian.80;
+  background-color: darkBlue.main;
   color: white;
   padding: 5 3;
 `
+/*@formatter:on*/
 
 /** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
 export const Footer = vui<'div', FooterProps>((props, ref) => {
-  const { children, className, columns, linkedIn, size, variant, ...rest } = props
+  const { children, className, columns, linkedIn, size, variant, isSlim, ...rest } = props
 
   const context = { size, variant }
 
+  const styles = useStyleConfig('Footer', props)
+
+  const slimLinks: FooterLinkData[] = [
+    {
+      id: 'home',
+      text: 'veracity.com',
+      url: 'https://www.veracity.com/'
+    }
+  ]
+
+  columns?.map(column => {
+    column.map(section => {
+      section.links?.map(link => {
+        if (!link) return
+
+        if (['home', 'support', 'status'].includes(link.id || '')) {
+          slimLinks.push(link)
+        }
+      })
+    })
+  })
+
+  const downMd = useDown('md')
+  const downLg = useDown('lg')
+
   return (
     <FooterProvider value={context}>
-      <FooterBase className={cs('vui-footer', className)} ref={ref} {...rest}>
-        <FooterContent>
-          {children ??
-            (columns && (
-              <FooterRow>
-                {columns.map((sections, index) => (
-                  <FooterColumn key={index} sections={sections} />
-                ))}
-              </FooterRow>
-            ))}
-
-          {children || columns ? <Divider borderColor="grey.60" my={4} /> : null}
-
-          <FooterRow>
-            <FooterTrademark linkedIn={linkedIn} />
-          </FooterRow>
-        </FooterContent>
+      <FooterBase
+        className={cs('vui-footer', className)}
+        py={isSlim ? (downMd ? '16px' : '9px') : 5}
+        {...styles.container}
+        ref={ref}
+        {...rest}
+      >
+        {isSlim && (
+          <FooterContent alignContent="center" alignItems="center" maxW={{ xs: 343, sm: 305, md: 720, lg: 975 }}>
+            <FooterRow>
+              {slimLinks.map((link, index) => {
+                /** if the screen is small drop one specific link */
+                if (downLg && link?.id === 'support') return
+
+                return (
+                  <FooterSlimColumn key={index}>
+                    <FooterLink {...link} />
+                  </FooterSlimColumn>
+                )
+              })}
+
+              {downMd && <Divider borderColor="sandstone.main" mb={0.5} mt={1} w={1} />}
+
+              <FooterSlimColumn centerV>
+                <T size="xs">
+                  <T size="xs" weight="demi">
+                    Veracity by DNV
+                  </T>
+                  , DNV AS
+                </T>
+              </FooterSlimColumn>
+              <FooterSlimColumn>
+                <Link
+                  fontWeight="demi"
+                  href={linkedIn ?? defaultLinkedInUrl}
+                  iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="xs" />}
+                  isExternal
+                  size={{ _: 'sm', md: 'md' }}
+                  {...styles.link}
+                >
+                  <FooterHeading fontSize="16px" mb={0} text="Follow us" />
+                </Link>
+              </FooterSlimColumn>
+            </FooterRow>
+          </FooterContent>
+        )}
+
+        {!isSlim && (
+          <FooterContent>
+            {children ??
+              (columns && (
+                <FooterRow>
+                  {columns.map((sections, index) => (
+                    <FooterColumn key={index} sections={sections} />
+                  ))}
+                </FooterRow>
+              ))}
+
+            {children || columns ? <Divider borderColor="sandstone.main" my={4} /> : null}
+
+            <FooterRow>
+              <FooterTrademark linkedIn={linkedIn} />
+            </FooterRow>
+          </FooterContent>
+        )}
       </FooterBase>
     </FooterProvider>
   )

package/src/footer/footer.types.ts

@@ -26,6 +26,7 @@ export type FooterProps = Omit<BoxProps, 'size' | 'variant'> &
   Pick<FooterTrademarkProps, 'linkedIn'> & {
     /** Data defining content of multiple columns. */
     columns?: FooterColumnData[]
+    isSlim?: boolean
   }
 
 /** Section consists of multiple links with text (label) and url */

package/src/footer/footerColumn.tsx

@@ -16,8 +16,9 @@ const FooterColumn = vui<'div', FooterColumnProps>((props, ref) => {
     <Box
       className={cs('vui-footerColumn', className)}
       column
-      flex={{ xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }}
-      p={1.5}
+      flex={{ xs: '0 0 50%', sm: '0 0 50%', md: '0 0 25%' }}
+      minW={164}
+      p={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
       ref={ref}
       spaceY={4}
       {...styles.column}

package/src/footer/footerContent.tsx

@@ -15,7 +15,8 @@ export const FooterContent = vui<'div', FooterContentProps>((props, ref) => {
     <Box
       className={cs('vui-footerContent', className)}
       column
-      maxW={1200}
+      fontSize={{ xs: 12, sm: 12, md: 14 }}
+      maxW={{ xs: 344, sm: 412, md: 780, lg: 782, xl: 888 }}
       mx="auto"
       ref={ref}
       w="100%"

package/src/footer/footerLink.tsx

@@ -15,7 +15,7 @@ export const FooterLink = vui<'a', LinkProps>((props, ref) => {
       className={cs('vui-footerLink', className)}
       py={0.5}
       ref={ref}
-      size="sm"
+      size={{ _: 'sm', md: 'md' }}
       variant="white"
       {...styles.link}
       {...rest}

package/src/footer/footerSlimColumn.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Box, { BoxProps } from '../box'
+import { useStyleConfig, vui } from '../core'
+import { cs } from '../utils'
+import { useFooterContext } from './context'
+
+/** Organizes sections with links into a single column. Different width per breakpoint. */
+const FooterSlimColumn = vui<'div', BoxProps>((props, ref) => {
+  const { children, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
+
+  return (
+    <Box
+      className={cs('vui-footerSlimColumn')}
+      column
+      flex={{ xs: '0 0 50%', sm: '0 0 20%', md: '0 0 20%' }}
+      minW={164}
+      p={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
+      ref={ref}
+      spaceY={4}
+      {...styles.column}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+})
+
+export default FooterSlimColumn

package/src/footer/footerTrademark.tsx

@@ -8,8 +8,9 @@ import { cs } from '../utils'
 import { useFooterContext } from './context'
 import { FooterTrademarkProps } from './footer.types'
 import FooterColumn from './footerColumn'
+import FooterHeading from './footerHeading'
 
-const defaultLinkedInUrl = 'https://www.linkedin.com/showcase/veracity-data-platform'
+export const defaultLinkedInUrl = 'https://www.linkedin.com/showcase/veracity-data-platform'
 
 /** Section includes a heading and a set of links. */
 export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) => {
@@ -22,11 +23,11 @@ export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) =>
         <Link
           fontWeight="demi"
           href={linkedIn ?? defaultLinkedInUrl}
-          iconLeft={<Link.Icon mr={1} name="fabLinkedin" size="sm" />}
+          iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="sm" />}
           isExternal
-          variant="white"
+          {...styles.link}
         >
-          Follow us
+          <FooterHeading mb={0} text="Follow us" />
         </Link>
       </FooterColumn>
 

package/src/footer/theme.ts

@@ -1,12 +1,50 @@
 const baseStyle = {}
 
-const defaultProps = {}
+const defaultProps = {
+  variant: 'default'
+}
 
 const parts = ['container', 'column', 'content', 'heading', 'link', 'row', 'section', 'trademark']
 
 const sizes = {}
 
-const variants = {}
+const variants = {
+  default: {
+    container: {
+      bg: 'darkBlue.main',
+      color: 'white'
+    },
+    link: {
+      color: 'white'
+    }
+  },
+  developer: {
+    container: {
+      bg: 'darkBlue.main',
+      color: 'white'
+    },
+
+    link: {
+      color: 'digiGreen.main'
+    }
+  },
+  light: {
+    container: {
+      bg: 'white',
+      color: 'darkBlue.main'
+    },
+    row: {
+      color: 'black'
+    },
+
+    link: {
+      color: 'seaBlue.main'
+    },
+    heading: {
+      color: 'darkBlue.main'
+    }
+  }
+}
 
 export default {
   baseStyle,

package/src/header/headerAccount.tsx

@@ -32,12 +32,11 @@ export function HeaderAccount(props: HeaderAccountProps) {
       <Popover.Trigger
         as={Avatar}
         className="vui-headerAccountTrigger"
-        colorScheme="prussian"
         isInteractive
         ml={2}
         name={name}
         title="Account"
-        variant="solid"
+        variant="solidDarkBlue"
         {...styles.trigger}
         {...triggerProps}
       />

package/src/header/headerAccountUserInfo.tsx

@@ -25,13 +25,7 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
     >
       {children ?? (
         <>
-          <Avatar
-            className="vui-headerAccountUserInfoAvatar"
-            // colorScheme="prussian"
-            name={displayName}
-            size="lg"
-            // variant="solid"
-          />
+          <Avatar className="vui-headerAccountUserInfoAvatar" name={displayName} size="lg" variant="solidDarkBlue" />
           <Box column>
             {displayName && (
               <T mb={0.5} weight="demi">

package/src/header/headerDivider.tsx

@@ -12,7 +12,7 @@ export const HeaderDivider = vui<'hr', DividerProps>((props, ref) => {
 
   return (
     <Divider
-      borderColor="prussian.80"
+      borderColor="darkBlue.main"
       className={cs('vui-headerDivider', className)}
       h={40}
       isVertical

package/src/header/headerMobileToggle.tsx

@@ -17,7 +17,6 @@ export const HeaderMobileToggle = vui<'button', ButtonProps>((props, ref) => {
   return (
     <IconButton
       className={cs('vui-headerMobileToggle', className)}
-      colorScheme="prussian"
       icon={<Icon name={iconName} scale={2} />}
       ml={2}
       onClick={() => setIsMobileOpen(s => !s)}