@atlaskit/modal-dialog 12.0.3 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/modal-dialog
 
+## 12.1.0
+
+### Minor Changes
+
+- [`993eb469fcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/993eb469fcb) - Instrumented `@atlaskit/modal-dialog` with the new theming package, `@atlaskit/tokens`. Tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.3
 
 ### Patch Changes

package/dist/cjs/internal/components/modal-dialog.js

@@ -27,6 +27,8 @@ var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants = require("../constants");
 
 var _context = require("../context");
@@ -47,7 +49,7 @@ var dialogStyles = (0, _core.css)({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: _colors.N0,
+  backgroundColor: (0, _tokens.token)('color.background.overlay', _colors.N0),
   color: _constants.textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -56,7 +58,7 @@ var dialogStyles = (0, _core.css)({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius: _constants.borderRadius,
-    boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A)
+    boxShadow: (0, _tokens.token)('shadow.overlay', "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A))
   },
 
   /**

package/dist/cjs/internal/constants.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iconColor = exports.focusOutlineColor = exports.textColor = exports.keylineColor = exports.keylineHeight = exports.titleIconMargin = exports.footerItemGap = exports.padding = exports.verticalOffset = exports.borderRadius = exports.gutter = exports.width = void 0;
+exports.iconColor = exports.textColor = exports.keylineColor = exports.keylineHeight = exports.titleIconMargin = exports.footerItemGap = exports.padding = exports.verticalOffset = exports.borderRadius = exports.gutter = exports.width = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _tokens = require("@atlaskit/tokens");
+
 var width = {
   values: ['small', 'medium', 'large', 'x-large'],
   widths: {
@@ -35,14 +37,12 @@ var titleIconMargin = gridSize;
 exports.titleIconMargin = titleIconMargin;
 var keylineHeight = 2;
 exports.keylineHeight = keylineHeight;
-var keylineColor = _colors.N30;
+var keylineColor = (0, _tokens.token)('color.border.neutral', _colors.N30);
 exports.keylineColor = keylineColor;
-var textColor = (0, _colors.text)();
+var textColor = (0, _tokens.token)('color.text.highEmphasis', (0, _colors.text)());
 exports.textColor = textColor;
-var focusOutlineColor = _colors.N800;
-exports.focusOutlineColor = focusOutlineColor;
 var iconColor = {
-  danger: _colors.R400,
-  warning: _colors.Y400
+  danger: (0, _tokens.token)('color.iconBorder.danger', _colors.R400),
+  warning: (0, _tokens.token)('color.iconBorder.warning', _colors.Y400)
 };
 exports.iconColor = iconColor;

package/dist/cjs/modal-wrapper.js

@@ -85,7 +85,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.0.3"
+    packageVersion: "12.1.0"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.0.3",
+	"version": "12.1.0",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/modal-dialog.js

@@ -8,6 +8,7 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
@@ -22,7 +23,7 @@ const dialogStyles = css({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: N0,
+  backgroundColor: token('color.background.overlay', N0),
   color: textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -31,7 +32,7 @@ const dialogStyles = css({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius,
-    boxShadow: `0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`
+    boxShadow: token('shadow.overlay', `0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`)
   },
 
   /**

package/dist/es2019/internal/constants.js

@@ -1,5 +1,6 @@
-import { text as getTextColor, N30, N800, R400, Y400 } from '@atlaskit/theme/colors';
+import { N30, R400, text, Y400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export const width = {
   values: ['small', 'medium', 'large', 'x-large'],
   widths: {
@@ -18,10 +19,9 @@ export const padding = gridSize * 3;
 export const footerItemGap = gridSize;
 export const titleIconMargin = gridSize;
 export const keylineHeight = 2;
-export const keylineColor = N30;
-export const textColor = getTextColor();
-export const focusOutlineColor = N800;
+export const keylineColor = token('color.border.neutral', N30);
+export const textColor = token('color.text.highEmphasis', text());
 export const iconColor = {
-  danger: R400,
-  warning: Y400
+  danger: token('color.iconBorder.danger', R400),
+  warning: token('color.iconBorder.warning', Y400)
 };

package/dist/es2019/modal-wrapper.js

@@ -50,7 +50,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.0.3"
+    packageVersion: "12.1.0"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.0.3",
+	"version": "12.1.0",
 	"sideEffects": false
 }

package/dist/esm/internal/components/modal-dialog.js

@@ -10,6 +10,7 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
@@ -24,7 +25,7 @@ var dialogStyles = css({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: N0,
+  backgroundColor: token('color.background.overlay', N0),
   color: textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -33,7 +34,7 @@ var dialogStyles = css({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius: borderRadius,
-    boxShadow: "0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A)
+    boxShadow: token('shadow.overlay', "0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A))
   },
 
   /**

package/dist/esm/internal/constants.js

@@ -1,5 +1,6 @@
-import { text as getTextColor, N30, N800, R400, Y400 } from '@atlaskit/theme/colors';
+import { N30, R400, text, Y400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export var width = {
   values: ['small', 'medium', 'large', 'x-large'],
   widths: {
@@ -18,10 +19,9 @@ export var padding = gridSize * 3;
 export var footerItemGap = gridSize;
 export var titleIconMargin = gridSize;
 export var keylineHeight = 2;
-export var keylineColor = N30;
-export var textColor = getTextColor();
-export var focusOutlineColor = N800;
+export var keylineColor = token('color.border.neutral', N30);
+export var textColor = token('color.text.highEmphasis', text());
 export var iconColor = {
-  danger: R400,
-  warning: Y400
+  danger: token('color.iconBorder.danger', R400),
+  warning: token('color.iconBorder.warning', Y400)
 };

package/dist/esm/modal-wrapper.js

@@ -56,7 +56,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.0.3"
+    packageVersion: "12.1.0"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.0.3",
+	"version": "12.1.0",
 	"sideEffects": false
 }

package/dist/types/internal/constants.d.ts

@@ -15,11 +15,9 @@ export declare const padding: number;
 export declare const footerItemGap: number;
 export declare const titleIconMargin: number;
 export declare const keylineHeight = 2;
-export declare const keylineColor = "#EBECF0";
-export declare const textColor: string;
-export declare const focusOutlineColor = "#172B4D";
-declare type IconColor = {
+export declare const keylineColor: "var(--ds-border-neutral)";
+export declare const textColor: "var(--ds-text-highEmphasis)";
+export declare const iconColor: {
     [key in Appearance]: string;
 };
-export declare const iconColor: IconColor;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.0.3",
+  "version": "12.1.0",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,11 +41,12 @@
     "@atlaskit/blanket": "^12.2.0",
     "@atlaskit/codemod-utils": "^3.4.0",
     "@atlaskit/ds-lib": "^1.3.0",
-    "@atlaskit/focus-ring": "0.2.3",
+    "@atlaskit/focus-ring": "0.2.4",
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/portal": "^4.1.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "raf-schd": "^2.1.0",
@@ -103,7 +104,7 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "theming": "new-theming-api",
+      "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": "emotion"
     }