@pingux/astro 2.84.0-alpha.1 → 2.84.0-alpha.2

package/lib/cjs/styles/themes/next-gen/variants/cards.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var interactive = {
+  boxShadow: 'none',
+  borderRadius: '24px',
+  border: '1px solid',
+  borderColor: 'gray-300',
+  transition: 'border-color .15s ease-in',
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '0px'
+  },
+  '&.is-hovered': {
+    outline: 'none',
+    borderColor: 'blue',
+    bg: 'default'
+  }
+};
+var _default = {
+  interactive: interactive
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/links.d.ts

@@ -0,0 +1,56 @@
+declare const _default: {
+    nextGen: {
+        color: string;
+        fontSize: string;
+        py: string;
+        px: string;
+        textDecoration: string;
+        borderRadius: string;
+        lineHeight: string;
+        minHeight: string;
+        fontFamily: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+    sideNav: {
+        px: string;
+        display: string;
+        position: string;
+        '&:before': {
+            position: string;
+            display: string;
+            borderRadius: string;
+            content: string;
+            top: string;
+            right: string;
+            bottom: number;
+            left: string;
+            transition: string;
+        };
+        '&.is-selected': {
+            color: string;
+            '&:before': {
+                backgroundColor: string;
+            };
+        };
+        color: string;
+        fontSize: string;
+        py: string;
+        textDecoration: string;
+        borderRadius: string;
+        lineHeight: string;
+        minHeight: string;
+        fontFamily: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/styles/themes/next-gen/variants/links.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var nextGen = {
+  color: 'gray-800',
+  fontSize: 'md',
+  py: 'sm',
+  px: 'md',
+  textDecoration: 'none',
+  borderRadius: '4px',
+  lineHeight: '22.5px',
+  minHeight: '22.5px',
+  fontFamily: 'standard',
+  '&.is-hovered': {
+    color: '#155cba'
+  },
+  '&.is-pressed': {
+    color: '#155cba'
+  }
+};
+var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
+  px: '0',
+  display: 'block',
+  position: 'relative',
+  '&:before': {
+    position: 'absolute',
+    display: 'block',
+    borderRadius: '.25rem',
+    content: '""',
+    top: '0',
+    right: '-1rem',
+    bottom: 0,
+    left: '-1rem',
+    transition: 'background-color .15s ease'
+  },
+  '&.is-selected': {
+    color: '#155cba',
+    '&:before': {
+      backgroundColor: 'active_light'
+    }
+  }
+});
+var _default = {
+  nextGen: nextGen,
+  sideNav: sideNav
+};
+exports["default"] = _default;

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -46,6 +46,7 @@ export declare const text: {
     };
     placeholder: {
         color: string;
+        fontWeight: number;
     };
     paragraph: {
         lineHeight: string;
@@ -53,4 +54,10 @@ export declare const text: {
     listViewItemText: {
         fontWeight: number;
     };
+    small: {
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        lineHeight: string;
+    };
 };

package/lib/cjs/styles/themes/next-gen/variants/text.js

@@ -52,7 +52,7 @@ var hTags = {
     color: 'text.primary',
     fontFamily: 'standard',
     fontWeight: 1,
-    fontSize: 'sm'
+    fontSize: 'xs'
   }
 };
 var text = _objectSpread({
@@ -65,13 +65,20 @@ var text = _objectSpread({
     color: 'text.primary'
   },
   placeholder: {
-    color: 'text.primary'
+    color: 'text.primary',
+    fontWeight: 1
   },
   paragraph: {
     lineHeight: 'body'
   },
   listViewItemText: {
     fontWeight: 2
+  },
+  small: {
+    fontSize: 'sm',
+    color: 'gray-500',
+    fontFamily: 'standard',
+    lineHeight: '1.75rem'
   }
 }, hTags);
 exports.text = text;

package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts

@@ -446,6 +446,9 @@ declare const _default: {
                 bg: string;
             };
         };
+        separator: {
+            my: string;
+        };
     };
     avatar: {
         xl: {
@@ -482,8 +485,12 @@ declare const _default: {
         };
     };
     listViewItem: {
+        rightOfData: {
+            flexShrink: number;
+            whiteSpace: string;
+        };
         iconContainer: {
-            mr: string;
+            ml: string;
         };
         styledListItem: {
             bg: string;
@@ -576,5 +583,28 @@ declare const _default: {
             fontSize: string;
         };
     };
+    codeView: {
+        wrapper: {
+            backgroundColor: string;
+            borderRadius: string;
+            '> button >svg': {
+                color: string;
+                path: {
+                    fill: string;
+                };
+            };
+            '> pre': {
+                p: string;
+            };
+        };
+    };
+    tabs: {
+        gap: string;
+    };
+    menu: {
+        p: string;
+        border: string;
+        borderColor: string;
+    };
 };
 export default _default;

package/lib/cjs/styles/themes/next-gen/variants/variants.js

@@ -235,11 +235,14 @@ var menuItem = {
       color: 'text.primary',
       bg: 'lightblue'
     }
+  },
+  separator: {
+    my: 'sm'
   }
 };
 var separator = {
   base: {
-    bg: 'gray-200'
+    bg: 'gray-300'
   }
 };
 var avatarBase = {
@@ -282,8 +285,12 @@ var progressBar = {
   })
 };
 var listViewItem = {
+  rightOfData: {
+    flexShrink: 4,
+    whiteSpace: 'nowrap'
+  },
   iconContainer: {
-    mr: 'sm'
+    ml: '0px'
   },
   styledListItem: {
     bg: 'white',
@@ -304,8 +311,8 @@ var listViewItem = {
     }
   },
   styledContainer: {
-    py: '1.25rem',
-    px: '1rem',
+    py: '1rem',
+    px: '1.5rem',
     bg: 'transparent',
     '&.is-hovered': {
       bg: 'transparent',
@@ -459,6 +466,29 @@ var dataTable = {
     fontSize: 'md'
   }
 };
+var codeView = {
+  wrapper: {
+    backgroundColor: 'gray-900',
+    borderRadius: '4px',
+    '> button >svg': {
+      color: 'gray-300',
+      path: {
+        fill: 'gray-300'
+      }
+    },
+    '> pre': {
+      p: 'md'
+    }
+  }
+};
+var tabs = {
+  gap: '0px'
+};
+var menu = {
+  p: 'sm',
+  border: '1px solid',
+  borderColor: 'gray-300'
+};
 var _default = {
   navBar: navBar,
   fieldHelperText: fieldHelperText,
@@ -473,6 +503,9 @@ var _default = {
   listViewItem: listViewItem,
   progressBar: progressBar,
   listView: listView,
-  dataTable: dataTable
+  dataTable: dataTable,
+  codeView: codeView,
+  tabs: tabs,
+  menu: menu
 };
 exports["default"] = _default;

package/lib/cjs/types/codeView.d.ts

@@ -13,4 +13,5 @@ export interface CodeViewProps extends HoverProps {
     language?: Language;
     Prism?: PrismProps;
     sx?: ThemeUICSSObject;
+    stylesProp?: ThemeUICSSObject;
 }

package/lib/cjs/types/link.d.ts

@@ -22,6 +22,7 @@ export interface LinkProps extends TestingAttributes {
     sx?: ThemeUICSSObject;
     id?: string;
     color?: string;
+    isSelected?: boolean;
     'aria-label'?: string;
 }
 export {};

package/lib/components/CodeView/CodeView.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "Prism"];
+var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "Prism", "stylesProp"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
@@ -30,6 +30,8 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     hasNoCopyButton = props.hasNoCopyButton,
     language = props.language,
     customPrism = props.Prism,
+    _props$stylesProp = props.stylesProp,
+    stylesProp = _props$stylesProp === void 0 ? styles : _props$stylesProp,
     others = _objectWithoutProperties(props, _excluded);
   var _useFocusRing = useFocusRing(),
     isFocusVisible = _useFocusRing.isFocusVisible,
@@ -46,12 +48,13 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     classNames = _useStatusClasses.classNames;
 
   // Get the width for the line number element depending on the total amount of lines
+
   var getLineNoWidth = function getLineNoWidth(tokens) {
     return tokens.length.toString().length * 12;
   };
   var code = (children === null || children === void 0 ? void 0 : _trimInstanceProperty(children).call(children)) || '';
   var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
-    theme: styles.theme,
+    theme: stylesProp.theme,
     code: code,
     language: language,
     Prism: customPrism || Prism

package/lib/components/CodeView/CodeView.styles.js

@@ -105,14 +105,15 @@ var wrapper = {
   pre: {
     backgroundColor: 'transparent',
     m: 0,
-    p: 10,
+    p: 'sm',
     pr: 0,
     height: '100%',
     width: '100%',
     overflowX: 'hidden',
     overflowY: 'auto',
-    fontFamily: 'standard',
-    fontSize: 'sm',
+    fontFamily: 'codeView',
+    fontSize: '13px',
+    lineHeight: 'md',
     '& .token-line': {
       display: 'block',
       alignItems: 'center',

package/lib/components/Link/Link.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "isDisabled", "onPress", "isSafariCompatible"];
+var _excluded = ["className", "isDisabled", "onPress", "isSelected", "isSafariCompatible"];
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing, useLink } from 'react-aria';
 import { useHover, usePress } from '@react-aria/interactions';
@@ -11,6 +11,7 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     isDisabled = props.isDisabled,
     onPress = props.onPress,
+    isSelected = props.isSelected,
     isSafariCompatible = props.isSafariCompatible,
     others = _objectWithoutProperties(props, _excluded);
   var linkRef = useRef(null);
@@ -33,6 +34,7 @@ var Link = /*#__PURE__*/forwardRef(function (props, ref) {
     pressProps = _usePress.pressProps,
     isPressed = _usePress.isPressed;
   var _useStatusClasses = useStatusClasses(className, {
+      isSelected: isSelected,
       isDisabled: isDisabled,
       isFocused: isFocusVisible,
       isHovered: isHovered,

package/lib/components/MenuItem/MenuItem.styles.js

@@ -18,7 +18,8 @@ var separator = {
   padding: '0px',
   '& > [role="separator"]': {
     margin: '0px'
-  }
+  },
+  outline: 'none'
 };
 export default {
   item: item,

package/lib/components/Tabs/Tabs.js

@@ -82,7 +82,6 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     value: state
   }, ___EmotionJSX(Box, others, ___EmotionJSX(Box, _extends({
     variant: "tabs",
-    gap: "25px",
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, tabListProps, raTabListProps, {
     ref: tabListRef,

package/lib/components/Tabs/Tabs.style.js

@@ -43,7 +43,8 @@ export var tabs = {
   borderBottomWidth: 1,
   borderBottomStyle: 'solid',
   borderBottomColor: 'neutral.90',
-  mb: 'lg'
+  mb: 'lg',
+  gap: '25px'
 };
 export var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
   color: 'neutral.40',

package/lib/styles/theme.js

@@ -26,10 +26,14 @@ export default {
   },
   breakpoints: breakpoints,
   fonts: {
-    standard: '"Helvetica Neue", Helvetica, sans-serif'
+    standard: '"Helvetica Neue", Helvetica, sans-serif',
+    codeView: '"Roboto Mono", "Lucida Console", Courier, monospace'
   },
   fontSizes: fontSizes,
   fontWeights: fontWeights,
+  lineHeights: {
+    md: '1.5'
+  },
   sizes: {
     buttonHeight: 36,
     column: 400,

package/lib/styles/themes/next-gen/codeView/codeView.js

@@ -0,0 +1,126 @@
+var nextGenCodeViewTheme = {
+  plain: {
+    color: '#f8f8f2',
+    backgroundColor: '#272822'
+  },
+  styles: [{
+    types: ['comment', 'prolog', 'doctype', 'cdata'],
+    style: {
+      color: '#93a1a1'
+    }
+  }, {
+    types: ['punctuation'],
+    style: {
+      color: '#999999'
+    }
+  }, {
+    types: ['deleted', 'property', 'tag', 'boolean', 'number', 'constant', 'symbol'],
+    style: {
+      color: '#c792ea'
+    }
+  }, {
+    types: ['inserted', 'selector', 'string', 'char', 'builtin', 'inserted', 'attr-name'],
+    style: {
+      color: '#A1C281'
+    }
+  }, {
+    types: ['operator', 'entity', 'url', 'language-css', 'style'],
+    style: {
+      color: '#dfc084',
+      background: 'transparent'
+    }
+  }, {
+    types: ['atrule', 'attr-value', 'keyword'],
+    style: {
+      color: '#c792ea'
+    }
+  }, {
+    types: ['function'],
+    style: {
+      color: '#53bcfd'
+    }
+  }, {
+    types: ['regex', 'important', 'variable'],
+    style: {
+      color: '#f07178'
+    }
+  }, {
+    types: ['important', 'bold'],
+    style: {
+      fontWeight: 'bold'
+    }
+  }, {
+    types: ['entity'],
+    style: {
+      cursor: 'help'
+    }
+  }]
+};
+var nextGenCodeViewWrapper = {
+  bg: 'accent.99',
+  border: '1px solid',
+  borderColor: 'accent.95',
+  width: 400,
+  height: 200,
+  my: 'xs',
+  overflow: 'auto',
+  alignItems: 'center',
+  '&.is-focused, &:focus': {
+    boxShadow: 'focus',
+    outline: 'none'
+  },
+  pre: {
+    backgroundColor: 'transparent',
+    padding: '1em',
+    height: '100%',
+    width: '100%',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    fontSize: '13px',
+    '& .token-line': {
+      display: 'block',
+      alignItems: 'center',
+      '& .token': {
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-all'
+      }
+    },
+    fontFamily: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace',
+    lineHeight: 1.75
+  },
+  '&.has-no-copy-button': {
+    pre: {
+      p: 'sm'
+    }
+  },
+  '&.has-line-numbers': {
+    pre: {
+      p: '0 10px 0 0',
+      overflow: 'auto',
+      '& .token-line:first-of-type *': {
+        pt: 'sm'
+      },
+      '& .token-line': {
+        display: 'flex',
+        '& .token': {
+          whiteSpace: 'pre'
+        }
+      }
+    }
+  }
+};
+var lineNo = {
+  display: 'table-cell',
+  userSelect: 'none',
+  px: 'xs',
+  m: '0 10px 0 0',
+  bg: 'accent.30',
+  minWidth: 26,
+  color: 'white',
+  lineHeight: '20px'
+};
+export default {
+  theme: nextGenCodeViewTheme,
+  wrapper: nextGenCodeViewWrapper,
+  lineNo: lineNo
+};

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,2 +1,2 @@
-var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView'];
+var nextGenConvertedComponents = ['DataTable', 'Message', 'Button', 'Badge', 'IconButton', 'CheckboxField', 'Messages', 'PopoverMenu', 'TextField', 'PasswordField', 'SearchField', 'SelectField', 'Modal', 'RadioField', 'MultiValuesField', 'TextAreaField', 'RadioGroupField', 'Tabs', 'ProgressBar', 'NavBar', 'OverlayPanel', 'AstroProvider', 'ListView', 'MultivaluesField', 'Text', 'Link', 'Card'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/next-gen.js

@@ -11,31 +11,58 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import merge from 'deepmerge';
 import theme from '../../theme.js';
+import codeView from './codeView/codeView';
 import colors from './colors/colors';
 import buttons from './variants/button';
+import cards from './variants/cards';
+import links from './variants/links';
 import { text as newText } from './variants/text';
 import variants, { badges } from './variants/variants';
 import forms from './forms';
+import spacing from './spacing';
 import { fontSizes, fontWeights } from './text';
 import './open_sans.css';
+var breakpoints = ['0px', '576px', '768px', '992px', '1200px', '1600px'];
 var nextGenTheme = {
   name: 'Next Gen',
   colors: colors,
+  breakpoints: breakpoints,
   buttons: buttons,
   forms: forms,
   fontSizes: fontSizes,
   fontWeights: fontWeights,
   lineHeights: {
-    body: '1.5'
+    body: '1.5',
+    md: '1.75'
   },
   text: newText,
   fonts: {
     standard: '"Open Sans", sans-serif',
     body: '"Open Sans", sans-serif',
-    heading: '"Open Sans", sans-serif'
+    heading: '"Open Sans", sans-serif',
+    codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
+  },
+  sizes: {
+    container: {
+      xs: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+      sm: ['100%', '540px', '720px', '960px', '1140px', '1540px'],
+      md: ['100%', '100%', '720px', '960px', '1140px', '1540px'],
+      lg: ['100%', '100%', '100%', '960px', '1140px', '1540px'],
+      xl: ['100%', '100%', '100%', '100%', '1140px', '1540px'],
+      xx: ['100%', '100%', '100%', '100%', '100%', '1540px'],
+      fluid: ['100%', '100%', '100%', '100%', '100%', '100%']
+    }
   },
   badges: badges,
-  variants: variants
+  space: spacing,
+  links: links,
+  cards: cards,
+  variants: variants,
+  overrides: {
+    codeView: codeView
+  }
 };
 var mergedTheme = merge(theme, nextGenTheme);
-export default _objectSpread({}, mergedTheme);
+export default _objectSpread(_objectSpread({}, mergedTheme), {}, {
+  breakpoints: breakpoints
+});

package/lib/styles/themes/next-gen/spacing.js

@@ -0,0 +1,9 @@
+var scale = {
+  xs: '.25rem',
+  sm: '.5rem',
+  md: '1rem',
+  lg: '1.5rem',
+  xl: '3rem',
+  xx: '4rem'
+};
+export default scale;