@pingux/astro 2.91.0-alpha.1 → 2.92.0-alpha.0

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -0,0 +1,105 @@
+"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"));
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
+var _colorTokens = require("../../../themes/next-gen/tokens/colorTokens");
+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 baseIconButton = {
+  path: {
+    fill: 'dark'
+  },
+  '&.is-focused': {
+    outline: '2px solid',
+    outlineColor: 'primary',
+    outlineOffset: '3px'
+  },
+  '&.is-hovered': {
+    path: {
+      fill: _chromaJs["default"].mix(_colorTokens.nextGenColors['gray-400'], 'black', 0.15, 'rgb').hex()
+    },
+    backgroundColor: 'transparent'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'gray-800',
+    borderColor: 'gray-900',
+    path: {
+      fill: _chromaJs["default"].mix(_colorTokens.nextGenColors['gray-400'], 'black', 0.15, 'rgb').hex()
+    }
+  }
+};
+var iconButtons = {
+  base: _objectSpread({}, baseIconButton),
+  nextGen: {
+    '&.is-hovered': {
+      path: {
+        fill: 'black'
+      }
+    },
+    '&.is-pressed': {
+      path: {
+        fill: 'black'
+      }
+    }
+  }
+};
+var buttons = {
+  primary: {
+    color: 'black',
+    '&.is-hovered': {
+      color: 'black'
+    },
+    '&.is-pressed': {
+      color: 'black'
+    }
+  },
+  neutral: {
+    color: 'gray-400'
+  },
+  critical: {
+    color: 'black',
+    '&.is-hovered': {
+      color: 'black'
+    },
+    '&.is-pressed': {
+      color: 'black'
+    }
+  },
+  "default": {
+    '&.is-pressed': {
+      color: 'black'
+    },
+    '&.is-hovered': {
+      color: 'black'
+    }
+  },
+  link: {
+    color: 'blue-400',
+    '&.is-pressed': {
+      textDecoration: 'underline',
+      outline: 'none',
+      color: _chromaJs["default"].mix(_colorTokens.nextGenColors['blue-500'], 'white', 0.45, 'rgb').hex()
+    },
+    '&.is-focused': {
+      textDecoration: 'underline',
+      color: _chromaJs["default"].mix(_colorTokens.nextGenColors['blue-500'], 'white', 0.30, 'rgb').hex(),
+      outline: 'none'
+    }
+  },
+  iconButtons: iconButtons
+};
+var _default = buttons;
+exports["default"] = _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/cards.d.ts

@@ -0,0 +1,15 @@
+declare const cards: {
+    dark: {
+        border: string;
+        borderColor: string;
+        boxShadow: string;
+        bg: string;
+    };
+    light: {
+        border: string;
+        borderColor: string;
+        boxShadow: string;
+        bg: string;
+    };
+};
+export default cards;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/cards.js

@@ -0,0 +1,23 @@
+"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 cards = {
+  dark: {
+    border: '1px solid',
+    borderColor: 'border.base',
+    boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+    bg: 'transparent'
+  },
+  light: {
+    border: '1px solid',
+    borderColor: 'border.base',
+    boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+    bg: 'transparent'
+  }
+};
+var _default = cards;
+exports["default"] = _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.d.ts

@@ -0,0 +1,68 @@
+export declare const select: {
+    backgroundColor: string;
+    borderRadius: string;
+    border: string;
+    borderColor: string;
+    color: string;
+    height: string;
+    '&.is-disabled': {
+        opacity: number;
+        borderColor: string;
+        backgroundColor: string;
+    };
+    currentValue: {
+        color: string;
+    };
+};
+export declare const radio: {
+    base: {
+        color: string;
+    };
+};
+export declare const checkbox: {
+    color: string;
+};
+declare const _default: {
+    input: import("theme-ui").ThemeUICSSObject;
+    checkbox: {
+        color: string;
+    };
+    radio: {
+        base: {
+            color: string;
+        };
+    };
+    select: {
+        option: {
+            backgroundColor: string;
+            color: string;
+            px: string;
+            py: string;
+            alignItems: string;
+            outline: string;
+            cursor: string;
+            '&.is-selected': {
+                pl: number;
+            };
+            '&.is-focused': {
+                color: string;
+                bg: string;
+            };
+        };
+        backgroundColor: string;
+        borderRadius: string;
+        border: string;
+        borderColor: string;
+        color: string;
+        height: string;
+        '&.is-disabled': {
+            opacity: number;
+            borderColor: string;
+            backgroundColor: string;
+        };
+        currentValue: {
+            color: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/forms.js

@@ -0,0 +1,71 @@
+"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.select = exports.radio = exports["default"] = exports.checkbox = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _input = require("./input");
+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 select = {
+  backgroundColor: 'background.base',
+  borderRadius: '4px',
+  border: '.5px solid',
+  borderColor: '#69788B !important',
+  color: 'text.primary',
+  height: '50px',
+  '&.is-disabled': {
+    opacity: 1,
+    borderColor: 'border.input',
+    backgroundColor: 'disabled'
+  },
+  currentValue: {
+    color: 'text.primary'
+  }
+};
+exports.select = select;
+var radio = {
+  base: {
+    color: 'text.primary'
+  }
+};
+exports.radio = radio;
+var checkbox = {
+  color: 'text.primary'
+};
+exports.checkbox = checkbox;
+var selectOption = {
+  backgroundColor: 'background.base',
+  color: 'magenta !important',
+  px: 'md',
+  py: 'sm',
+  alignItems: 'center',
+  outline: 'none',
+  cursor: 'pointer',
+  '&.is-selected': {
+    pl: 0
+  },
+  '&.is-focused': {
+    color: 'white',
+    bg: 'active'
+  }
+};
+var _default = {
+  input: _input.input,
+  checkbox: checkbox,
+  radio: radio,
+  select: _objectSpread(_objectSpread({}, select), {}, {
+    option: _objectSpread({}, selectOption)
+  })
+};
+exports["default"] = _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/iconBadge.d.ts

@@ -0,0 +1,53 @@
+declare const _default: {
+    cyan: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    pink: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    green: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    orange: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    blue: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    red: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    teal: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    yellow: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    indigo: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+    purple: {
+        backgroundColor: string;
+        fill: string;
+        color: string;
+    };
+};
+export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/iconBadge.js

@@ -0,0 +1,75 @@
+"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 iconBadgeBase = {
+  borderRadius: 'sm'
+};
+var iconBadge = {
+  cyan: {
+    backgroundColor: 'cyan',
+    fill: 'black',
+    color: 'black'
+  },
+  pink: {
+    backgroundColor: 'pink',
+    fill: 'black',
+    color: 'black'
+  },
+  green: {
+    backgroundColor: 'green',
+    fill: 'black',
+    color: 'black'
+  },
+  orange: {
+    backgroundColor: 'orange',
+    fill: 'black',
+    color: 'black'
+  },
+  blue: {
+    backgroundColor: 'blue',
+    fill: 'black',
+    color: 'black'
+  },
+  red: {
+    backgroundColor: 'red',
+    fill: 'black',
+    color: 'black'
+  },
+  teal: {
+    backgroundColor: 'teal',
+    fill: 'black',
+    color: 'black'
+  },
+  yellow: {
+    backgroundColor: 'yellow',
+    fill: 'black',
+    color: 'black'
+  },
+  indigo: {
+    backgroundColor: 'indigo',
+    fill: 'black',
+    color: 'black'
+  },
+  purple: {
+    backgroundColor: 'purple',
+    fill: 'black',
+    color: 'black'
+  }
+};
+var _default = _objectSpread({}, iconBadge);
+exports["default"] = _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/input.d.ts

@@ -0,0 +1,8 @@
+import { ThemeUICSSObject } from 'theme-ui';
+export declare const input: ThemeUICSSObject;
+export declare const fieldControlWrapper: {
+    '> textarea': {
+        borderColor: string;
+        backgroundColor: string;
+    };
+};

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/input.js

@@ -0,0 +1,35 @@
+"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.input = exports.fieldControlWrapper = 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 input = {
+  backgroundColor: 'background.base',
+  borderColor: 'border.input'
+};
+exports.input = input;
+var fieldControlWrapper = {
+  '> textarea': {
+    borderColor: 'border.input',
+    backgroundColor: 'background.base'
+  }
+};
+exports.fieldControlWrapper = fieldControlWrapper;
+input.fieldControlWrapper = _objectSpread({}, fieldControlWrapper);
+input.multivaluesWrapper = {
+  backgroundColor: 'background.base'
+};
+input.search = _objectSpread({}, input);

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/links.d.ts

@@ -0,0 +1,40 @@
+declare const _default: {
+    nextGen: {
+        color: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+    sideNav: {
+        color: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+    footerLinks: {
+        color: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+    footerHeader: {
+        fontWeight: string;
+        color: string;
+        '&.is-hovered': {
+            color: string;
+        };
+        '&.is-pressed': {
+            color: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/links.js

@@ -0,0 +1,47 @@
+"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: 'text.primary',
+  '&.is-hovered': {
+    color: '#72a9f1'
+  },
+  '&.is-pressed': {
+    color: '#72a9f1'
+  }
+};
+var sideNav = {
+  color: 'text.primary',
+  '&.is-hovered': {
+    color: '#72a9f1'
+  },
+  '&.is-pressed': {
+    color: '#72a9f1'
+  }
+};
+var footerLinks = _objectSpread({}, sideNav);
+var footerHeader = _objectSpread(_objectSpread({}, footerLinks), {}, {
+  fontWeight: '2'
+});
+var _default = {
+  nextGen: nextGen,
+  sideNav: sideNav,
+  footerLinks: footerLinks,
+  footerHeader: footerHeader
+};
+exports["default"] = _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/lsitview.d.ts

@@ -0,0 +1,24 @@
+export declare const listViewItem: {
+    styledListItem: {
+        '&.has-separator': {
+            borderBottom: string;
+            borderBottomColor: string;
+        };
+        bg: string;
+        '&.is-selected': {
+            bg: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+        };
+        '&.is-focused': {
+            boxShadow: string;
+            bg: string;
+        };
+    };
+};
+export declare const listView: {
+    container: {
+        borderColor: string;
+    };
+};

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/lsitview.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listViewItem = exports.listView = void 0;
+var listViewItem = {
+  styledListItem: {
+    '&.has-separator': {
+      borderBottom: '1px solid',
+      borderBottomColor: 'border.base'
+    },
+    bg: 'background.base',
+    '&.is-selected': {
+      bg: 'background.hover'
+    },
+    '&.is-hovered': {
+      bg: 'background.hover'
+    },
+    '&.is-focused': {
+      boxShadow: '0 0 0 3px inset #1a73e8',
+      bg: 'background.hover'
+    }
+  }
+};
+exports.listViewItem = listViewItem;
+var listView = {
+  container: {
+    borderColor: 'border.base'
+  }
+};
+exports.listView = listView;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/menu.d.ts

@@ -0,0 +1,26 @@
+export declare const menuItem: {
+    item: {
+        bg: string;
+        padding: string;
+        outline: string;
+        color: string;
+        cursor: string;
+        '&.is-focused, &.is-selected, &.is-pressed': {
+            bg: string;
+            color: string;
+            '> *': {
+                color: string;
+            };
+        };
+        '&.is-pressed': {
+            color: string;
+            bg: string;
+        };
+    };
+    separator: {
+        my: string;
+    };
+};
+export declare const menu: {
+    backgroundColor: string;
+};

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/menu.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.menuItem = exports.menu = void 0;
+var menuItem = {
+  item: {
+    bg: 'transparent',
+    padding: '10px 10px',
+    outline: 'none',
+    color: 'gray-400',
+    cursor: 'pointer',
+    '&.is-focused, &.is-selected, &.is-pressed': {
+      bg: 'gray-800',
+      color: 'text.primary',
+      '> *': {
+        color: 'text.primary'
+      }
+    },
+    '&.is-pressed': {
+      color: 'text.secondary',
+      bg: 'gray-800'
+    }
+  },
+  separator: {
+    my: 'sm'
+  }
+};
+exports.menuItem = menuItem;
+var menu = {
+  backgroundColor: '#23282e'
+};
+exports.menu = menu;