@instructure/ui-popover 10.5.1-snapshot-4 → 10.5.1-snapshot-7

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.5.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-4) (2024-11-14)
+## [10.5.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-7) (2024-11-18)
 
-**Note:** Version bump only for package @instructure/ui-popover
+
+### Bug Fixes
+
+* **many:** adjust border colors to meet a11y contrast standards ([2f47e06](https://github.com/instructure/instructure-ui/commit/2f47e066f7107c67e37ce8b7aff483586cf7a6b7))
 
 
 

package/es/Popover/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _dec3, _class, _Popover;
+var _dec, _dec2, _dec3, _dec4, _class, _Popover;
 /*
  * The MIT License (MIT)
  *
@@ -35,6 +35,9 @@ import { createChainedFunction, shallowEqual, px } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
 import { testable } from '@instructure/ui-testable';
 import { FocusRegion } from '@instructure/ui-a11y-utils';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
 /**
 ---
@@ -42,7 +45,7 @@ category: components
 tags: overlay, portal, dialog
 ---
 **/
-let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsumer(), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Popover = class Popover extends Component {
+let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsumer(), _dec3 = withStyle(generateStyle, generateComponentTheme), _dec4 = testable(), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = (_Popover = class Popover extends Component {
   constructor(props) {
     super(props);
     this._handleMouseOver = void 0;
@@ -411,6 +414,7 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
         };
       }
       const placement = this.state.placement;
+      const styles = this.props.styles;
       if (this.props.withArrow) {
         viewProps = {
           ...viewProps,
@@ -418,7 +422,9 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
           background: color === 'primary' ? 'default' : 'inverse',
           placement: this.props.dir === textDirectionContextConsumer.DIRECTION.rtl ? mirrorHorizontalPlacement(placement, ' ') : placement
         };
-        return /*#__PURE__*/React.createElement(ContextView, viewProps, content);
+        return /*#__PURE__*/React.createElement(ContextView, Object.assign({}, viewProps, {
+          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
+        }), content);
       } else {
         viewProps = {
           ...viewProps,
@@ -428,7 +434,9 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
             borderColor: 'transparent'
           })
         };
-        return /*#__PURE__*/React.createElement(View, viewProps, content);
+        return /*#__PURE__*/React.createElement(View, Object.assign({}, viewProps, {
+          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
+        }), content);
       }
     } else {
       return null;
@@ -467,6 +475,6 @@ let Popover = (_dec = withDeterministicId(), _dec2 = textDirectionContextConsume
   shouldCloseOnDocumentClick: true,
   shouldFocusContentOnTriggerBlur: false,
   shouldCloseOnEscape: true
-}, _Popover)) || _class) || _class) || _class);
+}, _Popover)) || _class) || _class) || _class) || _class);
 export default Popover;
 export { Popover };

package/es/Popover/styles.js

@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    borderColor: componentTheme.borderColor
+  };
+};
+export default generateStyle;

package/es/Popover/theme.js

@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  var _colors$contrasts;
+  const colors = theme.colors;
+  const componentVariables = {
+    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045
+  };
+  return {
+    ...componentVariables
+  };
+};
+export default generateComponentTheme;

package/lib/Popover/index.js

@@ -28,8 +28,11 @@ var _px = require("@instructure/ui-utils/lib/px.js");
 var _console = require("@instructure/console");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _FocusRegion = require("@instructure/ui-a11y-utils/lib/FocusRegion.js");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _dec, _dec2, _dec3, _class, _Popover;
+var _dec, _dec2, _dec3, _dec4, _class, _Popover;
 /*
  * The MIT License (MIT)
  *
@@ -59,7 +62,7 @@ category: components
 tags: overlay, portal, dialog
 ---
 **/
-let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Popover = class Popover extends _react.Component {
+let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec3 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec4 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = (_Popover = class Popover extends _react.Component {
   constructor(props) {
     super(props);
     this._handleMouseOver = void 0;
@@ -428,6 +431,7 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
         };
       }
       const placement = this.state.placement;
+      const styles = this.props.styles;
       if (this.props.withArrow) {
         viewProps = {
           ...viewProps,
@@ -435,7 +439,9 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
           background: color === 'primary' ? 'default' : 'inverse',
           placement: this.props.dir === _textDirectionContextConsumer.textDirectionContextConsumer.DIRECTION.rtl ? (0, _mirrorHorizontalPlacement.mirrorHorizontalPlacement)(placement, ' ') : placement
         };
-        return /*#__PURE__*/_react.default.createElement(_ContextView.ContextView, viewProps, content);
+        return /*#__PURE__*/_react.default.createElement(_ContextView.ContextView, Object.assign({}, viewProps, {
+          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
+        }), content);
       } else {
         viewProps = {
           ...viewProps,
@@ -445,7 +451,9 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
             borderColor: 'transparent'
           })
         };
-        return /*#__PURE__*/_react.default.createElement(_View.View, viewProps, content);
+        return /*#__PURE__*/_react.default.createElement(_View.View, Object.assign({}, viewProps, {
+          borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
+        }), content);
       }
     } else {
       return null;
@@ -484,5 +492,5 @@ let Popover = exports.Popover = (_dec = (0, _withDeterministicId.withDeterminist
   shouldCloseOnDocumentClick: true,
   shouldFocusContentOnTriggerBlur: false,
   shouldCloseOnEscape: true
-}, _Popover)) || _class) || _class) || _class);
+}, _Popover)) || _class) || _class) || _class) || _class);
 var _default = exports.default = Popover;

package/lib/Popover/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  return {
+    borderColor: componentTheme.borderColor
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/Popover/theme.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  var _colors$contrasts;
+  const colors = theme.colors;
+  const componentVariables = {
+    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045
+  };
+  return {
+    ...componentVariables
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-popover",
-  "version": "10.5.1-snapshot-4",
+  "version": "10.5.1-snapshot-7",
   "description": "A component for hiding or showing content based on user interaction.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,29 +24,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/console": "10.5.1-snapshot-4",
-    "@instructure/emotion": "10.5.1-snapshot-4",
-    "@instructure/shared-types": "10.5.1-snapshot-4",
-    "@instructure/ui-a11y-utils": "10.5.1-snapshot-4",
-    "@instructure/ui-dialog": "10.5.1-snapshot-4",
-    "@instructure/ui-dom-utils": "10.5.1-snapshot-4",
-    "@instructure/ui-i18n": "10.5.1-snapshot-4",
-    "@instructure/ui-position": "10.5.1-snapshot-4",
-    "@instructure/ui-prop-types": "10.5.1-snapshot-4",
-    "@instructure/ui-react-utils": "10.5.1-snapshot-4",
-    "@instructure/ui-testable": "10.5.1-snapshot-4",
-    "@instructure/ui-utils": "10.5.1-snapshot-4",
-    "@instructure/ui-view": "10.5.1-snapshot-4",
-    "@instructure/uid": "10.5.1-snapshot-4",
+    "@instructure/console": "10.5.1-snapshot-7",
+    "@instructure/emotion": "10.5.1-snapshot-7",
+    "@instructure/shared-types": "10.5.1-snapshot-7",
+    "@instructure/ui-a11y-utils": "10.5.1-snapshot-7",
+    "@instructure/ui-dialog": "10.5.1-snapshot-7",
+    "@instructure/ui-dom-utils": "10.5.1-snapshot-7",
+    "@instructure/ui-i18n": "10.5.1-snapshot-7",
+    "@instructure/ui-position": "10.5.1-snapshot-7",
+    "@instructure/ui-prop-types": "10.5.1-snapshot-7",
+    "@instructure/ui-react-utils": "10.5.1-snapshot-7",
+    "@instructure/ui-testable": "10.5.1-snapshot-7",
+    "@instructure/ui-utils": "10.5.1-snapshot-7",
+    "@instructure/ui-view": "10.5.1-snapshot-7",
+    "@instructure/uid": "10.5.1-snapshot-7",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.5.1-snapshot-4",
-    "@instructure/ui-color-utils": "10.5.1-snapshot-4",
-    "@instructure/ui-test-locator": "10.5.1-snapshot-4",
-    "@instructure/ui-test-queries": "10.5.1-snapshot-4",
-    "@instructure/ui-test-utils": "10.5.1-snapshot-4",
+    "@instructure/ui-babel-preset": "10.5.1-snapshot-7",
+    "@instructure/ui-color-utils": "10.5.1-snapshot-7",
+    "@instructure/ui-test-locator": "10.5.1-snapshot-7",
+    "@instructure/ui-test-queries": "10.5.1-snapshot-7",
+    "@instructure/ui-test-utils": "10.5.1-snapshot-7",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/Popover/index.tsx

@@ -55,10 +55,14 @@ import type { ViewProps, ContextViewProps } from '@instructure/ui-view'
 import type { PositionProps } from '@instructure/ui-position'
 import type { DialogProps } from '@instructure/ui-dialog'
 
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
 import type { PopoverProps, PopoverState } from './props'
 import { allowedProps, propTypes } from './props'
 import type { Renderable } from '@instructure/shared-types'
-
 /**
 ---
 category: components
@@ -67,6 +71,7 @@ tags: overlay, portal, dialog
 **/
 @withDeterministicId()
 @textDirectionContextConsumer()
+@withStyle(generateStyle, generateComponentTheme)
 @testable()
 class Popover extends Component<PopoverProps, PopoverState> {
   static readonly componentId = 'Popover'
@@ -558,6 +563,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
       }
 
       const { placement } = this.state
+      const { styles } = this.props
 
       if (this.props.withArrow) {
         viewProps = {
@@ -570,7 +576,11 @@ class Popover extends Component<PopoverProps, PopoverState> {
               : placement
         } as Partial<ContextViewProps> & { ref: any }
 
-        return <ContextView {...viewProps}>{content}</ContextView>
+        return (
+          <ContextView {...viewProps} borderColor={styles?.borderColor}>
+            {content}
+          </ContextView>
+        )
       } else {
         viewProps = {
           ...viewProps,
@@ -579,7 +589,11 @@ class Popover extends Component<PopoverProps, PopoverState> {
           ...(color === 'primary-inverse' && { borderColor: 'transparent' })
         } as Partial<ViewProps> & { ref: any }
 
-        return <View {...viewProps}>{content}</View>
+        return (
+          <View {...viewProps} borderColor={styles?.borderColor}>
+            {content}
+          </View>
+        )
       }
     } else {
       return null

package/src/Popover/props.ts

@@ -28,7 +28,7 @@ import { element } from '@instructure/ui-prop-types'
 import { ThemeablePropTypes } from '@instructure/emotion'
 import { PositionPropTypes } from '@instructure/ui-position'
 
-import type { Shadow, Stacking } from '@instructure/emotion'
+import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion'
 
 import type {
   PlacementPropValues,
@@ -41,7 +41,8 @@ import type {
   PropValidators,
   LiveRegion,
   UIElement,
-  Renderable
+  Renderable,
+  PopoverTheme
 } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
@@ -278,7 +279,8 @@ type PopoverOwnProps = {
 
 type PopoverProps = PopoverOwnProps &
   TextDirectionContextConsumerProps &
-  WithDeterministicIdProps
+  WithDeterministicIdProps &
+  WithStyleProps<PopoverTheme, PopoverStyle>
 
 type PopoverState = {
   placement: PopoverOwnProps['placement']
@@ -291,6 +293,8 @@ type PropKeys = keyof PopoverOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
+type PopoverStyle = { borderColor: string }
+
 const propTypes: PropValidators<PropKeys> = {
   isShowingContent: PropTypes.bool,
   defaultIsShowingContent: PropTypes.bool,
@@ -388,5 +392,5 @@ const allowedProps: AllowedPropKeys = [
   'elementRef'
 ]
 
-export type { PopoverOwnProps, PopoverProps, PopoverState }
+export type { PopoverOwnProps, PopoverProps, PopoverState, PopoverStyle }
 export { propTypes, allowedProps }

package/src/Popover/styles.ts

@@ -0,0 +1,44 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { PopoverTheme } from '@instructure/shared-types'
+import type { PopoverStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme: PopoverTheme): PopoverStyle => {
+  return {
+    borderColor: componentTheme.borderColor
+  }
+}
+
+export default generateStyle

package/src/Popover/theme.ts

@@ -0,0 +1,43 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Theme } from '@instructure/ui-themes'
+import { PopoverTheme } from '@instructure/shared-types'
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = (theme: Theme): PopoverTheme => {
+  const { colors } = theme
+
+  const componentVariables: PopoverTheme = {
+    borderColor: colors?.contrasts?.grey3045
+  }
+  return {
+    ...componentVariables
+  }
+}
+export default generateComponentTheme