@atlaskit/editor-shared-styles 2.1.5 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-shared-styles
 
+## 2.2.0
+
+### Minor Changes
+
+- [`73d9a2fa116`](https://bitbucket.org/atlassian/atlassian-frontend/commits/73d9a2fa116) - ED-15568 Restore table's FloatingContextualMenu, extract utils/UI components
+
 ## 2.1.5
 
 ### Patch Changes

package/dist/cjs/scrollbar-styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollbarStyles = void 0;
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+var akGridSize = (0, _constants.gridSize)() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+
+var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat((0, _tokens.token)('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");
+exports.scrollbarStyles = scrollbarStyles;

package/dist/cjs/shortcut/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "shortcutStyle", {
+  enumerable: true,
+  get: function get() {
+    return _shortcut.shortcutStyle;
+  }
+});
+
+var _shortcut = require("./shortcut");

package/dist/cjs/shortcut/shortcut.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shortcutStyle = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _consts = require("../consts");
+
+var _templateObject;
+
+var shortcutStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), (0, _tokens.token)('color.text.subtle', _colors.N100), (0, _constants.borderRadius)(), (0, _consts.relativeFontSizeToBase16)(11.67), _consts.akEditorMobileMaxWidth);
+exports.shortcutStyle = shortcutStyle;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.1.5",
+	"version": "2.2.0",
 	"sideEffects": false
 }

package/dist/es2019/scrollbar-styles.js

@@ -0,0 +1,29 @@
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+const akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+
+export const scrollbarStyles = `
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  &::-webkit-scrollbar {
+    height: ${akGridSize};
+    width: ${akGridSize};
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)')};
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: ${token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)')};
+    border-radius: ${akGridSize};
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: ${token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)')};
+  }
+`;

package/dist/es2019/shortcut/index.js

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/dist/es2019/shortcut/shortcut.js

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+import { N100 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
+export const shortcutStyle = css`
+  background-color: ${token('color.background.neutral', 'rgba(223, 225, 229, 0.5)')}; /* N60 at 50% */
+  color: ${token('color.text.subtle', N100)};
+  border-radius: ${borderRadius()}px;
+  padding: 4px;
+  line-height: 12px;
+  font-size: ${relativeFontSizeToBase16(11.67)};
+  align-self: flex-end;
+  @media (max-width: ${akEditorMobileMaxWidth}px) {
+    display: none;
+  }
+`;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.1.5",
+	"version": "2.2.0",
 	"sideEffects": false
 }

package/dist/esm/scrollbar-styles.js

@@ -0,0 +1,5 @@
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+var akGridSize = gridSize() + 'px'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+
+export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: ").concat(token('color.background.neutral.subtle', 'rgba(0, 0, 0, 0)'), ";\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: ").concat(token('color.background.neutral.bold', 'rgba(0, 0, 0, 0.2)'), ";\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: ").concat(token('color.background.neutral.bold.hovered', 'rgba(0, 0, 0, 0.4)'), ";\n  }\n");

package/dist/esm/shortcut/index.js

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/dist/esm/shortcut/shortcut.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { N100 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
+export var shortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", "; /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), token('color.background.neutral', 'rgba(223, 225, 229, 0.5)'), token('color.text.subtle', N100), borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-shared-styles",
-	"version": "2.1.5",
+	"version": "2.2.0",
 	"sideEffects": false
 }

package/dist/types/scrollbar-styles.d.ts

@@ -0,0 +1 @@
+export declare const scrollbarStyles: string;

package/dist/types/shortcut/index.d.ts

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/dist/types/shortcut/shortcut.d.ts

@@ -0,0 +1 @@
+export declare const shortcutStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-shared-styles",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "description": "Style values used in the editor/renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,6 +22,8 @@
   "af:exports": {
     "./consts": "./src/consts/index.ts",
     "./selection": "./src/selection/index.ts",
+    "./shortcut": "./src/shortcut/index.ts",
+    "./scrollbar": "./src/scrollbar-styles.ts",
     ".": "./src/index.ts"
   },
   "dependencies": {

package/scrollbar/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@atlaskit/editor-shared-styles/scrollbar",
+  "main": "../dist/cjs/scrollbar-styles.js",
+  "module": "../dist/esm/scrollbar-styles.js",
+  "module:es2019": "../dist/es2019/scrollbar-styles.js",
+  "sideEffects": false,
+  "types": "../dist/types/scrollbar-styles.d.ts"
+}

package/shortcut/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@atlaskit/editor-shared-styles/shortcut",
+  "main": "../dist/cjs/shortcut/index.js",
+  "module": "../dist/esm/shortcut/index.js",
+  "module:es2019": "../dist/es2019/shortcut/index.js",
+  "sideEffects": false,
+  "types": "../dist/types/shortcut/index.d.ts"
+}

package/src/scrollbar-styles.ts

@@ -0,0 +1,40 @@
+import { gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+
+const akGridSize = gridSize() + 'px';
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4494
+export const scrollbarStyles = `
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  &::-webkit-scrollbar {
+    height: ${akGridSize};
+    width: ${akGridSize};
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${token(
+      'color.background.neutral.subtle',
+      'rgba(0, 0, 0, 0)',
+    )};
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: ${token(
+      'color.background.neutral.bold',
+      'rgba(0, 0, 0, 0.2)',
+    )};
+    border-radius: ${akGridSize};
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: ${token(
+      'color.background.neutral.bold.hovered',
+      'rgba(0, 0, 0, 0.4)',
+    )};
+  }
+`;

package/src/shortcut/index.ts

@@ -0,0 +1 @@
+export { shortcutStyle } from './shortcut';

package/src/shortcut/shortcut.ts

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react';
+
+import { N100 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+
+import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '../consts';
+
+export const shortcutStyle = css`
+  background-color: ${token(
+    'color.background.neutral',
+    'rgba(223, 225, 229, 0.5)',
+  )}; /* N60 at 50% */
+  color: ${token('color.text.subtle', N100)};
+  border-radius: ${borderRadius()}px;
+  padding: 4px;
+  line-height: 12px;
+  font-size: ${relativeFontSizeToBase16(11.67)};
+  align-self: flex-end;
+  @media (max-width: ${akEditorMobileMaxWidth}px) {
+    display: none;
+  }
+`;