@automattic/vip-design-system 1.2.0 → 1.2.2

package/build/system/index.js

@@ -1,87 +1,105 @@
-"use strict";
+/**
+ * Internal dependencies
+ */
+import { Avatar } from './Avatar';
+import { Badge } from './Badge';
+import { Box } from './Box';
+import { Button, ButtonSubmit } from './Button';
+import { Card } from './Card';
+import { Code } from './Code';
+import {
+	Dialog,
+	DialogButton,
+	DialogDivider,
+	DialogMenu,
+	DialogMenuItem,
+	DialogTrigger,
+	DialogContent,
+} from './Dialog';
 
-exports.__esModule = true;
-exports.NewDialog = exports.Form = exports.Dropdown = void 0;
-var _Avatar = require("./Avatar");
-exports.Avatar = _Avatar.Avatar;
-var _Badge = require("./Badge");
-exports.Badge = _Badge.Badge;
-var _Box = require("./Box");
-exports.Box = _Box.Box;
-var _Button = require("./Button");
-exports.Button = _Button.Button;
-exports.ButtonSubmit = _Button.ButtonSubmit;
-var _Card = require("./Card");
-exports.Card = _Card.Card;
-var _Code = require("./Code");
-exports.Code = _Code.Code;
-var _Dialog = require("./Dialog");
-exports.Dialog = _Dialog.Dialog;
-exports.DialogButton = _Dialog.DialogButton;
-exports.DialogDivider = _Dialog.DialogDivider;
-exports.DialogMenu = _Dialog.DialogMenu;
-exports.DialogMenuItem = _Dialog.DialogMenuItem;
-exports.DialogTrigger = _Dialog.DialogTrigger;
-exports.DialogContent = _Dialog.DialogContent;
-var NewDialog = _interopRequireWildcard(require("./NewDialog"));
-exports.NewDialog = NewDialog;
-var Dropdown = _interopRequireWildcard(require("./Dropdown"));
-exports.Dropdown = Dropdown;
-var Form = _interopRequireWildcard(require("./NewForm"));
-exports.Form = Form;
-var _ConfirmationDialog = require("./ConfirmationDialog");
-exports.ConfirmationDialog = _ConfirmationDialog.ConfirmationDialog;
-var _NewConfirmationDialog = require("./NewConfirmationDialog");
-exports.NewConfirmationDialog = _NewConfirmationDialog.NewConfirmationDialog;
-var _Flex = require("./Flex");
-exports.Flex = _Flex.Flex;
-var _Form = require("./Form");
-exports.Input = _Form.Input;
-exports.Label = _Form.Label;
-exports.Toggle = _Form.Toggle;
-exports.ToggleRow = _Form.ToggleRow;
-exports.Validation = _Form.Validation;
-exports.Radio = _Form.Radio;
-exports.RadioBoxGroup = _Form.RadioBoxGroup;
-exports.Textarea = _Form.Textarea;
-exports.Checkbox = _Form.Checkbox;
-var _Accordion = require("./Accordion");
-exports.Accordion = _Accordion.Accordion;
-var _Grid = require("./Grid");
-exports.Grid = _Grid.Grid;
-var _Heading = require("./Heading");
-exports.Heading = _Heading.Heading;
-var _Link = require("./Link");
-exports.Link = _Link.Link;
-var _Notice = require("./Notice");
-exports.Notice = _Notice.Notice;
-var _Progress = require("./Progress");
-exports.Progress = _Progress.Progress;
-var _Spinner = require("./Spinner");
-exports.Spinner = _Spinner.Spinner;
-var _Tooltip = require("./Tooltip");
-exports.Tooltip = _Tooltip.Tooltip;
-var _Notification = require("./Notification");
-exports.Notification = _Notification.Notification;
-var _OptionRow = require("./OptionRow");
-exports.OptionRow = _OptionRow.OptionRow;
-var _Table = require("./Table");
-exports.Table = _Table.Table;
-exports.TableRow = _Table.TableRow;
-exports.TableCell = _Table.TableCell;
-var _Text = require("./Text");
-exports.Text = _Text.Text;
-var _theme = _interopRequireDefault(require("./theme"));
-exports.theme = _theme["default"];
-var _Wizard = require("./Wizard");
-exports.Wizard = _Wizard.Wizard;
-exports.WizardStep = _Wizard.WizardStep;
-exports.WizardStepHorizontal = _Wizard.WizardStepHorizontal;
-var _Tabs = require("./Tabs");
-exports.Tabs = _Tabs.Tabs;
-exports.TabsList = _Tabs.TabsList;
-exports.TabsContent = _Tabs.TabsContent;
-exports.TabsTrigger = _Tabs.TabsTrigger;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+import * as NewDialog from './NewDialog';
+import * as Dropdown from './Dropdown';
+import * as Form from './NewForm';
+
+import { ConfirmationDialog } from './ConfirmationDialog';
+import { NewConfirmationDialog } from './NewConfirmationDialog';
+import { Flex } from './Flex';
+import {
+	Input,
+	Label,
+	Toggle,
+	ToggleRow,
+	Validation,
+	Radio,
+	RadioBoxGroup,
+	Textarea,
+	Checkbox,
+} from './Form';
+import { Accordion } from './Accordion';
+import { Grid } from './Grid';
+import { Heading } from './Heading';
+import { Link } from './Link';
+import { Notice } from './Notice';
+import { Progress } from './Progress';
+import { Spinner } from './Spinner';
+import { Tooltip } from './Tooltip';
+
+import { OptionRow } from './OptionRow';
+import { Table, TableRow, TableCell } from './Table';
+import { Text } from './Text';
+import theme from './theme';
+import { Wizard, WizardStep, WizardStepHorizontal } from './Wizard';
+import { Tabs, TabsList, TabsContent, TabsTrigger } from './Tabs';
+
+export {
+	Accordion,
+	Avatar,
+	Badge,
+	Box,
+	Button,
+	ButtonSubmit,
+	Card,
+	Checkbox,
+	Code,
+	Dialog,
+	NewDialog,
+	Form,
+	Dropdown,
+	DialogButton,
+	DialogMenu,
+	DialogMenuItem,
+	DialogDivider,
+	DialogContent,
+	DialogTrigger,
+	ConfirmationDialog,
+	NewConfirmationDialog,
+	Grid,
+	Flex,
+	Notice,
+	OptionRow,
+	Heading,
+	Input,
+	Label,
+	Spinner,
+	Table,
+	TableRow,
+	TableCell,
+	Tooltip,
+	Link,
+	Radio,
+	RadioBoxGroup,
+	Textarea,
+	Progress,
+	Text,
+	Tabs,
+	TabsTrigger,
+	TabsContent,
+	TabsList,
+	Toggle,
+	ToggleRow,
+	Validation,
+	Wizard,
+	WizardStep,
+	WizardStepHorizontal,
+	theme,
+};

package/build/system/theme/colors.d.ts

@@ -0,0 +1,2 @@
+declare function _default(theme: any): any;
+export default _default;

package/build/system/theme/colors.js

@@ -1,16 +1,11 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /** @jsxImportSource theme-ui */
+
 /**
  * External dependencies
  */
-var _default = function _default(theme) {
-  return _extends({}, theme.color, {
-    brand: theme.color.gold,
-    grey: theme.color.gray
-  });
-};
-exports["default"] = _default;
+
+export default theme => ( {
+	...theme.color,
+	brand: theme.color.gold,
+	grey: theme.color.gray,
+} );

package/build/system/theme/getColor.d.ts

@@ -0,0 +1,8 @@
+declare function _default(theme: any): {
+    ValetTheme: any;
+    getColor: (color: any, variant?: string) => any;
+    getVariants: (color: any) => {};
+    traverse: (root: any) => any;
+    resolvePath: (object: any, path: any, defaultValue: any) => any;
+};
+export default _default;

package/build/system/theme/getColor.js

@@ -1,52 +1,53 @@
-"use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**
  * Internal dependencies
  */
+
 // Valet Theme Productive Theme
 // https://www.figma.com/file/sILtW5Cs2tAnPWrSOEVyER/Productive-Color?node-id=1%3A17&t=4kHdpoprxntk5Ilw-0
-var _default = function _default(theme) {
-  var getColor = function getColor(color, variant) {
-    if (variant === void 0) {
-      variant = 'default';
-    }
-    if (!theme[color]) {
-      return '#000000';
-    }
-    return theme[color][variant].value;
-  };
-  var resolvePath = function resolvePath(object, path, defaultValue) {
-    return path.split('.').reduce(function (acc, property) {
-      return acc ? acc[property] : defaultValue;
-    }, object);
-  };
-  var getVariants = function getVariants(color) {
-    var property = resolvePath(theme, color, {});
-    return Object.keys(property).reduce(function (variants, variant) {
-      var _extends2;
-      return _extends({}, variants, (_extends2 = {}, _extends2[variant] = property[variant].value, _extends2));
-    }, {});
-  };
-  var traverse = function traverse(root) {
-    if (root.hasOwnProperty('value') && root.hasOwnProperty('type')) {
-      return root.value;
-    }
-    return Object.entries(root).reduce(function (acc, _ref) {
-      var _extends3;
-      var key = _ref[0],
-        value = _ref[1];
-      return _extends({}, acc, (_extends3 = {}, _extends3[key] = traverse(value), _extends3));
-    }, {});
-  };
-  return {
-    ValetTheme: traverse(theme),
-    getColor: getColor,
-    getVariants: getVariants,
-    traverse: traverse,
-    resolvePath: resolvePath
-  };
+
+export default theme => {
+	const getColor = ( color, variant = 'default' ) => {
+		if ( ! theme[ color ] ) {
+			return '#000000';
+		}
+
+		return theme[ color ][ variant ].value;
+	};
+
+	const resolvePath = ( object, path, defaultValue ) => {
+		return path.split( '.' ).reduce( ( acc, property ) => {
+			return acc ? acc[ property ] : defaultValue;
+		}, object );
+	};
+
+	const getVariants = color => {
+		const property = resolvePath( theme, color, {} );
+
+		return Object.keys( property ).reduce(
+			( variants, variant ) => ( { ...variants, [ variant ]: property[ variant ].value } ),
+			{}
+		);
+	};
+
+	const traverse = root => {
+		if ( root.hasOwnProperty( 'value' ) && root.hasOwnProperty( 'type' ) ) {
+			return root.value;
+		}
+
+		return Object.entries( root ).reduce(
+			( acc, [ key, value ] ) => ( {
+				...acc,
+				[ key ]: traverse( value ),
+			} ),
+			{}
+		);
+	};
+
+	return {
+		ValetTheme: traverse( theme ),
+		getColor,
+		getVariants,
+		traverse,
+		resolvePath,
+	};
 };
-exports["default"] = _default;

package/build/system/theme/index.d.ts

@@ -0,0 +1,322 @@
+declare namespace _default {
+    export { outline };
+    export let space: number[];
+    export { fonts };
+    export let fontSizes: number[];
+    export namespace fontWeights {
+        let body: number;
+        let heading: number;
+        let bold: number;
+    }
+    export namespace lineHeights {
+        let body_1: number;
+        export { body_1 as body };
+        let heading_1: number;
+        export { heading_1 as heading };
+    }
+    export namespace sizes {
+        let sidebar: number;
+    }
+    export let radii: number[];
+    export namespace config {
+        let useColorSchemeMediaQuery: boolean;
+    }
+    export let initialColorModeName: string;
+    export let colors: any;
+    export namespace shadows {
+        let low: string;
+        let medium: string;
+        let high: string;
+    }
+    export namespace tag {
+        let gold: {};
+    }
+    export namespace cards {
+        namespace primary {
+            let padding: number;
+            let borderRadius: number;
+            let backgroundColor: string;
+            let boxShadow: string;
+        }
+        namespace secondary {
+            let borderRadius_1: number;
+            export { borderRadius_1 as borderRadius };
+            export let p: number;
+            let boxShadow_1: string;
+            export { boxShadow_1 as boxShadow };
+            export let border: string;
+            export let borderColor: string;
+        }
+        namespace indent {
+            let borderRadius_2: number;
+            export { borderRadius_2 as borderRadius };
+            let p_1: number;
+            export { p_1 as p };
+            let boxShadow_2: string;
+            export { boxShadow_2 as boxShadow };
+            let backgroundColor_1: string;
+            export { backgroundColor_1 as backgroundColor };
+        }
+    }
+    export namespace buttons {
+        let primary_1: {
+            fontFamily: string;
+            color: string;
+            bg: string;
+            border: string;
+            cursor: string;
+            fontWeight: string;
+            boxShadow: string;
+            borderRadius: number;
+            '&:hover, &:focus': {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        export { primary_1 as primary };
+        let secondary_1: {
+            variant: string;
+            color: string;
+            bg: string;
+            '&:hover, &:focus': {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        export { secondary_1 as secondary };
+        export let tertiary: {
+            variant: string;
+            color: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            '&:hover, &:focus': {
+                backgroundColor: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
+        };
+        export let display: {
+            variant: string;
+            color: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            '&:hover, &:focus': {
+                backgroundColor: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
+        };
+        export let ghost: {
+            variant: string;
+            color: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            '&:hover, &:focus': {
+                backgroundColor: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
+        };
+        export let danger: {
+            variant: string;
+            color: string;
+            bg: string;
+            border: string;
+            borderColor: string;
+            '&:hover, &:focus': {
+                backgroundColor: string;
+                color: string;
+                border: string;
+                borderColor: string;
+            };
+        };
+        let border_1: {
+            background: string;
+            border: string;
+            borderColor: string;
+            cursor: string;
+            display: string;
+            alignItems: string;
+            color: string;
+            '&:hover': {
+                bg: string;
+            };
+        };
+        export { border_1 as border };
+        export namespace text {
+            let variant: string;
+            let color: string;
+        }
+        export let icon: {
+            variant: string;
+            color: string;
+            padding: number;
+            '&:hover, &:focus': {
+                backgroundColor: string;
+            };
+        };
+    }
+    export namespace links {
+        let dark: {
+            color: string;
+            '&:hover': {
+                color: string;
+            };
+        };
+        let hover: {
+            display: string;
+            color: string;
+            py: number;
+            px: number;
+            my: number;
+            mx: number;
+            borderRadius: number;
+            '&:hover': {
+                backgroundColor: string;
+            };
+        };
+    }
+    export { textStyles as text };
+    export namespace dialog {
+        export namespace modal {
+            export let position: string;
+            export let top: string;
+            export let left: string;
+            export let maxWidth: string;
+            let backgroundColor_2: string;
+            export { backgroundColor_2 as backgroundColor };
+            let boxShadow_3: string;
+            export { boxShadow_3 as boxShadow };
+        }
+        export namespace sidebar_1 {
+            let position_1: string;
+            export { position_1 as position };
+            let top_1: string;
+            export { top_1 as top };
+            export let height: string;
+            let left_1: string;
+            export { left_1 as left };
+            export let overflow: string;
+            export let margin: number;
+            let borderRadius_3: number;
+            export { borderRadius_3 as borderRadius };
+            let boxShadow_4: string;
+            export { boxShadow_4 as boxShadow };
+            let backgroundColor_3: string;
+            export { backgroundColor_3 as backgroundColor };
+        }
+        export { sidebar_1 as sidebar };
+        export namespace cover {
+            let position_2: string;
+            export { position_2 as position };
+            let backgroundColor_4: string;
+            export { backgroundColor_4 as backgroundColor };
+            export let width: string;
+            let left_2: number;
+            export { left_2 as left };
+            let top_2: number;
+            export { top_2 as top };
+            let height_1: string;
+            export { height_1 as height };
+            export let transform: string;
+            let borderRadius_4: number;
+            export { borderRadius_4 as borderRadius };
+            export let opacity: number;
+        }
+    }
+    export namespace styles {
+        let root: {
+            h1: {
+                fontSize: number;
+                marginBottom: number;
+                letterSpacing: string;
+                fontWeight: string;
+                fontFamily: string;
+                color: string;
+            };
+            h2: {
+                fontSize: number;
+                marginBottom: number;
+                letterSpacing: string;
+                fontWeight: number;
+                color: string;
+            };
+            h3: {
+                fontSize: number;
+                marginBottom: number;
+                letterSpacing: string;
+                lineHeight: number;
+                fontWeight: string;
+                color: string;
+            };
+            h4: {
+                fontSize: number;
+                marginBottom: number;
+                lineHeight: number;
+                fontWeight: string;
+                color: string;
+            };
+            h5: {
+                fontSize: number;
+                marginBottom: number;
+                lineHeight: number;
+                fontWeight: string;
+                color: string;
+            };
+            caps: {
+                fontSize: number;
+                marginBottom: number;
+                color: string;
+                fontWeight: string;
+                letterSpacing: string;
+            };
+            fontFamily: string;
+            lineHeight: string;
+            fontWeight: string;
+            fontSize: number;
+            color: string;
+            backgroundColor: string;
+            '-webkit-font-smoothing': string;
+            '-moz-osx-font-smoothing': string;
+            a: {
+                '&:hover': {
+                    textDecorationLine: string;
+                    textDecorationThickness: string;
+                };
+            };
+            svg: {
+                fill: string;
+                display: string;
+            };
+            pre: {
+                fontFamily: string;
+            };
+            p: {
+                color: string;
+            };
+        };
+    }
+}
+export default _default;
+declare namespace outline {
+    export let outlineStyle: string;
+    export let outlineColor: any;
+    export let outlineWidth: string;
+    let boxShadow_5: string;
+    export { boxShadow_5 as boxShadow };
+}
+declare namespace fonts {
+    let body_2: string;
+    export { body_2 as body };
+    let heading_2: string;
+    export { heading_2 as heading };
+    export let monospace: string;
+    export let serif: string;
+}
+import { textStyles } from './textStyles';