@atlaskit/emoji 63.1.10 → 63.2.0

package/dist/esm/components/picker/styles.js

@@ -3,9 +3,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _$nest4, _$nest5, _$nest6, _$nest8;
 
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
-import { akEmojiSelectedBackgroundColor, emojiFooterBoxShadow, emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
+import { akEmojiSelectedBackgroundColor, emojiPickerBorderColor, emojiPickerBoxShadow } from '../../util/shared-styles';
 import { emojiSprite, placeholder, emojiNode } from '../common/styles';
 import { emojiPickerHeight, emojiPickerWidth } from '../../util/constants';
 export var active = 'emoji-picker-active';
@@ -15,7 +16,7 @@ export var emojiPicker = style({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
-  background: 'white',
+  background: token('color.background.overlay', 'white'),
   border: "".concat(emojiPickerBorderColor, " 1px solid"),
   borderRadius: "".concat(borderRadius(), "px"),
   boxShadow: emojiPickerBoxShadow,
@@ -29,7 +30,7 @@ export var emojiPicker = style({
 export var addButton = 'emoji-picker-add-button';
 export var categorySelector = style({
   flex: '0 0 auto',
-  backgroundColor: colors.N30,
+  backgroundColor: token('color.background.sunken', colors.N30),
   $nest: _defineProperty({
     ul: {
       listStyle: 'none',
@@ -50,7 +51,7 @@ export var categorySelector = style({
       }
     }
   }, ".".concat(addButton), {
-    color: colors.N200,
+    color: token('color.text.lowEmphasis', colors.N200),
     margin: '0 0 0 5px',
     verticalAlign: 'middle'
   })
@@ -58,7 +59,7 @@ export var categorySelector = style({
 export var category = style({
   backgroundColor: 'transparent',
   border: 0,
-  color: colors.N100A,
+  color: token('color.text.lowEmphasis', colors.N100A),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
@@ -67,17 +68,17 @@ export var category = style({
     border: '0 none',
     padding: 0
   }), _defineProperty(_$nest4, "&.".concat(active), {
-    color: colors.B300,
+    color: token('color.text.selected', colors.B300),
     $nest: _defineProperty({}, '&:hover', {
-      color: colors.B300
+      color: token('color.text.selected', colors.B300)
     })
   }), _defineProperty(_$nest4, '&:hover', {
-    color: colors.B200
+    color: token('color.text.selected', colors.B200)
   }), _defineProperty(_$nest4, "&.".concat(disable), {
-    color: colors.N50,
+    color: token('color.text.lowEmphasis', colors.N50),
     cursor: 'default',
     $nest: _defineProperty({}, '&:hover', {
-      color: colors.N50
+      color: token('color.text.lowEmphasis', colors.N50)
     })
   }), _$nest4)
 }); /// EmojiPickerList
@@ -107,14 +108,12 @@ export var pickerSearch = style({
   $nest: (_$nest6 = {}, _defineProperty(_$nest6, ".".concat(searchIcon), {
     opacity: 0.5
   }), _defineProperty(_$nest6, ".".concat(input), {
-    background: 'transparent',
-    border: 0,
     boxSizing: 'border-box',
     color: 'inherit',
     cursor: 'inherit',
     fontSize: '14px',
     outline: 'none',
-    padding: '1px 0 2px 10px',
+    padding: '1px 0 2px 6px',
     width: '100%',
     $nest: (_$nest5 = {}, _defineProperty(_$nest5, '&:invalid', {
       boxShadow: 'none'
@@ -142,7 +141,7 @@ export var emojiPickerRow = style({
 });
 export var emojiCategoryTitle = style({
   boxSizing: 'border-box',
-  color: colors.N900,
+  color: token('color.text.highEmphasis', colors.N900),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
@@ -210,6 +209,6 @@ export var emojiPickerFooter = style({
   flex: '0 0 auto'
 });
 export var emojiPickerFooterWithTopShadow = style({
-  borderTop: "2px solid ".concat(colors.N30A),
-  boxShadow: emojiFooterBoxShadow
+  borderTop: token('color.border.neutral', "2px solid ".concat(colors.N30A)),
+  boxShadow: "0px -1px 1px 0px ".concat(token('color.border.neutral', 'rgba(0, 0, 0, 0.1)'))
 });

package/dist/esm/components/typeahead/styles.js

@@ -1,15 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
 import { emojiPreviewSelectedColor, emojiTypeAheadMaxHeight, emojiTypeAheadWidth, noDialogContainerBorderColor, noDialogContainerBorderRadius, noDialogContainerBoxShadow } from '../../util/shared-styles';
 export var selected = 'emoji-typeahead-selected';
 export var emojiTypeAhead = 'emoji-typeahead-element';
 export var typeAheadListContainer = 'emoji-typeahead-list-container';
 export var typeAheadList = style({
-  background: 'white',
+  background: token('color.background.overlay', 'white'),
   border: "1px solid ".concat(noDialogContainerBorderColor),
   borderRadius: noDialogContainerBorderRadius,
   boxShadow: noDialogContainerBoxShadow,
-  color: '#333',
+  color: token('color.text.mediumEmphasis', '#333'),
   width: emojiTypeAheadWidth
 });
 export var typeAheadEmpty = style({

package/dist/esm/components/uploader/styles.js

@@ -1,4 +1,5 @@
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
 import { emojiPickerWidth } from '../../util/constants'; // Uploader
 
 export var emojiUploadWidget = style({
@@ -6,7 +7,7 @@ export var emojiUploadWidget = style({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'stretch',
-  background: 'white',
+  background: token('color.background.overlay', 'white'),
   height: "120px",
   width: "".concat(emojiPickerWidth, "px"),
   marginBottom: '8px',

package/dist/esm/util/shared-styles.js

@@ -1,17 +1,15 @@
+import { token } from '@atlaskit/tokens';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N40, N30 } from '@atlaskit/theme/colors';
 import { emojiPickerWidth } from './constants';
 export var emojiPickerListWidth = emojiPickerWidth;
 export var emojiPickerListHeight = 205;
-export var emojiPickerBorderColor = N40; // This has not been confirmed by the ADG yet
-
-export var emojiPickerBoxShadow = '0 3px 6px rgba(0, 0, 0, 0.2)';
-export var emojiFooterBoxShadow = '0px -1px 1px 0px rgba(0, 0, 0, 0.1)';
-export var noDialogContainerBorderColor = N40; // This has not been confirmed by the ADG yet
-
+export var emojiPickerBorderColor = token('color.border.neutral', N40);
+export var emojiPickerBoxShadow = token('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+export var noDialogContainerBorderColor = token('color.border.neutral', N40);
 export var noDialogContainerBorderRadius = "".concat(borderRadius(), "px");
-export var noDialogContainerBoxShadow = '0 3px 6px rgba(0, 0, 0, 0.2)';
-export var akEmojiSelectedBackgroundColor = N30;
-export var emojiPreviewSelectedColor = N30;
+export var noDialogContainerBoxShadow = token('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+export var akEmojiSelectedBackgroundColor = token('color.background.transparentNeutral.hover', N30);
+export var emojiPreviewSelectedColor = token('color.background.subtleNeutral.resting', N30);
 export var emojiTypeAheadMaxHeight = 350;
 export var emojiTypeAheadWidth = 350;

package/dist/esm/util/storage-available.js

@@ -10,7 +10,8 @@ export default function storageAvailable(type) {
     storage.removeItem(x);
     return true;
   } catch (e) {
-    return e instanceof DOMException && (e.code === 22 || // Firefox
+    return e instanceof DOMException && ( // everything except Firefox
+    e.code === 22 || // Firefox
     e.code === 1014 || // test name field too, because code might not be present
     // everything except Firefox
     e.name === 'QuotaExceededError' || // Firefox

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "63.1.10",
+	"version": "63.2.0",
 	"sideEffects": false
 }

package/dist/types/util/shared-styles.d.ts

@@ -1,12 +1,11 @@
 export declare const emojiPickerListWidth = 350;
 export declare const emojiPickerListHeight = 205;
-export declare const emojiPickerBorderColor = "#DFE1E6";
-export declare const emojiPickerBoxShadow = "0 3px 6px rgba(0, 0, 0, 0.2)";
-export declare const emojiFooterBoxShadow = "0px -1px 1px 0px rgba(0, 0, 0, 0.1)";
-export declare const noDialogContainerBorderColor = "#DFE1E6";
+export declare const emojiPickerBorderColor: "var(--ds-border-neutral)";
+export declare const emojiPickerBoxShadow: "var(--ds-overlay)";
+export declare const noDialogContainerBorderColor: "var(--ds-border-neutral)";
 export declare const noDialogContainerBorderRadius: string;
-export declare const noDialogContainerBoxShadow = "0 3px 6px rgba(0, 0, 0, 0.2)";
-export declare const akEmojiSelectedBackgroundColor = "#EBECF0";
-export declare const emojiPreviewSelectedColor = "#EBECF0";
+export declare const noDialogContainerBoxShadow: "var(--ds-overlay)";
+export declare const akEmojiSelectedBackgroundColor: "var(--ds-background-transparentNeutral-hover)";
+export declare const emojiPreviewSelectedColor: "var(--ds-background-subtleNeutral-resting)";
 export declare const emojiTypeAheadMaxHeight = 350;
 export declare const emojiTypeAheadWidth = 350;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "63.1.10",
+  "version": "63.2.0",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,11 +28,12 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.0.0",
-    "@atlaskit/field-base": "^15.0.0",
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/media-client": "^14.3.0",
     "@atlaskit/spinner": "^15.0.0",
+    "@atlaskit/textfield": "^5.1.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/util-service-support": "^6.0.0",
     "@babel/runtime": "^7.0.0",
@@ -81,5 +82,10 @@
     "fabric",
     "ui"
   ],
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  }
 }