@atlaskit/icon 21.12.8 → 22.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/icon
 
+## 22.0.1
+
+### Patch Changes
+
+- [#72130](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72130) [`b037e5451037`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b037e5451037) - Update new button text color fallback for default theme (non-token) to match that of old button current text color
+
+## 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/afm-cc/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "extends": "../../../../tsconfig.entry-points.confluence.json",
+    "compilerOptions": {
+        "declaration": true,
+        "target": "es5",
+        "composite": true,
+        "outDir": "../dist",
+        "rootDir": "../",
+        "baseUrl": "../"
+    },
+    "include": [
+        "../src/**/*.ts",
+        "../src/**/*.tsx"
+    ],
+    "exclude": [
+        "../src/**/__tests__/*",
+        "../src/**/*.test.*",
+        "../src/**/test.*"
+    ],
+    "references": [
+        {
+            "path": "../../tokens/afm-cc/tsconfig.json"
+        }
+    ]
+}

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.1",
   "description": "An icon is a visual representation of a command, device, directory, or common action.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,8 +29,7 @@
     "build-glyphs": "ts-node --project ../../../tsconfig.node.json ./build/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.37.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/logo": "^13.15.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",

package/tmp/api-report-tmp.d.ts

@@ -1,86 +0,0 @@
-## API Report File for "@atlaskit/icon"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import type { ComponentType } from 'react';
-import { NamedExoticComponent } from 'react';
-import type { ReactNode } from 'react';
-import type { SVGProps as SVGProps_2 } from 'react';
-
-// @public (undocumented)
-export interface CustomGlyphProps extends SVGProps_2<SVGSVGElement> {
-    'aria-label'?: string;
-    'data-testid'?: string;
-    className?: string;
-}
-
-// @public (undocumented)
-interface GlyphColorProps {
-    primaryColor?: string;
-    secondaryColor?: string;
-}
-
-// @public (undocumented)
-export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
-}
-
-// @public (undocumented)
-interface GlyphSizeProps {
-    size?: Size;
-}
-
-// @public
-const Icon: NamedExoticComponent<IconProps>;
-export default Icon;
-
-// @public (undocumented)
-export interface IconProps extends GlyphProps {
-    // @deprecated (undocumented)
-    dangerouslySetGlyph?: string;
-    glyph?: ComponentType<CustomGlyphProps>;
-}
-
-// @public (undocumented)
-interface OtherGlyphProps {
-    label: string;
-    testId?: string;
-}
-
-// @public (undocumented)
-export type Size = 'large' | 'medium' | 'small' | 'xlarge';
-
-// @public (undocumented)
-export const size: Record<Size, Size>;
-
-// @public (undocumented)
-export const sizes: Record<Size, string>;
-
-// @public
-export const Skeleton: NamedExoticComponent<SkeletonProps>;
-
-// @public (undocumented)
-export interface SkeletonProps {
-    // (undocumented)
-    color?: string;
-    // (undocumented)
-    size?: Size;
-    testId?: string;
-    // (undocumented)
-    weight?: 'normal' | 'strong';
-}
-
-// @public
-export const SVG: NamedExoticComponent<SVGProps>;
-
-// @public (undocumented)
-export interface SVGProps extends GlyphProps {
-    children?: ReactNode;
-}
-
-// (No @packageDocumentation comment for this package)
-
-```