@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
203 lines (192 loc) • 9.38 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.aiPanelDarkStyles = exports.aiPanelDarkFirefoxStyles = exports.aiPanelBaseStyles = exports.aiPanelBaseFirefoxStyles = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("@emotion/react");
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
/**
* aiPanelStyles
* was imported from packages/editor/editor-core/src/ui/ContentStyles/ai-panels.ts
*/
var rotationAnimation = (0, _react.keyframes)({
'0%': {
'--panel-gradient-angle': '0deg'
},
'100%': {
'--panel-gradient-angle': '360deg'
}
});
var rotationAnimationFirefox = (0, _react.keyframes)({
'0%': {
'--panel-gradient-angle': '0deg',
backgroundPosition: '100%'
},
'100%': {
'--panel-gradient-angle': '360deg',
backgroundPosition: '-100%'
}
});
var aiPrismColor = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'prism.border.step.1', {
light: '#0065FF',
dark: '#0065FF80'
}), 'prism.border.step.2', {
light: '#0469FF',
dark: '#0469FF80'
}), 'prism.border.step.3', {
light: '#BF63F3',
dark: '#BF63F380'
}), 'prism.border.step.4', {
light: '#FFA900',
dark: '#FFA90080'
});
var aiPrismColorStep1Light = aiPrismColor['prism.border.step.1']['light'];
var aiPrismColorStep2Light = aiPrismColor['prism.border.step.2']['light'];
var aiPrismColorStep3Light = aiPrismColor['prism.border.step.3']['light'];
var aiPrismColorStep4Light = aiPrismColor['prism.border.step.4']['light'];
var aiPrismColorStep1Dark = aiPrismColor['prism.border.step.1']['dark'];
var aiPrismColorStep2Dark = aiPrismColor['prism.border.step.2']['dark'];
var aiPrismColorStep3Dark = aiPrismColor['prism.border.step.3']['dark'];
var aiPrismColorStep4Dark = aiPrismColor['prism.border.step.4']['dark'];
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
var prismBorderBaseBackgroundFirefox = "linear-gradient(90deg, ".concat(aiPrismColorStep1Light, " 0%, ").concat(aiPrismColorStep2Light, " 12%, ").concat(aiPrismColorStep3Light, " 24%, ").concat(aiPrismColorStep4Light, " 48%, ").concat(aiPrismColorStep3Light, " 64%, ").concat(aiPrismColorStep2Light, " 80%, ").concat(aiPrismColorStep1Light, " 100%)");
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
var prismBorderBaseBackground = "conic-gradient(from var(--panel-gradient-angle, 270deg), ".concat(aiPrismColorStep1Light, " 0%, ").concat(aiPrismColorStep2Light, " 20%, ").concat(aiPrismColorStep3Light, " 50%, ").concat(aiPrismColorStep4Light, " 56%, ").concat(aiPrismColorStep1Light, " 100%)");
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
var prismBorderDarkBackgroundFirefox = "linear-gradient(90deg, ".concat(aiPrismColorStep1Dark, " 0%, ").concat(aiPrismColorStep2Dark, " 12%, ").concat(aiPrismColorStep3Dark, " 24%, ").concat(aiPrismColorStep4Dark, " 48%, ").concat(aiPrismColorStep3Dark, " 64%, ").concat(aiPrismColorStep2Dark, " 80%, ").concat(aiPrismColorStep1Dark, " 100%)");
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
var prismBorderDarkBackground = "conic-gradient(from var(--panel-gradient-angle, 270deg), ".concat(aiPrismColorStep1Dark, " 0%, ").concat(aiPrismColorStep2Dark, " 20%, ").concat(aiPrismColorStep3Dark, " 50%, ").concat(aiPrismColorStep4Dark, " 56%, ").concat(aiPrismColorStep1Dark, " 100%)");
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var aiPanelBaseStyles = exports.aiPanelBaseStyles = (0, _react.css)({
'@property --panel-gradient-angle': {
syntax: '<angle>',
initialValue: '270deg',
inherits: false
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[extensionType="com.atlassian.ai-blocks"]': {
/* This hides the label for the extension */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.extension-label': {
display: 'none'
},
/* This styles the ai panel correctly when its just sitting on the page and there
is no user interaction */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.extension-container': {
position: 'relative',
boxShadow: 'none',
overflow: 'unset',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
backgroundColor: "var(--ds-surface, #FFFFFF)".concat(" !important"),
// prismBorderBaseStyles
'&::before, &::after': {
content: "''",
position: 'absolute',
zIndex: -1,
width: "calc(100% + 2px)",
height: "calc(100% + 2px)",
top: "-1px",
left: "-1px",
borderRadius: "calc(".concat("var(--ds-radius-small, 3px)", " + 1px)"),
transform: 'translate3d(0, 0, 0)',
background: prismBorderBaseBackground
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.with-hover-border': {
'&::before, &::after': {
//prismBorderHoverStyles
background: "var(--ds-border-input, #8C8F97)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'& .with-margin-styles': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
backgroundColor: "var(--ds-surface, #FFFFFF)".concat(" !important"),
borderRadius: "var(--ds-radius-small, 3px)"
}
}
},
/* This styles the ai panel correctly when its streaming */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'div[extensionType="com.atlassian.ai-blocks"]:has(.streaming)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.extension-container': {
'&::before, &::after': {
// prismBorderAnimationStyles
animationName: rotationAnimation,
animationDuration: '2s',
animationTimingFunction: 'linear',
animationIterationCount: 'infinite',
'@media (prefers-reduced-motion)': {
animation: 'none'
}
}
}
},
/* This styles the ai panel correctly when a user is hovering over the delete button in the floating panel */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[extensionType="com.atlassian.ai-blocks"].danger': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.extension-container': {
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
}
},
/* This removes the margin from the action list when inside an ai panel */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[extensiontype="com.atlassian.ai-blocks"][extensionkey="ai-action-items-block:aiActionItemsBodiedExtension"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[data-node-type="actionList"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
margin: '0 !important'
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var aiPanelBaseFirefoxStyles = exports.aiPanelBaseFirefoxStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[extensionType="com.atlassian.ai-blocks"]': {
'&::before, &::after': {
background: prismBorderBaseBackgroundFirefox,
backgroundSize: '200%'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'div[extensionType="com.atlassian.ai-blocks"]:has(.streaming)': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.extension-container': {
'&::before, &::after': {
animationName: rotationAnimationFirefox,
animationDirection: 'normal',
animationDuration: '1s'
}
}
}
});
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var aiPanelDarkStyles = exports.aiPanelDarkStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[extensionType="com.atlassian.ai-blocks"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.extension-container': {
'&::before, &::after': {
background: prismBorderDarkBackground
}
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
var aiPanelDarkFirefoxStyles = exports.aiPanelDarkFirefoxStyles = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'div[extensionType="com.atlassian.ai-blocks"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.extension-container': {
'&::before, &::after': {
background: prismBorderDarkBackgroundFirefox,
backgroundSize: '200%'
}
}
}
});