@atlaskit/code 14.6.9 → 15.1.0

package/dist/es2019/internal/theme/get-theme.js

@@ -1,228 +1,69 @@
 import memoizeOne from 'memoize-one';
 import * as colors from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
 import { codeFontFamily } from '@atlaskit/theme/constants';
 // Hardcoded values have been used due to the current color palette not having any
 // accessible color options for Teal and Yellow and +20A
 const T800 = '#067384';
 const Y1100 = '#7A5D1A';
-const PLUS20 = '#3A434E';
-export const getBaseTheme = theme => ({
+export const getBaseTheme = () => ({
   fontFamily: codeFontFamily(),
   fontFamilyItalic: `SFMono-MediumItalic, ${codeFontFamily()}`,
-  backgroundColor: themed({
-    light: `var(--ds-background-neutral, ${colors.N20})`,
-    dark: `var(--ds-background-neutral, ${colors.DN50})`
-  })({
-    theme
-  }),
-  textColor: themed({
-    light: `var(--ds-text, ${colors.N800})`,
-    dark: `var(--ds-text, ${colors.DN800})`
-  })({
-    theme
-  }),
-  lineNumberColor: themed({
-    light: `var(--ds-text-subtlest, ${colors.N400})`,
-    dark: `var(--ds-text-subtlest, ${colors.DN400})`
-  })({
-    theme
-  }),
-  lineNumberBgColor: themed({
-    light: `var(--ds-background-neutral, ${colors.N30})`,
-    dark: `var(--ds-background-neutral, ${colors.DN20})`
-  })({
-    theme
-  })
+  backgroundColor: `var(--ds-background-neutral, ${colors.N20})`,
+  textColor: `var(--ds-text, ${colors.N800})`,
+  lineNumberColor: `var(--ds-text-subtlest, ${colors.N400})`,
+  lineNumberBgColor: `var(--ds-background-neutral, ${colors.N30})`
 });
-export const defaultBaseTheme = getBaseTheme({
-  mode: 'light'
-});
-export const getColorPalette = memoizeOne(theme => {
-  const akTheme = {
-    theme
-  };
+export const defaultBaseTheme = getBaseTheme();
+export const getColorPalette = memoizeOne(() => {
   return {
-    highlightedLineBgColor: themed({
-      light: `var(--ds-background-neutral, ${colors.N30})`,
-      dark: `var(--ds-background-neutral, ${PLUS20})`
-    })(akTheme),
-    highlightedLineBorderColor: themed({
-      light: `var(--ds-border-focused, ${colors.B200})`,
-      dark: `var(--ds-border-focused, ${colors.B100})`
-    })(akTheme),
-    substringColor: themed({
-      light: `var(--ds-text-subtlest, ${colors.N400})`,
-      dark: `var(--ds-text-subtlest, ${colors.DN400})`
-    })(akTheme),
-    keywordColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    attributeColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    selectorTagColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    docTagColor: themed({
-      light: `var(--ds-text-accent-yellow, ${Y1100})`,
-      dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
-    })(akTheme),
-    nameColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    builtInColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    literalColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    bulletColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    codeColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    regexpColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    symbolColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    variableColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    templateVariableColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    linkColor: themed({
-      light: `var(--ds-text-accent-purple, ${colors.P300})`,
-      dark: `var(--ds-text-accent-purple, ${colors.P75})`
-    })(akTheme),
-    selectorAttributeColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    selectorPseudoColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T200})`
-    })(akTheme),
-    typeColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    stringColor: themed({
-      light: `var(--ds-text-accent-green, ${colors.G500})`,
-      dark: `var(--ds-text-accent-green, ${colors.G200})`
-    })(akTheme),
-    selectorIdColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    selectorClassColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    quoteColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    templateTagColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    titleColor: themed({
-      light: `var(--ds-text-accent-purple, ${colors.P300})`,
-      dark: `var(--ds-text-accent-purple, ${colors.P75})`
-    })(akTheme),
-    sectionColor: themed({
-      light: `var(--ds-text-accent-purple, ${colors.P300})`,
-      dark: `var(--ds-text-accent-purple, ${colors.P75})`
-    })(akTheme),
-    commentColor: themed({
-      light: `var(--ds-text-subtlest, ${colors.N400})`,
-      dark: `var(--ds-text-subtlest, ${colors.DN400})`
-    })(akTheme),
-    metaKeywordColor: themed({
-      light: `var(--ds-text-accent-green, ${colors.G500})`,
-      dark: `var(--ds-text-accent-green, ${colors.G200})`
-    })(akTheme),
-    metaColor: themed({
-      light: `var(--ds-text-subtlest, ${colors.N400})`,
-      dark: `var(--ds-text-subtlest, ${colors.DN400})`
-    })(akTheme),
-    functionColor: themed({
-      light: `var(--ds-text, ${colors.N800})`,
-      dark: `var(--ds-text, ${colors.DN800})`
-    })(akTheme),
-    numberColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    prologColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    cdataColor: themed({
-      light: `var(--ds-text-subtlest, ${colors.N400})`,
-      dark: `var(--ds-text-subtlest, ${colors.B75})`
-    })(akTheme),
-    punctuationColor: themed({
-      light: `var(--ds-text, ${colors.N800})`,
-      dark: `var(--ds-text, ${colors.DN800})`
-    })(akTheme),
-    propertyColor: themed({
-      light: `var(--ds-text-accent-purple, ${colors.P300})`,
-      dark: `var(--ds-text-accent-purple, ${colors.P75})`
-    })(akTheme),
-    constantColor: themed({
-      light: `var(--ds-text-accent-teal, ${T800})`,
-      dark: `var(--ds-text-accent-teal, ${colors.T100})`
-    })(akTheme),
-    booleanColor: themed({
-      light: `var(--ds-text-accent-blue, ${colors.B400})`,
-      dark: `var(--ds-text-accent-blue, ${colors.B75})`
-    })(akTheme),
-    charColor: themed({
-      light: `var(--ds-text, ${colors.N800})`,
-      dark: `var(--ds-text, ${colors.DN800})`
-    })(akTheme),
-    insertedColor: themed({
-      light: `var(--ds-text-accent-green, ${colors.G500})`,
-      dark: `var(--ds-text-accent-green, ${colors.B75})`
-    })(akTheme),
-    deletedColor: themed({
-      light: `var(--ds-text-accent-red, ${colors.R500})`,
-      dark: `var(--ds-text-accent-red, ${colors.B75})`
-    })(akTheme),
-    operatorColor: themed({
-      light: `var(--ds-text, ${colors.N800})`,
-      dark: `var(--ds-text, ${colors.B75})`
-    })(akTheme),
-    atruleColor: themed({
-      light: `var(--ds-text-accent-green, ${colors.G500})`,
-      dark: `var(--ds-text-accent-green, ${colors.G200})`
-    })(akTheme),
-    importantColor: themed({
-      light: `var(--ds-text-accent-yellow, ${Y1100})`,
-      dark: `var(--ds-text-accent-yellow, ${colors.Y300})`
-    })(akTheme)
+    highlightedLineBgColor: `var(--ds-background-neutral, ${colors.N30})`,
+    highlightedLineBorderColor: `var(--ds-border-focused, ${colors.B200})`,
+    substringColor: `var(--ds-text-subtlest, ${colors.N400})`,
+    keywordColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    attributeColor: `var(--ds-text-accent-teal, ${T800})`,
+    selectorTagColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    docTagColor: `var(--ds-text-accent-yellow, ${Y1100})`,
+    nameColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    builtInColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    literalColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    bulletColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    codeColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    regexpColor: `var(--ds-text-accent-teal, ${T800})`,
+    symbolColor: `var(--ds-text-accent-teal, ${T800})`,
+    variableColor: `var(--ds-text-accent-teal, ${T800})`,
+    templateVariableColor: `var(--ds-text-accent-teal, ${T800})`,
+    linkColor: `var(--ds-text-accent-purple, ${colors.P300})`,
+    selectorAttributeColor: `var(--ds-text-accent-teal, ${T800})`,
+    selectorPseudoColor: `var(--ds-text-accent-teal, ${T800})`,
+    typeColor: `var(--ds-text-accent-teal, ${T800})`,
+    stringColor: `var(--ds-text-accent-green, ${colors.G500})`,
+    selectorIdColor: `var(--ds-text-accent-teal, ${T800})`,
+    selectorClassColor: `var(--ds-text-accent-teal, ${T800})`,
+    quoteColor: `var(--ds-text-accent-teal, ${T800})`,
+    templateTagColor: `var(--ds-text-accent-teal, ${T800})`,
+    titleColor: `var(--ds-text-accent-purple, ${colors.P300})`,
+    sectionColor: `var(--ds-text-accent-purple, ${colors.P300})`,
+    commentColor: `var(--ds-text-subtlest, ${colors.N400})`,
+    metaKeywordColor: `var(--ds-text-accent-green, ${colors.G500})`,
+    metaColor: `var(--ds-text-subtlest, ${colors.N400})`,
+    functionColor: `var(--ds-text, ${colors.N800})`,
+    numberColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    prologColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    cdataColor: `var(--ds-text-subtlest, ${colors.N400})`,
+    punctuationColor: `var(--ds-text, ${colors.N800})`,
+    propertyColor: `var(--ds-text-accent-purple, ${colors.P300})`,
+    constantColor: `var(--ds-text-accent-teal, ${T800})`,
+    booleanColor: `var(--ds-text-accent-blue, ${colors.B400})`,
+    charColor: `var(--ds-text, ${colors.N800})`,
+    insertedColor: `var(--ds-text-accent-green, ${colors.G500})`,
+    deletedColor: `var(--ds-text-accent-red, ${colors.R500})`,
+    operatorColor: `var(--ds-text, ${colors.N800})`,
+    atruleColor: `var(--ds-text-accent-green, ${colors.G500})`,
+    importantColor: `var(--ds-text-accent-yellow, ${Y1100})`
   };
 });
-const getTheme = theme => ({
-  ...getBaseTheme(theme),
-  ...getColorPalette(theme)
+const getTheme = () => ({
+  ...getBaseTheme(),
+  ...getColorPalette()
 });
 export default getTheme;

package/dist/es2019/internal/theme/styles.js

@@ -1,4 +1,3 @@
-import { borderRadius } from '@atlaskit/theme/constants';
 import { CODE_FONT_SIZE, CODE_LINE_HEIGHT, HIGHLIGHT_BORDER_WIDTH, LINE_NUMBER_GUTTER, SPACING, VAR_CODE_BG_COLOR, VAR_CODE_LINE_NUMBER_BG_COLOR } from './constants';
 import { getBaseTheme, getColorPalette } from './get-theme';
 export const getLineNumWidth = numLines => {
@@ -189,7 +188,7 @@ export const getBaseCodeStyles = theme => ({
   backgroundColor: `var(${VAR_CODE_BG_COLOR},${theme.backgroundColor})`,
   color: theme.textColor,
   borderStyle: 'none',
-  borderRadius: `${borderRadius()}px`
+  borderRadius: "var(--ds-border-radius, 3px)"
 });
 
 /**
@@ -284,10 +283,8 @@ export const getCodeBlockStyles = theme => (highlightedStartText, highlightedEnd
     content: '" "'
   }
 });
-export const getCodeStyles = globalTheme => {
-  // Required to have proper compatibility with styled components interpolations
-  const akTheme = 'theme' in globalTheme ? globalTheme.theme : globalTheme;
-  const theme = getBaseTheme(akTheme);
+export const getCodeStyles = () => {
+  const theme = getBaseTheme();
   const baseStyles = getBaseCodeStyles(theme);
   return {
     ...baseStyles,
@@ -300,10 +297,10 @@ export const getCodeStyles = globalTheme => {
     whiteSpace: 'pre-wrap'
   };
 };
-export const getCodeBlockTheme = (globalTheme, maxLines) => {
+export const getCodeBlockTheme = maxLines => {
   return {
-    ...getBaseTheme(globalTheme),
-    ...getColorPalette(globalTheme),
+    ...getBaseTheme(),
+    ...getColorPalette(),
     lineNumberWidth: maxLines ? getLineNumWidth(maxLines) : undefined
   };
 };

package/dist/esm/code-block.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { memo, useCallback, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useHighlightLines } from './internal/hooks/use-highlight';
 import { getCodeBlockStyles, getCodeBlockTheme } from './internal/theme/styles';
 import { normalizeLanguage } from './internal/utils/get-normalized-language';
@@ -37,10 +36,9 @@ var CodeBlock = /*#__PURE__*/memo(function CodeBlock(_ref) {
     _ref$shouldWrapLongLi = _ref.shouldWrapLongLines,
     shouldWrapLongLines = _ref$shouldWrapLongLi === void 0 ? false : _ref$shouldWrapLongLi;
   var numLines = (text || '').split('\n').length;
-  var globalTheme = useGlobalTheme();
   var theme = useMemo(function () {
-    return getCodeBlockTheme(globalTheme, numLines);
-  }, [globalTheme, numLines]);
+    return getCodeBlockTheme(numLines);
+  }, [numLines]);
   var getStyles = useMemo(function () {
     return getCodeBlockStyles(theme);
   }, [theme]);

package/dist/esm/code.js

@@ -3,9 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["testId"],
   _excluded2 = ["children", "codeBidiWarnings", "codeBidiWarningLabel", "codeBidiWarningTooltipEnabled"];
 /** @jsx jsx */
-import React, { forwardRef, memo, useMemo } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import CodeBidiWarning from './bidi-warning';
 import codeBidiWarningDecorator from './bidi-warning/bidi-warning-decorator';
 import { getCodeStyles } from './internal/theme/styles';
@@ -21,10 +20,7 @@ import { getCodeStyles } from './internal/theme/styles';
 var Code = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Code(_ref, ref) {
   var testId = _ref.testId,
     props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useGlobalTheme();
-  var styles = useMemo(function () {
-    return css(getCodeStyles(theme));
-  }, [theme]);
+  var styles = css(getCodeStyles());
   var children = props.children,
     _props$codeBidiWarnin = props.codeBidiWarnings,
     codeBidiWarnings = _props$codeBidiWarnin === void 0 ? true : _props$codeBidiWarnin,

package/dist/esm/constants.js

@@ -1,3 +1,5 @@
+// The full list of languages that can potentially be supported is found in
+// https://prismjs.com/#supported-languages
 export var SUPPORTED_LANGUAGES = [{
   name: 'PHP',
   alias: ['php', 'php3', 'php4', 'php5'],
@@ -306,5 +308,21 @@ export var SUPPORTED_LANGUAGES = [{
   name: 'SplunkSPL',
   alias: ['splunk-spl'],
   value: 'splunk-spl'
+}, {
+  name: 'Dockerfile',
+  alias: ['docker', 'dockerfile'],
+  value: 'dockerfile'
+}, {
+  name: 'HCL',
+  alias: ['hcl', 'terraform'],
+  value: 'hcl'
+}, {
+  name: 'NGINX',
+  alias: ['nginx'],
+  value: 'nginx'
+}, {
+  name: 'Protocol Buffers',
+  alias: ['protobuf', 'proto'],
+  value: 'protobuf'
 }];
 export { CODE_BLOCK_SELECTOR } from './internal/theme/constants';