@instructure/ui-table 10.2.3-snapshot-14 → 10.2.3-snapshot-16

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.2.3-snapshot-14](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-14) (2024-10-02)
+## [10.2.3-snapshot-16](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-16) (2024-10-03)
 
-**Note:** Version bump only for package @instructure/ui-table
+
+### Bug Fixes
+
+* **shared-types,ui-table:** fix color contrast for table sorting icons ([b5a60bf](https://github.com/instructure/instructure-ui/commit/b5a60bf4b682e100912d686524a7c4c04f828ea9))
 
 
 

package/es/Table/Body/index.js

@@ -61,7 +61,7 @@ let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       css: styles === null || styles === void 0 ? void 0 : styles.body,
       role: isStacked ? 'rowgroup' : void 0
     }), Children.map(children, child => {
-      if ( /*#__PURE__*/isValidElement(child)) {
+      if (/*#__PURE__*/isValidElement(child)) {
         return safeCloneElement(child, {
           key: child.props.name,
           // Sent down for compatibility with custom components

package/es/Table/ColHeader/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _ColHeader, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
+var _dec, _class, _ColHeader;
 /*
  * The MIT License (MIT)
  *
@@ -61,18 +61,21 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   renderSortArrow() {
     const _this$props4 = this.props,
       sortDirection = _this$props4.sortDirection,
-      onRequestSort = _this$props4.onRequestSort;
+      onRequestSort = _this$props4.onRequestSort,
+      styles = _this$props4.styles;
     if (sortDirection === 'ascending') {
-      return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = jsx(IconMiniArrowUpLine, null));
+      return jsx(IconMiniArrowUpLine, {
+        css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
+      });
     }
     if (sortDirection === 'descending') {
-      return _IconMiniArrowDownLin || (_IconMiniArrowDownLin = jsx(IconMiniArrowDownLine, null));
+      return jsx(IconMiniArrowDownLine, {
+        css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
+      });
     }
     if (onRequestSort) {
       return jsx(IconMiniArrowDoubleLine, {
-        css: {
-          opacity: '30%'
-        }
+        css: styles === null || styles === void 0 ? void 0 : styles.unSortedIconColor
       });
     }
     return void 0;

package/es/Table/ColHeader/styles.js

@@ -86,6 +86,14 @@ const generateStyle = (componentTheme, props) => {
       label: 'colHeader__buttonContent',
       display: 'flex',
       alignItems: 'center'
+    },
+    unSortedIconColor: {
+      label: 'colHeader__unSortedIconColor',
+      color: componentTheme.unSortedIconColor
+    },
+    sortedIconColor: {
+      label: 'colHeader__sortedIconColor',
+      color: componentTheme.sortedIconColor
     }
   };
 };

package/es/Table/ColHeader/theme.js

@@ -28,7 +28,7 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4;
+  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6;
   const typography = theme.typography,
     colors = theme.colors,
     borders = theme.borders,
@@ -43,7 +43,9 @@ const generateComponentTheme = theme => {
     padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
     focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
     focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
+    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    unSortedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey4570,
+    sortedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570
   };
   return {
     ...componentVariables

package/es/Table/Row/index.js

@@ -65,7 +65,7 @@ let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       css: styles === null || styles === void 0 ? void 0 : styles.row,
       role: isStacked ? 'row' : void 0
     }), Children.toArray(children).filter(Boolean).map((child, index) => {
-      if ( /*#__PURE__*/isValidElement(child)) {
+      if (/*#__PURE__*/isValidElement(child)) {
         return safeCloneElement(child, {
           key: child.props.name,
           // Sent down for compatibility with custom components

package/es/Table/__new-tests__/Table.test.js

@@ -39,7 +39,7 @@ describe('<Table />', async () => {
   afterEach(() => {
     consoleErrorMock.mockRestore();
   });
-  const renderTable = props => render( /*#__PURE__*/React.createElement(Table, Object.assign({
+  const renderTable = props => render(/*#__PURE__*/React.createElement(Table, Object.assign({
     caption: "Test table"
   }, props), _Table$Head || (_Table$Head = /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
     id: "foo"
@@ -128,7 +128,7 @@ describe('<Table />', async () => {
     expect(stackedTable).not.toHaveTextContent('Foo');
   });
   it('does not crash for invalid children', async () => {
-    render( /*#__PURE__*/React.createElement(Table, {
+    render(/*#__PURE__*/React.createElement(Table, {
       caption: "Test table",
       layout: "stacked"
     }, "test1", _span || (_span = /*#__PURE__*/React.createElement("span", null, "test")), /*#__PURE__*/React.createElement(Table.Head, null, _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null, "test")), "test2", _Table$Row || (_Table$Row = /*#__PURE__*/React.createElement(Table.Row, null, "test3", /*#__PURE__*/React.createElement("span", null, "test"), /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"))), "test4", _span3 || (_span3 = /*#__PURE__*/React.createElement("span", null, "test"))), "test5", /*#__PURE__*/React.createElement(Table.Body, null, "test", _span4 || (_span4 = /*#__PURE__*/React.createElement("span", null, "test")), _Table$Row2 || (_Table$Row2 = /*#__PURE__*/React.createElement(Table.Row, null, "test", /*#__PURE__*/React.createElement("span", null, "test"), /*#__PURE__*/React.createElement(Table.Cell, null, "Foo"), "test", /*#__PURE__*/React.createElement("span", null, "test"))))));
@@ -137,7 +137,7 @@ describe('<Table />', async () => {
     expect(table).toHaveTextContent('Foo');
   });
   describe('when table is sortable', async () => {
-    const renderSortableTable = (props, handlers = {}, layout = 'auto') => render( /*#__PURE__*/React.createElement(Table, {
+    const renderSortableTable = (props, handlers = {}, layout = 'auto') => render(/*#__PURE__*/React.createElement(Table, {
       caption: "Sortable table",
       layout: layout
     }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, Object.assign({
@@ -240,7 +240,7 @@ describe('<Table />', async () => {
         }
       }
       CustomTableRow.displayName = "CustomTableRow";
-      const table = render( /*#__PURE__*/React.createElement(Table, {
+      const table = render(/*#__PURE__*/React.createElement(Table, {
         caption: "Test custom table"
       }, _Table$Head2 || (_Table$Head2 = /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: "foo"
@@ -269,7 +269,7 @@ describe('<Table />', async () => {
         }
       }
       CustomTableRow.displayName = "CustomTableRow";
-      const table = render( /*#__PURE__*/React.createElement(Table, {
+      const table = render(/*#__PURE__*/React.createElement(Table, {
         caption: "Test custom table"
       }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(CustomTableRow, null, /*#__PURE__*/React.createElement(CustomTableCell, {
         id: "foo"

package/es/Table/index.js

@@ -104,7 +104,7 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       role: isStacked ? 'table' : void 0,
       "aria-label": isStacked ? caption : void 0
     }), !isStacked && jsx("caption", null, jsx(ScreenReaderContent, null, caption)), Children.map(children, child => {
-      if ( /*#__PURE__*/isValidElement(child)) {
+      if (/*#__PURE__*/isValidElement(child)) {
         return safeCloneElement(child, {
           key: child.props.name
         });

package/lib/Table/Body/index.js

@@ -67,7 +67,7 @@ let Body = exports.Body = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       css: styles === null || styles === void 0 ? void 0 : styles.body,
       role: isStacked ? 'rowgroup' : void 0
     }), _react.Children.map(children, child => {
-      if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+      if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           key: child.props.name,
           // Sent down for compatibility with custom components

package/lib/Table/ColHeader/index.js

@@ -9,14 +9,14 @@ exports.default = exports.ColHeader = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-var _IconMiniArrowUpLine2 = require("@instructure/ui-icons/lib/IconMiniArrowUpLine.js");
+var _IconMiniArrowUpLine = require("@instructure/ui-icons/lib/IconMiniArrowUpLine.js");
 var _IconMiniArrowDownLine = require("@instructure/ui-icons/lib/IconMiniArrowDownLine.js");
 var _IconMiniArrowDoubleLine = require("@instructure/ui-icons/lib/IconMiniArrowDoubleLine.js");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _dec, _class, _ColHeader, _IconMiniArrowUpLine, _IconMiniArrowDownLin;
+var _dec, _class, _ColHeader;
 /*
  * The MIT License (MIT)
  *
@@ -70,18 +70,21 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
   renderSortArrow() {
     const _this$props4 = this.props,
       sortDirection = _this$props4.sortDirection,
-      onRequestSort = _this$props4.onRequestSort;
+      onRequestSort = _this$props4.onRequestSort,
+      styles = _this$props4.styles;
     if (sortDirection === 'ascending') {
-      return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = (0, _emotion.jsx)(_IconMiniArrowUpLine2.IconMiniArrowUpLine, null));
+      return (0, _emotion.jsx)(_IconMiniArrowUpLine.IconMiniArrowUpLine, {
+        css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
+      });
     }
     if (sortDirection === 'descending') {
-      return _IconMiniArrowDownLin || (_IconMiniArrowDownLin = (0, _emotion.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, null));
+      return (0, _emotion.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, {
+        css: styles === null || styles === void 0 ? void 0 : styles.sortedIconColor
+      });
     }
     if (onRequestSort) {
       return (0, _emotion.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
-        css: {
-          opacity: '30%'
-        }
+        css: styles === null || styles === void 0 ? void 0 : styles.unSortedIconColor
       });
     }
     return void 0;

package/lib/Table/ColHeader/styles.js

@@ -92,6 +92,14 @@ const generateStyle = (componentTheme, props) => {
       label: 'colHeader__buttonContent',
       display: 'flex',
       alignItems: 'center'
+    },
+    unSortedIconColor: {
+      label: 'colHeader__unSortedIconColor',
+      color: componentTheme.unSortedIconColor
+    },
+    sortedIconColor: {
+      label: 'colHeader__sortedIconColor',
+      color: componentTheme.sortedIconColor
     }
   };
 };

package/lib/Table/ColHeader/theme.js

@@ -34,7 +34,7 @@ exports.default = void 0;
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4;
+  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6;
   const typography = theme.typography,
     colors = theme.colors,
     borders = theme.borders,
@@ -49,7 +49,9 @@ const generateComponentTheme = theme => {
     padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
     focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
     focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
-    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
+    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    unSortedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey4570,
+    sortedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570
   };
   return {
     ...componentVariables

package/lib/Table/Row/index.js

@@ -71,7 +71,7 @@ let Row = exports.Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
       css: styles === null || styles === void 0 ? void 0 : styles.row,
       role: isStacked ? 'row' : void 0
     }), _react.Children.toArray(children).filter(Boolean).map((child, index) => {
-      if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+      if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           key: child.props.name,
           // Sent down for compatibility with custom components

package/lib/Table/__new-tests__/Table.test.js

@@ -41,7 +41,7 @@ describe('<Table />', async () => {
   afterEach(() => {
     consoleErrorMock.mockRestore();
   });
-  const renderTable = props => (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, Object.assign({
+  const renderTable = props => (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, Object.assign({
     caption: "Test table"
   }, props), _Table$Head || (_Table$Head = /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
     id: "foo"
@@ -130,7 +130,7 @@ describe('<Table />', async () => {
     expect(stackedTable).not.toHaveTextContent('Foo');
   });
   it('does not crash for invalid children', async () => {
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Test table",
       layout: "stacked"
     }, "test1", _span || (_span = /*#__PURE__*/_react.default.createElement("span", null, "test")), /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, _span2 || (_span2 = /*#__PURE__*/_react.default.createElement("span", null, "test")), "test2", _Table$Row || (_Table$Row = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test3", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"))), "test4", _span3 || (_span3 = /*#__PURE__*/_react.default.createElement("span", null, "test"))), "test5", /*#__PURE__*/_react.default.createElement(_index.Table.Body, null, "test", _span4 || (_span4 = /*#__PURE__*/_react.default.createElement("span", null, "test")), _Table$Row2 || (_Table$Row2 = /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, "test", /*#__PURE__*/_react.default.createElement("span", null, "test"), /*#__PURE__*/_react.default.createElement(_index.Table.Cell, null, "Foo"), "test", /*#__PURE__*/_react.default.createElement("span", null, "test"))))));
@@ -139,7 +139,7 @@ describe('<Table />', async () => {
     expect(table).toHaveTextContent('Foo');
   });
   describe('when table is sortable', async () => {
-    const renderSortableTable = (props, handlers = {}, layout = 'auto') => (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
+    const renderSortableTable = (props, handlers = {}, layout = 'auto') => (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
       caption: "Sortable table",
       layout: layout
     }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, Object.assign({
@@ -242,7 +242,7 @@ describe('<Table />', async () => {
         }
       }
       CustomTableRow.displayName = "CustomTableRow";
-      const table = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
+      const table = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
         caption: "Test custom table"
       }, _Table$Head2 || (_Table$Head2 = /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(_index.Table.Row, null, /*#__PURE__*/_react.default.createElement(_index.Table.ColHeader, {
         id: "foo"
@@ -271,7 +271,7 @@ describe('<Table />', async () => {
         }
       }
       CustomTableRow.displayName = "CustomTableRow";
-      const table = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Table, {
+      const table = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Table, {
         caption: "Test custom table"
       }, /*#__PURE__*/_react.default.createElement(_index.Table.Head, null, /*#__PURE__*/_react.default.createElement(CustomTableRow, null, /*#__PURE__*/_react.default.createElement(CustomTableCell, {
         id: "foo"

package/lib/Table/index.js

@@ -110,7 +110,7 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
       role: isStacked ? 'table' : void 0,
       "aria-label": isStacked ? caption : void 0
     }), !isStacked && (0, _emotion.jsx)("caption", null, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, caption)), _react.Children.map(children, child => {
-      if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+      if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
         return (0, _safeCloneElement.safeCloneElement)(child, {
           key: child.props.name
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "10.2.3-snapshot-14",
+  "version": "10.2.3-snapshot-16",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.2.3-snapshot-14",
-    "@instructure/ui-babel-preset": "10.2.3-snapshot-14",
-    "@instructure/ui-color-utils": "10.2.3-snapshot-14",
-    "@instructure/ui-test-utils": "10.2.3-snapshot-14",
-    "@instructure/ui-themes": "10.2.3-snapshot-14",
+    "@instructure/ui-axe-check": "10.2.3-snapshot-16",
+    "@instructure/ui-babel-preset": "10.2.3-snapshot-16",
+    "@instructure/ui-color-utils": "10.2.3-snapshot-16",
+    "@instructure/ui-test-utils": "10.2.3-snapshot-16",
+    "@instructure/ui-themes": "10.2.3-snapshot-16",
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "vitest": "^2.0.2"
+    "vitest": "^2.1.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.2.3-snapshot-14",
-    "@instructure/emotion": "10.2.3-snapshot-14",
-    "@instructure/shared-types": "10.2.3-snapshot-14",
-    "@instructure/ui-a11y-content": "10.2.3-snapshot-14",
-    "@instructure/ui-icons": "10.2.3-snapshot-14",
-    "@instructure/ui-prop-types": "10.2.3-snapshot-14",
-    "@instructure/ui-react-utils": "10.2.3-snapshot-14",
-    "@instructure/ui-simple-select": "10.2.3-snapshot-14",
-    "@instructure/ui-testable": "10.2.3-snapshot-14",
-    "@instructure/ui-utils": "10.2.3-snapshot-14",
-    "@instructure/ui-view": "10.2.3-snapshot-14",
+    "@babel/runtime": "^7.25.6",
+    "@instructure/console": "10.2.3-snapshot-16",
+    "@instructure/emotion": "10.2.3-snapshot-16",
+    "@instructure/shared-types": "10.2.3-snapshot-16",
+    "@instructure/ui-a11y-content": "10.2.3-snapshot-16",
+    "@instructure/ui-icons": "10.2.3-snapshot-16",
+    "@instructure/ui-prop-types": "10.2.3-snapshot-16",
+    "@instructure/ui-react-utils": "10.2.3-snapshot-16",
+    "@instructure/ui-simple-select": "10.2.3-snapshot-16",
+    "@instructure/ui-testable": "10.2.3-snapshot-16",
+    "@instructure/ui-utils": "10.2.3-snapshot-16",
+    "@instructure/ui-view": "10.2.3-snapshot-16",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Table/ColHeader/index.tsx

@@ -74,16 +74,16 @@ class ColHeader extends Component<TableColHeaderProps> {
   }
 
   renderSortArrow() {
-    const { sortDirection, onRequestSort } = this.props
+    const { sortDirection, onRequestSort, styles } = this.props
 
     if (sortDirection === 'ascending') {
-      return <IconMiniArrowUpLine />
+      return <IconMiniArrowUpLine css={styles?.sortedIconColor} />
     }
     if (sortDirection === 'descending') {
-      return <IconMiniArrowDownLine />
+      return <IconMiniArrowDownLine css={styles?.sortedIconColor} />
     }
     if (onRequestSort) {
-      return <IconMiniArrowDoubleLine css={{ opacity: '30%' }} />
+      return <IconMiniArrowDoubleLine css={styles?.unSortedIconColor} />
     }
     return undefined
   }

package/src/Table/ColHeader/props.ts

@@ -85,7 +85,11 @@ type TableColHeaderProps = TableColHeaderOwnProps &
   >
 
 type TableColHeaderStyle = ComponentStyle<
-  'colHeader' | 'button' | 'buttonContent'
+  | 'colHeader'
+  | 'button'
+  | 'buttonContent'
+  | 'unSortedIconColor'
+  | 'sortedIconColor'
 >
 
 const propTypes: PropValidators<PropKeys> = {

package/src/Table/ColHeader/styles.ts

@@ -86,6 +86,14 @@ const generateStyle = (
       label: 'colHeader__buttonContent',
       display: 'flex',
       alignItems: 'center'
+    },
+    unSortedIconColor: {
+      label: 'colHeader__unSortedIconColor',
+      color: componentTheme.unSortedIconColor
+    },
+    sortedIconColor: {
+      label: 'colHeader__sortedIconColor',
+      color: componentTheme.sortedIconColor
     }
   }
 }

package/src/Table/ColHeader/theme.ts

@@ -47,7 +47,10 @@ const generateComponentTheme = (theme: Theme): TableColHeaderTheme => {
 
     focusOutlineColor: colors?.contrasts?.blue4570,
     focusOutlineWidth: borders?.widthMedium,
-    focusOutlineStyle: borders?.style
+    focusOutlineStyle: borders?.style,
+
+    unSortedIconColor: colors?.contrasts?.grey4570,
+    sortedIconColor: colors?.contrasts?.blue4570
   }
 
   return {