@pingux/astro 2.91.0 → 2.92.0-alpha.1

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

@@ -0,0 +1,277 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React from 'react';
+import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
+import { Avatar, Badge, Box, Button, Card, CheckboxField, Icon, IconButton, IconWrapper, Item, Menu, Messages, MultivaluesField, OverlayProvider, PopoverMenu, RadioField, RadioGroupField, SearchField, SelectField, Tab, Tabs, Text, TextAreaField, TextField } from '../../../../index';
+import statuses from '../../../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var loremText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
+var items = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark'
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo'
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake'
+}, {
+  id: 4,
+  name: 'Frog',
+  key: 'Frog'
+}, {
+  id: 5,
+  name: 'Seal',
+  key: 'Seal'
+}, {
+  id: 6,
+  name: 'Orangutan',
+  key: 'Orangutan'
+}, {
+  id: 7,
+  name: 'Shark',
+  key: 'Shark'
+}];
+var textStyling = {
+  fontSize: 'md',
+  fontWeight: 600
+};
+var avatarColors = ['orange', 'cyan', 'green', 'purple', 'pink', 'red', 'yellow', 'teal'];
+var badges = ['primary', 'baseBadge', 'success', 'danger', 'warning', 'info', 'dark'];
+var tabs = [{
+  name: 'Tab 1',
+  children: 'Tab 1 body'
+}, {
+  name: 'Tab 2',
+  children: 'Tab 2 body'
+}, {
+  name: 'Tab 3',
+  children: 'Tab 3 body'
+}];
+var StickerSheetComponent = function StickerSheetComponent() {
+  return ___EmotionJSX(Box, {
+    sx: {
+      backgroundColor: 'background.base'
+    },
+    height: "100%",
+    p: "lg",
+    gap: "lg"
+  }, ___EmotionJSX(Box, {
+    p: "lg"
+  }, ___EmotionJSX(MultivaluesField, {
+    items: items,
+    label: "Multivalues"
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name,
+      "aria-label": item.name
+    }, item.name);
+  })), ___EmotionJSX(Tabs, {
+    items: tabs
+  }, ___EmotionJSX(Tab, {
+    key: "tab1",
+    title: "Tab 1"
+  }, ___EmotionJSX(Text, null, "This is content for Tab 1")), ___EmotionJSX(Tab, {
+    key: "tab2",
+    title: "Tab 2"
+  }, ___EmotionJSX(Text, null, "This is content for Tab 2"))), ___EmotionJSX(Box, {
+    gap: "lg"
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center"
+  }, _mapInstanceProperty(avatarColors).call(avatarColors, function (color) {
+    return ___EmotionJSX(IconWrapper, {
+      title: {
+        name: 'trash can'
+      },
+      size: "sm",
+      key: color,
+      icon: DeleteIcon,
+      color: color
+    });
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center"
+  }, _mapInstanceProperty(avatarColors).call(avatarColors, function (color) {
+    return ___EmotionJSX(IconWrapper, {
+      title: {
+        name: 'trash can'
+      },
+      size: "md",
+      key: color,
+      icon: DeleteIcon,
+      color: color
+    });
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center",
+    flexWrap: "wrap"
+  }, _mapInstanceProperty(avatarColors).call(avatarColors, function (color) {
+    return ___EmotionJSX(IconWrapper, {
+      title: {
+        name: 'trash can'
+      },
+      size: "lg",
+      key: color,
+      icon: DeleteIcon,
+      color: color
+    });
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md",
+    alignContent: "center"
+  }, ___EmotionJSX(Button, {
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Default"), ___EmotionJSX(Button, {
+    variant: "primary",
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Primary"), ___EmotionJSX(Button, {
+    variant: "critical",
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Critical"), ___EmotionJSX(Button, {
+    variant: "link",
+    sx: {
+      maxWidth: 'fit-content'
+    }
+  }, "Link"), ___EmotionJSX(IconButton, {
+    "aria-label": "default icon button"
+  }, ___EmotionJSX(Icon, {
+    icon: DeleteIcon,
+    title: {
+      name: 'Create Icon'
+    }
+  })), ___EmotionJSX(IconButton, {
+    "aria-label": "default icon button",
+    variant: "nextGen"
+  }, ___EmotionJSX(Icon, {
+    icon: DeleteIcon,
+    title: {
+      name: 'Create Icon'
+    }
+  }))), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md"
+  }, _mapInstanceProperty(avatarColors).call(avatarColors, function (avatar) {
+    return ___EmotionJSX(Avatar, {
+      key: avatar,
+      color: avatar,
+      defaultText: "LK",
+      size: "avatar.md"
+    });
+  })), ___EmotionJSX(Box, {
+    isRow: true,
+    gap: "md"
+  }, _mapInstanceProperty(badges).call(badges, function (badge) {
+    return ___EmotionJSX(Badge, {
+      key: badge,
+      variant: badge,
+      label: badge
+    });
+  })), ___EmotionJSX(Card, {
+    variant: "cards.flat",
+    width: "500px"
+  }, ___EmotionJSX(Box, {
+    variant: "cards.header"
+  }, ___EmotionJSX(Text, {
+    as: "h5",
+    variant: "h5",
+    sx: textStyling
+  }, "Optional Card Header")), ___EmotionJSX(Box, {
+    variant: "cards.body"
+  }, ___EmotionJSX(Text, {
+    as: "h5",
+    variant: "h5",
+    sx: textStyling,
+    mb: "md"
+  }, "Card Body"), ___EmotionJSX(Box, {
+    gap: "md"
+  }, ___EmotionJSX(Button, {
+    sx: {
+      width: 'fit-content'
+    },
+    variant: "primary"
+  }, "Save"), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."))), ___EmotionJSX(Box, {
+    variant: "cards.footer"
+  }, ___EmotionJSX(Text, {
+    as: "h5",
+    variant: "h5",
+    sx: textStyling
+  }, "Optional Card Footer")))), ___EmotionJSX(CheckboxField, {
+    isDefaultSelected: true,
+    label: "Click me"
+  }), ___EmotionJSX(RadioGroupField, null, ___EmotionJSX(RadioField, {
+    value: "A",
+    label: "A"
+  }), ___EmotionJSX(RadioField, {
+    value: "B",
+    label: "B"
+  }), ___EmotionJSX(RadioField, {
+    value: "C",
+    label: "C"
+  })), ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, null, "Popover"), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete"))))), ___EmotionJSX(Box, {
+    p: "md",
+    gap: "lg"
+  }, ___EmotionJSX(TextField, {
+    helperText: "Does this help",
+    label: "Textfield"
+  }), ___EmotionJSX(TextField, {
+    helperText: "Does this help",
+    label: "Disabled Textfield",
+    isDisabled: true
+  }), ___EmotionJSX(SearchField, {
+    label: "SearchField"
+  }), ___EmotionJSX(TextAreaField, {
+    helperText: "Does this help",
+    label: "TextAreaField"
+  })), ___EmotionJSX(Box, {
+    p: "md"
+  }, ___EmotionJSX(SelectField, {
+    label: "SelectField"
+  }, ___EmotionJSX(Item, {
+    key: "edit"
+  }, "Edit"), ___EmotionJSX(Item, {
+    key: "duplicate"
+  }, "Duplicate"), ___EmotionJSX(Item, {
+    key: "delete",
+    textValue: "delete"
+  }, ___EmotionJSX(Text, {
+    color: "critical.bright"
+  }, "Delete")))), ___EmotionJSX(Messages, null, ___EmotionJSX(Item, {
+    key: "message1",
+    "data-id": "message1",
+    status: statuses.SUCCESS
+  }, loremText), ___EmotionJSX(Item, {
+    key: "message2",
+    "data-id": "message2",
+    status: statuses.WARNING
+  }, loremText), ___EmotionJSX(Item, {
+    key: "message3",
+    "data-id": "message3",
+    status: statuses.ERROR
+  }, loremText), ___EmotionJSX(Item, {
+    key: "message4",
+    "data-id": "message4"
+  }, loremText)));
+};
+export default StickerSheetComponent;

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

@@ -0,0 +1,43 @@
+export var avatar = {
+  backgroundColor: 'lightcyan',
+  color: 'darkcyan',
+  cursor: 'pointer',
+  '&.is-orange': {
+    backgroundColor: 'lightorange',
+    color: 'darkorange'
+  },
+  '&.is-green': {
+    backgroundColor: 'lightgreen',
+    color: 'darkgreen'
+  },
+  '&.is-purple': {
+    backgroundColor: 'lightpurple',
+    color: 'darkpurple'
+  },
+  '&.is-pink': {
+    backgroundColor: 'lightpink',
+    color: 'darkpink'
+  },
+  '&.is-red': {
+    backgroundColor: 'lightred',
+    color: 'darkred'
+  },
+  '&.is-yellow': {
+    backgroundColor: 'lightyellow',
+    color: 'darkyellow'
+  },
+  '&.is-cyan': {
+    backgroundColor: 'lightcyan',
+    color: 'darkcyan'
+  },
+  '&.is-teal': {
+    backgroundColor: 'lightteal',
+    color: 'darkteal'
+  },
+  display: 'flex',
+  borderRadius: '50%',
+  textAlign: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontFamily: 'standard'
+};

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

@@ -0,0 +1,94 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _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 buttons from './button';
+var badgeFont = {
+  fontSize: '11.25px',
+  fontWeight: 2
+};
+var baseBadge = {
+  alignItems: 'center',
+  justifyContent: 'center',
+  py: '.25em',
+  px: '.4em',
+  borderRadius: '4px',
+  fontSize: '11.25px',
+  alignSelf: 'flex-start',
+  display: 'inline-flex !important',
+  width: 'fit-content',
+  '& span': _objectSpread({}, badgeFont)
+};
+export var badgeDeleteButton = _objectSpread(_objectSpread({}, buttons.iconButtons.base), {}, {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  height: 14,
+  p: 0,
+  width: 14
+});
+export var badges = {
+  primary: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf1fb !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: '#1967d2'
+    })
+  }),
+  baseBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf1fb !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: '#1967d2'
+    })
+  }),
+  secondary: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#f6f8fa !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'gray-900'
+    })
+  }),
+  success: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#d3eddf !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'success.dark'
+    })
+  }),
+  danger: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#f8d8d5 !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'red-700'
+    })
+  }),
+  warning: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#fff1da !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'yellow-700'
+    })
+  }),
+  dark: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: 'black !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      color: 'white'
+    })
+  }),
+  selectedItemBadge: _objectSpread(_objectSpread({}, baseBadge), {}, {
+    backgroundColor: '#eaf2fd !important',
+    paddingRight: '0px !important',
+    '& span': _objectSpread(_objectSpread({}, badgeFont), {}, {
+      fontSize: '14px',
+      color: 'text.primary',
+      fontWeight: 400
+    })
+  }),
+  readOnlyBadge: {
+    '& span': {
+      fontSize: '14px'
+    }
+  },
+  badgeDeleteButton: badgeDeleteButton
+};

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

@@ -39,7 +39,7 @@ var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   lineHeight: 1.5,
   borderRadius: '1.75rem',
   border: '1px solid',
-  borderColor: 'gray-300',
+  borderColor: 'border.base',
   px: '20px',
   py: '12px',
   height: '48.5px',
@@ -86,7 +86,7 @@ var secondary = _objectSpread(_objectSpread({}, buttonBase), {}, {
 });
 var tertiary = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
-  borderColor: 'gray-300',
+  borderColor: 'border.base',
   color: 'text.secondary'
 });
 var outlineCritical = _objectSpread(_objectSpread({}, buttonBase), {}, {
@@ -122,14 +122,15 @@ var critical = _objectSpread(_objectSpread({}, buttonBase), {}, {
 });
 var checkboxButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
   backgroundColor: 'transparent',
-  borderColor: 'gray-300',
+  borderColor: 'border.base',
   color: 'text.secondary'
 });
 var checkboxActiveButton = _objectSpread(_objectSpread({}, buttonBase), {}, {
-  backgroundColor: 'gray-500',
+  backgroundColor: 'text.primary',
   color: 'white'
 });
 var link = {
+  color: 'active',
   transition: 'color, .15s, ease-in-and-out',
   fontSize: 'md',
   textDecoration: 'none',

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

@@ -9,11 +9,12 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _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 { flat } from '../../../../components/Card/Card.styles';
 var interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
   border: '1px solid',
-  borderColor: 'gray-300',
+  borderColor: 'border.base',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
     outline: '2px solid',
@@ -26,6 +27,21 @@ var interactive = {
     bg: 'default'
   }
 };
+var container = _objectSpread(_objectSpread({}, flat), {}, {
+  p: 'lg'
+});
+var dark = _objectSpread(_objectSpread({}, flat), {}, {
+  border: 'none',
+  backgroundColor: 'card.blue',
+  p: 'lg',
+  gap: 'lg'
+});
+var light = _objectSpread(_objectSpread({}, flat), {}, {
+  border: 'none',
+  backgroundColor: 'card.gray',
+  p: 'lg',
+  gap: 'lg'
+});
 var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
   borderColor: 'border.base',
   '&.is-hovered': {
@@ -35,5 +51,8 @@ var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
 });
 export default {
   interactive: interactive,
-  activeCard: activeCard
+  dark: dark,
+  light: light,
+  activeCard: activeCard,
+  container: container
 };

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

@@ -0,0 +1,43 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _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; }
+var circle = {
+  '&.is-circle': {
+    borderRadius: '50%'
+  }
+};
+var iconWrapper = {
+  sm: _objectSpread({
+    borderRadius: '4px',
+    minHeight: '32px',
+    minWidth: '32px',
+    height: '32px',
+    width: '32px',
+    p: '7px'
+  }, circle),
+  md: _objectSpread({
+    borderRadius: '4px',
+    minHeight: '48px',
+    minWidth: '48px',
+    height: '48px',
+    width: '48px',
+    p: '12px'
+  }, circle),
+  lg: _objectSpread({
+    borderRadius: '16px',
+    minHeight: '104px',
+    minWidth: '104px',
+    height: '104px',
+    width: '104px',
+    p: '28px'
+  }, circle)
+};
+export default _objectSpread({}, iconWrapper);

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

@@ -14,16 +14,16 @@ var defaultFocus = {
   boxShadow: '0 1px 1px rgba(0,0,0,.075), 0 0 0 .0625rem blue'
 };
 var readOnlyandDisabledStyles = {
-  backgroundColor: 'gray-100',
+  backgroundColor: 'disabled',
   border: '1px solid',
-  borderColor: 'border.base',
+  borderColor: 'border.input',
   opacity: 1
 };
 export var input = {
   fontSize: 'md',
   p: '0.75rem',
-  backgroundColor: 'white',
-  borderColor: 'border.base',
+  backgroundColor: 'background.base',
+  borderColor: 'border.input',
   '&.is-focused': _objectSpread({}, defaultFocus),
   borderRadius: '4px',
   fontWeight: 1,
@@ -45,7 +45,7 @@ export var fieldControlWrapper = {
   '> textarea': {
     borderRadius: '4px',
     border: '1px solid',
-    borderColor: 'border.base !important',
+    borderColor: 'border.input !important',
     outline: 'none'
   },
   '&.is-disabled': {
@@ -75,18 +75,18 @@ export var fieldControlWrapper = {
     borderLeftWidth: 1,
     borderRadius: '4px',
     border: '1px solid',
-    borderColor: 'border.base'
+    borderColor: 'border.input'
   },
   '&.is-read-only': {
     '> input': {
       backgroundColor: 'gray-100',
       border: '1px solid',
-      borderColor: 'border.base !important'
+      borderColor: 'border.input !important'
     },
     '> textarea': {
       backgroundColor: 'gray-100',
       border: '1px solid',
-      borderColor: 'border.base !important'
+      borderColor: 'border.input !important'
     },
     '&:after': {
       display: 'none'
@@ -100,7 +100,7 @@ export var fieldControlWrapper = {
 };
 input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
 input.multivaluesWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper), {}, {
-  borderColor: 'border.base',
+  borderColor: 'border.input',
   borderStyle: 'solid',
   borderWidth: 1,
   flexDirection: 'row !important',

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

@@ -1,5 +1,5 @@
 export var label = {
-  color: 'gray-900',
+  color: 'text.primary',
   fontSize: '.9375rem',
   '&.is-float-label': {
     fontSize: 'md',

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

@@ -50,7 +50,13 @@ var sideNav = _objectSpread(_objectSpread({}, nextGen), {}, {
     }
   }
 });
+var footerLinks = _objectSpread({}, sideNav);
+var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
+  fontWeight: '2'
+});
 export default {
   nextGen: nextGen,
-  sideNav: sideNav
+  sideNav: sideNav,
+  footerLinks: footerLinks,
+  footerHeader: footerHeader
 };