@atlaskit/icon 21.12.8 → 22.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/icon
 
+## 22.0.0
+
+### Major Changes
+
+- [#41812](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41812) [`48b3b440f51`](https://bitbucket.org/atlassian/atlassian-frontend/commits/48b3b440f51) - Removed all remaining legacy theming logic from the Icon and ProgressIndicator components.
+
 ## 21.12.8
 
 ### Patch Changes

package/dist/cjs/components/icon.js

@@ -9,7 +9,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
 var _utils = require("./utils");
 var _styles = require("./styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -102,8 +101,6 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     height: height,
     size: size
   });
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   return (0, _react2.jsx)("span", (0, _extends2.default)({
     "data-testid": testId,
     role: label ? 'img' : undefined,
@@ -111,7 +108,7 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     "aria-hidden": label ? undefined : true,
     style: {
       '--icon-primary-color': primaryColor,
-      '--icon-secondary-color': secondaryColor || (0, _utils.getBackground)(mode)
+      '--icon-secondary-color': secondaryColor || (0, _utils.getBackground)()
     }
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,

package/dist/cjs/components/svg.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _components = require("@atlaskit/theme/components");
 var _utils = require("./utils");
 var _styles = require("./styles");
 /** @jsx jsx */
@@ -31,13 +30,11 @@ var SVG = /*#__PURE__*/(0, _react.memo)(function SVG(_ref) {
     secondaryColor = _ref.secondaryColor,
     testId = _ref.testId,
     children = _ref.children;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
   return (0, _react2.jsx)("svg", {
     viewBox: "0 0 24 24",
     style: {
       color: primaryColor,
-      fill: secondaryColor || (0, _utils.getBackground)(mode)
+      fill: secondaryColor || (0, _utils.getBackground)()
     },
     css: [svgStyles, _styles.sizeStyleMap[size]],
     "data-testid": testId,

package/dist/cjs/components/utils.js

@@ -4,16 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getBackground = void 0;
-var themedBackground = {
-  light: "var(--ds-surface, #FFFFFF)",
-  dark: "var(--ds-surface, #1B2638)"
-};
-
-/**
- * Returns the background color depending on the passed through mode.
- * @param mode
- */
 var getBackground = exports.getBackground = function getBackground() {
-  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  return themedBackground[mode];
+  return "var(--ds-surface, #FFFFFF)";
 };

package/dist/cjs/metadata.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-/* eslint-disable global-require */
 /**
  * NOTE:
  *

package/dist/es2019/components/icon.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
 
@@ -95,9 +94,6 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     height,
     size
   });
-  const {
-    mode
-  } = useGlobalTheme();
   return jsx("span", _extends({
     "data-testid": testId,
     role: label ? 'img' : undefined,
@@ -105,7 +101,7 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     "aria-hidden": label ? undefined : true,
     style: {
       '--icon-primary-color': primaryColor,
-      '--icon-secondary-color': secondaryColor || getBackground(mode)
+      '--icon-secondary-color': secondaryColor || getBackground()
     }
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,

package/dist/es2019/components/svg.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, sizeStyleMap } from './styles';
 
@@ -24,14 +23,11 @@ const SVG = /*#__PURE__*/memo(function SVG({
   testId,
   children
 }) {
-  const {
-    mode
-  } = useGlobalTheme();
   return jsx("svg", {
     viewBox: "0 0 24 24",
     style: {
       color: primaryColor,
-      fill: secondaryColor || getBackground(mode)
+      fill: secondaryColor || getBackground()
     },
     css: [svgStyles, sizeStyleMap[size]],
     "data-testid": testId,

package/dist/es2019/components/utils.js

@@ -1,10 +1 @@
-const themedBackground = {
-  light: "var(--ds-surface, #FFFFFF)",
-  dark: "var(--ds-surface, #1B2638)"
-};
-
-/**
- * Returns the background color depending on the passed through mode.
- * @param mode
- */
-export const getBackground = (mode = 'light') => themedBackground[mode];
+export const getBackground = () => "var(--ds-surface, #FFFFFF)";

package/dist/es2019/metadata.js

@@ -1,4 +1,3 @@
-/* eslint-disable global-require */
 /**
  * NOTE:
  *

package/dist/esm/components/icon.js

@@ -5,7 +5,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
 
@@ -97,8 +96,6 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     height: height,
     size: size
   });
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   return jsx("span", _extends({
     "data-testid": testId,
     role: label ? 'img' : undefined,
@@ -106,7 +103,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     "aria-hidden": label ? undefined : true,
     style: {
       '--icon-primary-color': primaryColor,
-      '--icon-secondary-color': secondaryColor || getBackground(mode)
+      '--icon-secondary-color': secondaryColor || getBackground()
     }
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,

package/dist/esm/components/svg.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, sizeStyleMap } from './styles';
 
@@ -25,13 +24,11 @@ var SVG = /*#__PURE__*/memo(function SVG(_ref) {
     secondaryColor = _ref.secondaryColor,
     testId = _ref.testId,
     children = _ref.children;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
   return jsx("svg", {
     viewBox: "0 0 24 24",
     style: {
       color: primaryColor,
-      fill: secondaryColor || getBackground(mode)
+      fill: secondaryColor || getBackground()
     },
     css: [svgStyles, sizeStyleMap[size]],
     "data-testid": testId,

package/dist/esm/components/utils.js

@@ -1,13 +1,3 @@
-var themedBackground = {
-  light: "var(--ds-surface, #FFFFFF)",
-  dark: "var(--ds-surface, #1B2638)"
-};
-
-/**
- * Returns the background color depending on the passed through mode.
- * @param mode
- */
 export var getBackground = function getBackground() {
-  var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
-  return themedBackground[mode];
+  return "var(--ds-surface, #FFFFFF)";
 };

package/dist/esm/metadata.js

@@ -1,4 +1,3 @@
-/* eslint-disable global-require */
 /**
  * NOTE:
  *

package/dist/types/components/utils.d.ts

@@ -1,6 +1 @@
-import type { ThemeModes } from '@atlaskit/theme/types';
-/**
- * Returns the background color depending on the passed through mode.
- * @param mode
- */
-export declare const getBackground: (mode?: ThemeModes) => "var(--ds-surface)";
+export declare const getBackground: () => "var(--ds-surface)";

package/dist/types-ts4.5/components/utils.d.ts

@@ -1,6 +1 @@
-import type { ThemeModes } from '@atlaskit/theme/types';
-/**
- * Returns the background color depending on the passed through mode.
- * @param mode
- */
-export declare const getBackground: (mode?: ThemeModes) => "var(--ds-surface)";
+export declare const getBackground: () => "var(--ds-surface)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/icon",
-  "version": "21.12.8",
+  "version": "22.0.0",
   "description": "An icon is a visual representation of a command, device, directory, or common action.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,6 @@
     "build-glyphs": "ts-node --project ../../../tsconfig.node.json ./build/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
@@ -40,9 +39,11 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/icon-build-process": "^0.3.0",
+    "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/ssr": "*",
+    "@atlaskit/theme": "^12.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@babel/core": "^7.20.0",