@atlaskit/flag 14.3.4 → 14.5.0

package/dist/esm/theme.js

@@ -1,76 +1,103 @@
-import * as colors from '@atlaskit/theme/colors';
+import { B100, B400, DN40, DN50, DN600, G300, G400, N0, N200, N30A, N40, N500, N50A, N60A, N700, R300, R400, Y200, Y300 } from '@atlaskit/theme/colors';
 var flagBackgroundColor = {
   error: {
-    light: colors.R400,
-    dark: colors.R300
+    light: "var(--ds-background-overlay, ".concat(R400, ")"),
+    dark: "var(--ds-background-overlay, ".concat(R300, ")")
   },
   info: {
-    light: colors.N500,
-    dark: colors.N500
+    light: "var(--ds-background-overlay, ".concat(N500, ")"),
+    dark: "var(--ds-background-overlay, ".concat(N500, ")")
   },
   normal: {
-    light: colors.N0,
-    dark: colors.DN50
+    light: "var(--ds-background-overlay, ".concat(N0, ")"),
+    dark: "var(--ds-background-overlay, ".concat(DN50, ")")
   },
   success: {
-    light: colors.G400,
-    dark: colors.G300
+    light: "var(--ds-background-overlay, ".concat(G400, ")"),
+    dark: "var(--ds-background-overlay, ".concat(G300, ")")
   },
   warning: {
-    light: colors.Y200,
-    dark: colors.Y300
+    light: "var(--ds-background-overlay, ".concat(Y200, ")"),
+    dark: "var(--ds-background-overlay, ".concat(Y300, ")")
   }
 };
 export var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
   return flagBackgroundColor[appearance][mode];
 };
-export var flagBorderColor = colors.N60A;
+export var flagBorderColor = "var(--ds-background-overlay, ".concat(N60A, ")");
+var flagIconColor = {
+  error: {
+    light: "var(--ds-iconBorder-danger, ".concat(N0, ")"),
+    dark: "var(--ds-iconBorder-danger, ".concat(DN40, ")")
+  },
+  info: {
+    light: "var(--ds-iconBorder-discovery, ".concat(N0, ")"),
+    dark: "var(--ds-iconBorder-discovery, ".concat(DN600, ")")
+  },
+  normal: {
+    light: "var(--ds-iconBorder-brand, ".concat(N500, ")"),
+    dark: "var(--ds-iconBorder-brand, ".concat(DN600, ")")
+  },
+  success: {
+    light: "var(--ds-iconBorder-success, ".concat(N0, ")"),
+    dark: "var(--ds-iconBorder-success, ".concat(DN40, ")")
+  },
+  warning: {
+    light: "var(--ds-iconBorder-warning, ".concat(N700, ")"),
+    dark: "var(--ds-iconBorder-warning, ".concat(DN40, ")")
+  }
+};
 var flagTextColor = {
   error: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
   },
   normal: {
-    light: colors.N500,
-    dark: colors.DN600
+    light: "var(--ds-text-highEmphasis, ".concat(N500, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN600, ")")
   },
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: "var(--ds-text-highEmphasis, ".concat(N700, ")"),
+    dark: "var(--ds-text-highEmphasis, ".concat(DN40, ")")
   }
 };
 export var getFlagTextColor = function getFlagTextColor(appearance, mode) {
   return flagTextColor[appearance][mode];
 };
-export var flagShadowColor = colors.N50A;
+export var getFlagIconColor = function getFlagIconColor(appearance, mode) {
+  return flagIconColor[appearance][mode];
+}; // token set in flag.tsx instead
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+export var flagShadowColor = N50A;
 var flagFocusRingColor = {
   error: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(N40, ")")
   },
   info: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(N40, ")")
   },
   normal: {
-    light: colors.B100,
-    dark: colors.B100
+    light: "var(--ds-border-focus, ".concat(B100, ")"),
+    dark: "var(--ds-border-focus, ".concat(B100, ")")
   },
   success: {
-    light: colors.N40,
-    dark: colors.N40
+    light: "var(--ds-border-focus, ".concat(N40, ")"),
+    dark: "var(--ds-border-focus, ".concat(N40, ")")
   },
   warning: {
-    light: colors.N200,
-    dark: colors.N200
+    light: "var(--ds-border-focus, ".concat(N200, ")"),
+    dark: "var(--ds-border-focus, ".concat(N200, ")")
   }
 };
 export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
@@ -79,46 +106,46 @@ export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mo
 var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
 var actionBackground = {
   success: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
   },
   info: {
-    light: lightButtonBackground,
-    dark: lightButtonBackground
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")")
   },
   error: {
-    light: lightButtonBackground,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(lightButtonBackground, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
   },
   warning: {
-    light: colors.N30A,
-    dark: colors.N30A
+    light: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")"),
+    dark: "var(--ds-background-subtleNeutral-resting, ".concat(N30A, ")")
   },
   normal: {
-    light: 'none',
-    dark: 'none'
+    light: "var(--ds-background-subtleNeutral-resting, none)",
+    dark: "var(--ds-background-subtleNeutral-resting, none)"
   }
 };
 var actionColor = {
   success: {
-    light: colors.N0,
-    dark: colors.DN40
+    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(DN40, ")")
   },
   info: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(DN600, ")")
   },
   error: {
-    light: colors.N0,
-    dark: colors.DN600
+    light: "var(--ds-text-mediumEmphasis, ".concat(N0, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(DN600, ")")
   },
   warning: {
-    light: colors.N700,
-    dark: colors.DN40
+    light: "var(--ds-text-mediumEmphasis, ".concat(N700, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(DN40, ")")
   },
   normal: {
-    light: colors.B400,
-    dark: colors.B100
+    light: "var(--ds-text-mediumEmphasis, ".concat(B400, ")"),
+    dark: "var(--ds-text-mediumEmphasis, ".concat(B100, ")")
   }
 };
 export var getActionBackground = function getActionBackground(appearance, mode) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.3.4",
+	"version": "14.5.0",
 	"sideEffects": false
 }

package/dist/types/auto-dismiss-flag.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AutoDismissFlagProps } from './types';
 export declare const AUTO_DISMISS_SECONDS = 8;
 declare const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;

package/dist/types/flag.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FlagProps } from './types';
 declare const Flag: (props: FlagProps) => JSX.Element;
 export default Flag;

package/dist/types/theme.d.ts

@@ -1,8 +1,9 @@
 import { ThemeModes } from '@atlaskit/theme/types';
 import { AppearanceTypes } from './types';
 export declare const getFlagBackgroundColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
-export declare const flagBorderColor = "rgba(9, 30, 66, 0.31)";
+export declare const flagBorderColor: "var(--ds-background-overlay)";
 export declare const getFlagTextColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
+export declare const getFlagIconColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const flagShadowColor = "rgba(9, 30, 66, 0.25)";
 export declare const getFlagFocusRingColor: (appearance: AppearanceTypes, mode: ThemeModes) => string;
 export declare const getActionBackground: (appearance: AppearanceTypes, mode: ThemeModes) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.3.4",
+  "version": "14.5.0",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -17,7 +17,6 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Flag"
@@ -25,11 +24,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^15.1.0",
-    "@atlaskit/icon": "^21.6.0",
+    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^11.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -37,13 +37,12 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/docs": "*",
-    "@atlaskit/field-radio-group": "^8.0.0",
     "@atlaskit/radio": "^5.2.0",
+    "@atlaskit/section-message": "^6.0.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/theme": "^11.3.0",
+    "@atlaskit/theme": "^12.1.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -67,10 +66,12 @@
         "analytics-next"
       ],
       "theming": [
-        "new-theming-api"
+        "tokens",
+        "react-context"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
+      "deprecation": "no-deprecated-imports",
+      "styling": [
+        "emotion"
       ]
     }
   },

package/dist/cjs/utils.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.onMouseDownBlur = void 0;
-
-// Prevent a focus ring if clicked
-var onMouseDownBlur = function onMouseDownBlur(e) {
-  var currentTarget = e.currentTarget;
-  var focusedDuringMouseDown = currentTarget === document.activeElement;
-  requestAnimationFrame(function () {
-    if (focusedDuringMouseDown && currentTarget !== document.activeElement && document.body.contains(currentTarget)) {
-      currentTarget.focus();
-      return;
-    }
-
-    if (!focusedDuringMouseDown && document.activeElement && document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-  });
-};
-
-exports.onMouseDownBlur = onMouseDownBlur;

package/dist/es2019/utils.js

@@ -1,15 +0,0 @@
-// Prevent a focus ring if clicked
-export const onMouseDownBlur = e => {
-  const currentTarget = e.currentTarget;
-  const focusedDuringMouseDown = currentTarget === document.activeElement;
-  requestAnimationFrame(() => {
-    if (focusedDuringMouseDown && currentTarget !== document.activeElement && document.body.contains(currentTarget)) {
-      currentTarget.focus();
-      return;
-    }
-
-    if (!focusedDuringMouseDown && document.activeElement && document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-  });
-};

package/dist/esm/utils.js

@@ -1,15 +0,0 @@
-// Prevent a focus ring if clicked
-export var onMouseDownBlur = function onMouseDownBlur(e) {
-  var currentTarget = e.currentTarget;
-  var focusedDuringMouseDown = currentTarget === document.activeElement;
-  requestAnimationFrame(function () {
-    if (focusedDuringMouseDown && currentTarget !== document.activeElement && document.body.contains(currentTarget)) {
-      currentTarget.focus();
-      return;
-    }
-
-    if (!focusedDuringMouseDown && document.activeElement && document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-  });
-};

package/dist/types/utils.d.ts

@@ -1,2 +0,0 @@
-import { MouseEvent } from 'react';
-export declare const onMouseDownBlur: (e: MouseEvent<HTMLElement>) => void;

package/utils/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "@atlaskit/flag/utils",
-  "main": "../dist/cjs/utils.js",
-  "module": "../dist/esm/utils.js",
-  "module:es2019": "../dist/es2019/utils.js",
-  "types": "../dist/types/utils.d.ts"
-}