@instructure/ui-toggle-details 10.5.1-snapshot-5 → 10.6.0

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-5](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.5.1-snapshot-5) (2024-11-14)
+# [10.6.0](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.6.0) (2024-11-18)
 
-**Note:** Version bump only for package @instructure/ui-toggle-details
+
+### Bug Fixes
+
+* **many:** adjust border colors to meet a11y contrast standards ([2f47e06](https://github.com/instructure/instructure-ui/commit/2f47e066f7107c67e37ce8b7aff483586cf7a6b7))
 
 
 

package/es/ToggleGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _ToggleGroup;
+var _dec, _dec2, _class, _ToggleGroup;
 /*
  * The MIT License (MIT)
  *
@@ -34,13 +34,16 @@ import { View } from '@instructure/ui-view';
 import { IconArrowOpenEndSolid, IconArrowOpenDownSolid } from '@instructure/ui-icons';
 import { testable } from '@instructure/ui-testable';
 import { allowedProps, propTypes } from './props';
+import { withStyle } from '@instructure/emotion';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
 
 /**
 ---
 category: components
 ---
 **/
-let ToggleGroup = (_dec = testable(), _dec(_class = (_ToggleGroup = class ToggleGroup extends Component {
+let ToggleGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_ToggleGroup = class ToggleGroup extends Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -67,14 +70,18 @@ let ToggleGroup = (_dec = testable(), _dec(_class = (_ToggleGroup = class Toggle
   componentDidMount() {
     this._shouldTransition = true;
   }
+  componentDidUpdate() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
+  }
   renderIcon(expanded) {
     const Icon = expanded ? this.props.iconExpanded : this.props.icon;
     return Icon ? callRenderProp(Icon) : null;
   }
   renderToggle(toggleProps, expanded) {
-    const _this$props = this.props,
-      toggleLabel = _this$props.toggleLabel,
-      size = _this$props.size;
+    const _this$props2 = this.props,
+      toggleLabel = _this$props2.toggleLabel,
+      size = _this$props2.size;
     let label;
     if (typeof toggleLabel === 'function') {
       label = toggleLabel(expanded);
@@ -93,9 +100,11 @@ let ToggleGroup = (_dec = testable(), _dec(_class = (_ToggleGroup = class Toggle
     }), this.renderIcon(expanded));
   }
   renderDetails(detailsProps) {
+    const styles = this.props.styles;
     return /*#__PURE__*/React.createElement(View, Object.assign({}, detailsProps, {
       display: "block",
-      borderWidth: "small none none none"
+      borderWidth: "small none none none",
+      borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
     }), this.props.transition && this._shouldTransition ? /*#__PURE__*/React.createElement(Transition, {
       transitionOnMount: true,
       in: true,
@@ -104,6 +113,7 @@ let ToggleGroup = (_dec = testable(), _dec(_class = (_ToggleGroup = class Toggle
   }
   render() {
     const Element = getElementType(ToggleGroup, this.props);
+    const styles = this.props.styles;
     return /*#__PURE__*/React.createElement(Expandable, pickProps(this.props, Expandable.allowedProps), ({
       expanded,
       getToggleProps,
@@ -115,7 +125,8 @@ let ToggleGroup = (_dec = testable(), _dec(_class = (_ToggleGroup = class Toggle
         elementRef: this.handleRef,
         display: "block",
         borderRadius: "medium",
-        background: "primary"
+        background: "primary",
+        borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
       }), /*#__PURE__*/React.createElement(Flex, {
         padding: this.props.size === 'small' ? 'x-small' : 'small small small x-small'
       }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderToggle(getToggleProps(), expanded)), /*#__PURE__*/React.createElement(Flex.Item, {
@@ -133,6 +144,6 @@ let ToggleGroup = (_dec = testable(), _dec(_class = (_ToggleGroup = class Toggle
   transition: true,
   as: 'span',
   border: true
-}, _ToggleGroup)) || _class);
+}, _ToggleGroup)) || _class) || _class);
 export default ToggleGroup;
 export { ToggleGroup };

package/es/ToggleGroup/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, _props) => {
+  return {
+    borderColor: componentTheme.borderColor
+  };
+};
+export default generateStyle;

package/es/ToggleGroup/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/ToggleGroup/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -20,7 +21,10 @@ var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEnd
 var _IconArrowOpenDownSolid = require("@instructure/ui-icons/lib/IconArrowOpenDownSolid.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _props = require("./props");
-var _dec, _class, _ToggleGroup;
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
+var _dec, _dec2, _class, _ToggleGroup;
 /*
  * The MIT License (MIT)
  *
@@ -49,7 +53,7 @@ var _dec, _class, _ToggleGroup;
 category: components
 ---
 **/
-let ToggleGroup = exports.ToggleGroup = (_dec = (0, _testable.testable)(), _dec(_class = (_ToggleGroup = class ToggleGroup extends _react.Component {
+let ToggleGroup = exports.ToggleGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_ToggleGroup = class ToggleGroup extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -76,14 +80,18 @@ let ToggleGroup = exports.ToggleGroup = (_dec = (0, _testable.testable)(), _dec(
   componentDidMount() {
     this._shouldTransition = true;
   }
+  componentDidUpdate() {
+    var _this$props$makeStyle, _this$props;
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.state);
+  }
   renderIcon(expanded) {
     const Icon = expanded ? this.props.iconExpanded : this.props.icon;
     return Icon ? (0, _callRenderProp.callRenderProp)(Icon) : null;
   }
   renderToggle(toggleProps, expanded) {
-    const _this$props = this.props,
-      toggleLabel = _this$props.toggleLabel,
-      size = _this$props.size;
+    const _this$props2 = this.props,
+      toggleLabel = _this$props2.toggleLabel,
+      size = _this$props2.size;
     let label;
     if (typeof toggleLabel === 'function') {
       label = toggleLabel(expanded);
@@ -102,9 +110,11 @@ let ToggleGroup = exports.ToggleGroup = (_dec = (0, _testable.testable)(), _dec(
     }), this.renderIcon(expanded));
   }
   renderDetails(detailsProps) {
+    const styles = this.props.styles;
     return /*#__PURE__*/_react.default.createElement(_View.View, Object.assign({}, detailsProps, {
       display: "block",
-      borderWidth: "small none none none"
+      borderWidth: "small none none none",
+      borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
     }), this.props.transition && this._shouldTransition ? /*#__PURE__*/_react.default.createElement(_Transition.Transition, {
       transitionOnMount: true,
       in: true,
@@ -113,6 +123,7 @@ let ToggleGroup = exports.ToggleGroup = (_dec = (0, _testable.testable)(), _dec(
   }
   render() {
     const Element = (0, _getElementType.getElementType)(ToggleGroup, this.props);
+    const styles = this.props.styles;
     return /*#__PURE__*/_react.default.createElement(_Expandable.Expandable, (0, _pickProps.pickProps)(this.props, _Expandable.Expandable.allowedProps), ({
       expanded,
       getToggleProps,
@@ -124,7 +135,8 @@ let ToggleGroup = exports.ToggleGroup = (_dec = (0, _testable.testable)(), _dec(
         elementRef: this.handleRef,
         display: "block",
         borderRadius: "medium",
-        background: "primary"
+        background: "primary",
+        borderColor: styles === null || styles === void 0 ? void 0 : styles.borderColor
       }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
         padding: this.props.size === 'small' ? 'x-small' : 'small small small x-small'
       }, /*#__PURE__*/_react.default.createElement(_Flex.Flex.Item, null, this.renderToggle(getToggleProps(), expanded)), /*#__PURE__*/_react.default.createElement(_Flex.Flex.Item, {
@@ -142,5 +154,5 @@ let ToggleGroup = exports.ToggleGroup = (_dec = (0, _testable.testable)(), _dec(
   transition: true,
   as: 'span',
   border: true
-}, _ToggleGroup)) || _class);
+}, _ToggleGroup)) || _class) || _class);
 var _default = exports.default = ToggleGroup;

package/lib/ToggleGroup/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, _props) => {
+  return {
+    borderColor: componentTheme.borderColor
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/ToggleGroup/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-toggle-details",
-  "version": "10.5.1-snapshot-5",
+  "version": "10.6.0",
   "description": "A styled toggleable, accordion-like component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.5.1-snapshot-5",
-    "@instructure/ui-test-locator": "10.5.1-snapshot-5",
-    "@instructure/ui-test-queries": "10.5.1-snapshot-5",
-    "@instructure/ui-test-utils": "10.5.1-snapshot-5",
-    "@instructure/ui-themes": "10.5.1-snapshot-5"
+    "@instructure/ui-babel-preset": "10.6.0",
+    "@instructure/ui-test-locator": "10.6.0",
+    "@instructure/ui-test-queries": "10.6.0",
+    "@instructure/ui-test-utils": "10.6.0",
+    "@instructure/ui-themes": "10.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.5.1-snapshot-5",
-    "@instructure/shared-types": "10.5.1-snapshot-5",
-    "@instructure/ui-buttons": "10.5.1-snapshot-5",
-    "@instructure/ui-dom-utils": "10.5.1-snapshot-5",
-    "@instructure/ui-expandable": "10.5.1-snapshot-5",
-    "@instructure/ui-flex": "10.5.1-snapshot-5",
-    "@instructure/ui-icons": "10.5.1-snapshot-5",
-    "@instructure/ui-motion": "10.5.1-snapshot-5",
-    "@instructure/ui-prop-types": "10.5.1-snapshot-5",
-    "@instructure/ui-react-utils": "10.5.1-snapshot-5",
-    "@instructure/ui-testable": "10.5.1-snapshot-5",
-    "@instructure/ui-utils": "10.5.1-snapshot-5",
-    "@instructure/ui-view": "10.5.1-snapshot-5",
-    "@instructure/uid": "10.5.1-snapshot-5",
+    "@instructure/emotion": "10.6.0",
+    "@instructure/shared-types": "10.6.0",
+    "@instructure/ui-buttons": "10.6.0",
+    "@instructure/ui-dom-utils": "10.6.0",
+    "@instructure/ui-expandable": "10.6.0",
+    "@instructure/ui-flex": "10.6.0",
+    "@instructure/ui-icons": "10.6.0",
+    "@instructure/ui-motion": "10.6.0",
+    "@instructure/ui-prop-types": "10.6.0",
+    "@instructure/ui-react-utils": "10.6.0",
+    "@instructure/ui-testable": "10.6.0",
+    "@instructure/ui-utils": "10.6.0",
+    "@instructure/ui-view": "10.6.0",
+    "@instructure/uid": "10.6.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/ToggleGroup/index.tsx

@@ -45,11 +45,17 @@ import { testable } from '@instructure/ui-testable'
 import type { ToggleGroupProps } from './props'
 import { allowedProps, propTypes } from './props'
 
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
 /**
 ---
 category: components
 ---
 **/
+@withStyle(generateStyle, generateComponentTheme)
 @testable()
 class ToggleGroup extends Component<ToggleGroupProps> {
   static readonly componentId = 'ToggleGroup'
@@ -97,6 +103,10 @@ class ToggleGroup extends Component<ToggleGroupProps> {
     this._shouldTransition = true
   }
 
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.state)
+  }
+
   renderIcon(expanded: boolean) {
     const Icon = expanded ? this.props.iconExpanded : this.props.icon
     return Icon ? callRenderProp(Icon) : null
@@ -130,11 +140,13 @@ class ToggleGroup extends Component<ToggleGroupProps> {
   }
 
   renderDetails(detailsProps: { id: string }) {
+    const { styles } = this.props
     return (
       <View
         {...detailsProps}
         display="block"
         borderWidth="small none none none"
+        borderColor={styles?.borderColor}
       >
         {this.props.transition && this._shouldTransition ? (
           <Transition transitionOnMount in type="fade">
@@ -149,7 +161,7 @@ class ToggleGroup extends Component<ToggleGroupProps> {
 
   render() {
     const Element = getElementType(ToggleGroup, this.props)
-
+    const { styles } = this.props
     return (
       <Expandable {...pickProps(this.props, Expandable.allowedProps)}>
         {({ expanded, getToggleProps, getDetailsProps }) => {
@@ -162,6 +174,7 @@ class ToggleGroup extends Component<ToggleGroupProps> {
               display="block"
               borderRadius="medium"
               background="primary"
+              borderColor={styles?.borderColor}
             >
               <Flex
                 padding={

package/src/ToggleGroup/props.ts

@@ -31,9 +31,12 @@ import {
   AsElementType,
   OtherHTMLAttributes,
   PropValidators,
-  Renderable
+  Renderable,
+  ToggleGroupTheme
 } from '@instructure/shared-types'
 
+import type { WithStyleProps } from '@instructure/emotion'
+
 type ToggleGroupOwnProps = {
   /**
    * the content to show and hide
@@ -91,8 +94,11 @@ type PropKeys = keyof ToggleGroupOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
+type ToggleGroupStyle = { borderColor: string }
+
 type ToggleGroupProps = ToggleGroupOwnProps &
-  OtherHTMLAttributes<ToggleGroupOwnProps>
+  OtherHTMLAttributes<ToggleGroupOwnProps> &
+  WithStyleProps<ToggleGroupTheme, ToggleGroupStyle>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node.isRequired,
@@ -126,5 +132,5 @@ const allowedProps: AllowedPropKeys = [
   'border'
 ]
 
-export type { ToggleGroupProps }
+export type { ToggleGroupProps, ToggleGroupStyle }
 export { propTypes, allowedProps }

package/src/ToggleGroup/styles.ts

@@ -0,0 +1,47 @@
+/*
+ * 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 { ToggleGroupTheme } from '@instructure/shared-types'
+import type { ToggleGroupProps, ToggleGroupStyle } 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: ToggleGroupTheme,
+  _props: ToggleGroupProps
+): ToggleGroupStyle => {
+  return {
+    borderColor: componentTheme.borderColor
+  }
+}
+
+export default generateStyle

package/src/ToggleGroup/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 { ToggleGroupTheme } 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): ToggleGroupTheme => {
+  const { colors } = theme
+
+  const componentVariables: ToggleGroupTheme = {
+    borderColor: colors?.contrasts?.grey3045
+  }
+  return {
+    ...componentVariables
+  }
+}
+export default generateComponentTheme