@zendeskgarden/react-typography - npm Package Compare versions

Comparing version 9.0.0-next.18 to 9.0.0-next.19

dist/esm/elements/CodeBlock.js

@@ -7,5 +7,6 @@ /**
 */
-import React, { useRef, useMemo } from 'react';
-import Highlight, { Prism } from 'prism-react-renderer';
+import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import { Prism, Highlight } from 'prism-react-renderer';
 import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
+import { useWindow, ThemeProvider } from '@zendeskgarden/react-theming';
 import { LANGUAGES } from '../types/index.js';
@@ -32,4 +33,4 @@ import '../styled/StyledBlockquote.js';
     isNumbered,
-    language,
-    size,
+    language = 'tsx',
+    size = 'medium',
     ...other
@@ -44,2 +45,21 @@ } = _ref;
   });
+  const [isPrismImported, setIsPrismImported] = useState(false);
+  const win = useWindow();
+  const importPrism = useCallback(async () => {
+    if (win && !isPrismImported) {
+      win.Prism = Prism;
+      try {
+        await import('prismjs/components/prism-bash');
+        await import('prismjs/components/prism-diff');
+        await import('prismjs/components/prism-json');
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsPrismImported(true);
+      }
+    }
+  }, [win, isPrismImported]);
+  useEffect(() => {
+    importPrism();
+  }, [importPrism]);
   const getDiff = line => {
@@ -63,7 +83,6 @@ let retVal;
   };
-  return React.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
+  return isPrismImported && React.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
   }), React.createElement(Highlight, {
-    Prism: Prism,
     code: code ? code.trim() : '',
@@ -78,6 +97,13 @@ language: LANGUAGES.includes(language) ? language : 'tsx'
     } = _ref2;
-    return React.createElement(StyledCodeBlock, Object.assign({
+    return React.createElement(ThemeProvider, {
+      theme: parentTheme => ({
+        ...parentTheme,
+        colors: {
+          ...parentTheme.colors,
+          base: isLight ? 'light' : 'dark'
+        }
+      })
+    }, React.createElement(StyledCodeBlock, Object.assign({
       className: className,
-      ref: ref,
-      isLight: isLight
+      ref: ref
     }, other), tokens.map((line, index) => React.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
@@ -89,6 +115,6 @@ line
       isHighlighted: highlightLines && highlightLines.includes(index + 1),
-      isLight: isLight,
       isNumbered: isNumbered,
       diff: getDiff(line),
-      size: size
+      size: size,
+      style: undefined
     }), line.map((token, tokenKey) => React.createElement(StyledCodeBlockToken, Object.assign({}, getTokenProps({
@@ -98,12 +124,8 @@ token
       key: tokenKey,
-      isLight: isLight
-    }), token.empty ? '\n' : token.content)))));
+      style: undefined
+    }), token.empty ? '\n' : token.content))))));
   }));
 });
 CodeBlock.displayName = 'CodeBlock';
-CodeBlock.defaultProps = {
-  language: 'tsx',
-  size: 'medium'
-};
 
 export { CodeBlock };

dist/esm/styled/StyledBlockquote.js

@@ -14,3 +14,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -17,0 +17,0 @@ displayName: "StyledBlockquote",

dist/esm/styled/StyledCode.js

@@ -53,3 +53,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'code',
@@ -56,0 +56,0 @@ isMonospace: true

dist/esm/styled/StyledCodeBlock.js

@@ -8,8 +8,17 @@ /**
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'typography.codeblock';
-const colorStyles = props => {
-  const backgroundColor = getColorV8('neutralHue', props.isLight ? 100 : 1000, props.theme);
-  const foregroundColor = props.isLight ? getColorV8('foreground', 600 , props.theme) : getColorV8('neutralHue', 300, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = getColor({
+    theme,
+    variable: theme.colors.base === 'light' ? 'background.subtle' : 'background.default'
+  });
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
@@ -19,7 +28,7 @@ };
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
-})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledCodeBlock.defaultProps = {
@@ -26,0 +35,0 @@ theme: DEFAULT_THEME

dist/esm/styled/StyledCodeBlockContainer.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledCodeBlockContainer",

dist/esm/styled/StyledCodeBlockLine.js

@@ -8,42 +8,68 @@ /**
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledFont, THEME_SIZES } from './StyledFont.js';
 
 const COMPONENT_ID = 'typography.codeblock_code';
-const colorStyles = props => {
+const colorStyles = _ref => {
+  let {
+    theme,
+    diff,
+    isHighlighted
+  } = _ref;
   let backgroundColor;
-  if (props.diff) {
-    let hue;
-    switch (props.diff) {
-      case 'hunk':
-        hue = 'royal';
-        break;
-      case 'add':
-        hue = 'lime';
-        break;
-      case 'delete':
-        hue = 'crimson';
-        break;
-      case 'change':
-        hue = 'lemon';
-        break;
-    }
-    backgroundColor = getColorV8(hue, 400, props.theme, 0.2);
-  } else if (props.isHighlighted) {
-    const hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
-    backgroundColor = getColorV8(hue, 600, props.theme, 0.1);
+  if (diff) {
+    const hues = {
+      hunk: 'royal',
+      add: 'lime',
+      delete: 'crimson',
+      change: 'lemon'
+    };
+    backgroundColor = getColor({
+      theme,
+      hue: hues[diff],
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 400
+      },
+      transparency: theme.opacity[300]
+    });
+  } else if (isHighlighted) {
+    backgroundColor = getColor({
+      theme,
+      dark: {
+        hue: 'white'
+      },
+      light: {
+        hue: 'neutralHue',
+        shade: 700
+      },
+      transparency: theme.opacity[100]
+    });
   }
   return css(["background-color:", ";"], backgroundColor);
 };
-const lineNumberStyles = props => {
-  const color = getColorV8('neutralHue', props.isLight ? 600 : 500, props.theme);
+const lineNumberStyles = _ref2 => {
+  let {
+    theme,
+    language,
+    size
+  } = _ref2;
+  const color = getColor({
+    theme,
+    variable: 'foreground.subtle',
+    light: {
+      offset: -100
+    }
+  });
   let padding;
-  if (props.language && props.language === 'diff') {
+  if (language && language === 'diff') {
     padding = 0;
-  } else if (props.size === 'small') {
-    padding = props.theme.space.base * 4;
-  } else if (props.size === 'large') {
-    padding = props.theme.space.base * 7;
+  } else if (size === 'small') {
+    padding = theme.space.base * 4;
+  } else if (size === 'large') {
+    padding = theme.space.base * 7;
   } else {
-    padding = props.theme.space.base * 6;
+    padding = theme.space.base * 6;
   }
@@ -64,3 +90,3 @@ return `
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'code',
@@ -71,3 +97,3 @@ isMonospace: true
   componentId: "sc-1goay17-0"
-})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.size]], props => colorStyles(props), props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.size]], colorStyles, props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledCodeBlockLine.defaultProps = {
@@ -74,0 +100,0 @@ theme: DEFAULT_THEME

dist/esm/styled/StyledCodeBlockToken.js

@@ -8,24 +8,163 @@ /**
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 import { StyledCodeBlock } from './StyledCodeBlock.js';
 
 const COMPONENT_ID = 'typography.codeblock_token';
-const colorStyles = props => {
-  const palette = props.theme.palette;
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
   const colors = {
-    boolean: props.isLight ? palette.royal[600] : palette.azure[400],
-    builtin: palette.teal[400],
-    comment: props.isLight ? palette.lime[600] : palette.mint[400],
-    constant: props.isLight ? palette.azure[400] : palette.blue[500],
-    coord: props.isLight ? palette.purple[600] : palette.blue[200],
-    deleted: props.isLight ? palette.red[700] : palette.red[200],
-    diff: props.isLight ? palette.yellow[800] : palette.yellow[200],
-    function: props.isLight ? palette.orange['M600'] : palette.yellow[300],
-    inserted: props.isLight ? palette.green[700] : palette.green[200],
-    keyword: palette.fuschia['M400'],
-    name: props.isLight ? palette.crimson[400] : palette.blue[300],
-    number: props.isLight ? palette.green[600] : palette.green[300],
-    punctuation: props.isLight ? palette.red[800] : palette.grey[600],
-    regex: palette.red[400],
-    value: props.isLight ? palette.red[700] : palette.crimson['M400']
+    boolean: getColor({
+      theme,
+      dark: {
+        hue: 'azure',
+        shade: 600
+      },
+      light: {
+        hue: 'royal',
+        shade: 700
+      }
+    }),
+    builtin: getColor({
+      theme,
+      hue: 'teal',
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    comment: getColor({
+      theme,
+      dark: {
+        hue: 'mint',
+        shade: 600
+      },
+      light: {
+        hue: 'lime',
+        shade: 700
+      }
+    }),
+    constant: getColor({
+      theme,
+      dark: {
+        hue: 'blue',
+        shade: 600
+      },
+      light: {
+        hue: 'azure',
+        shade: 700
+      }
+    }),
+    coord: getColor({
+      theme,
+      hue: 'blue',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    deleted: getColor({
+      theme,
+      hue: 'red',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    diff: getColor({
+      theme,
+      hue: 'yellow',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    function: getColor({
+      theme,
+      dark: {
+        hue: 'yellow',
+        shade: 300
+      },
+      light: {
+        hue: 'orange',
+        shade: 700
+      }
+    }),
+    inserted: getColor({
+      theme,
+      hue: 'green',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    keyword: getColor({
+      theme,
+      hue: 'fuschia',
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    name: getColor({
+      theme,
+      dark: {
+        hue: 'blue',
+        shade: 400
+      },
+      light: {
+        hue: 'crimson',
+        shade: 700
+      }
+    }),
+    number: getColor({
+      theme,
+      hue: 'green',
+      dark: {
+        shade: 400
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    punctuation: getColor({
+      theme,
+      dark: {
+        hue: 'grey',
+        shade: 700
+      },
+      light: {
+        hue: 'red',
+        shade: 900
+      }
+    }),
+    regex: getColor({
+      theme,
+      hue: 'red',
+      shade: 600
+    }),
+    value: getColor({
+      theme,
+      dark: {
+        hue: 'crimson',
+        shade: 600
+      },
+      light: {
+        hue: 'red',
+        shade: 800
+      }
+    })
   };
@@ -36,7 +175,7 @@ return css(["&.builtin,&.class-name,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script){color:", ";}&.doctype,&.prolog,&.tag.punctuation:not(.attr-value):not(.script):not(.spread){color:", ";}&.attribute.value,&.attr-value,&.atrule,&.cdata,&.string,&.url.content{color:", ";}&.constant,&.interpolation-punctuation{color:", ";}&.attr-name,&.attr-value.spread,&.environment,&.interpolation,&.parameter,&.property,&.property-access,&.variable{color:", ";}&.parameter.punctuation,&.attr-name + .attr-value.punctuation{color:inherit;}&.regex{color:", ";}&.boolean,&.bold:not(.diff),&.entity,&.important,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script):not(.class-name){color:", ";}&.number,&.unit{color:", ";}&.assign-left,&.function,&.selector:not(.attribute){color:", ";}&.atrule.rule,&.keyword{color:", ";}&.blockquote,&.comment,&.shebang{color:", ";}", ".language-css &&.plain{color:", ";}", ".language-diff &&.coord{color:", ";}", ".language-diff &&.deleted{color:", ";}", ".language-diff &&.diff{color:", ";}", ".language-diff &&.inserted{color:", ";}"], colors.builtin, colors.punctuation, colors.value, colors.constant, colors.name, colors.regex, colors.boolean, colors.number, colors.function, colors.keyword, colors.comment, StyledCodeBlock, colors.value, StyledCodeBlock, colors.coord, StyledCodeBlock, colors.deleted, StyledCodeBlock, colors.diff, StyledCodeBlock, colors.inserted);
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
-})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], props => props.theme.fontWeights.semibold, props => colorStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], props => props.theme.fontWeights.semibold, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledCodeBlockToken.defaultProps = {
@@ -43,0 +182,0 @@ theme: DEFAULT_THEME

dist/esm/styled/StyledEllipsis.js

@@ -13,3 +13,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -16,0 +16,0 @@ displayName: "StyledEllipsis",

dist/esm/styled/StyledFont.js

@@ -66,3 +66,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -69,0 +69,0 @@ displayName: "StyledFont",

dist/esm/styled/StyledIcon.js

@@ -18,3 +18,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -21,0 +21,0 @@ displayName: "StyledIcon",

dist/esm/styled/StyledList.js

@@ -17,3 +17,3 @@ /**
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -29,3 +29,3 @@ displayName: "StyledList__StyledOrderedList",
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -32,0 +32,0 @@ displayName: "StyledList__StyledUnorderedList",

dist/esm/styled/StyledListItem.js

@@ -24,3 +24,3 @@ /**
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'li'
@@ -38,3 +38,3 @@ }).withConfig({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'li'
@@ -41,0 +41,0 @@ }).withConfig({

dist/esm/styled/StyledParagraph.js

@@ -14,3 +14,3 @@ /**
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -17,0 +17,0 @@ displayName: "StyledParagraph",

dist/esm/types/index.js

@@ -12,4 +12,4 @@ /**
 const TYPE_UNORDERED_LIST = ['circle', 'disc', 'square'];
-const LANGUAGES = ['markup', 'bash', 'clike', 'c', 'cpp', 'css', 'javascript', 'jsx', 'coffeescript', 'actionscript', 'css-extr', 'diff', 'git', 'go', 'graphql', 'handlebars', 'json', 'less', 'makefile', 'markdown', 'objectivec', 'ocaml', 'python', 'reason', 'sass', 'scss', 'sql', 'stylus', 'tsx', 'typescript', 'wasm', 'yaml'];
+const LANGUAGES = ['bash', 'css', 'diff', 'graphql', 'javascript', 'json', 'jsx', 'markdown', 'markup', 'python', 'typescript', 'tsx', 'yaml'];
 
 export { HUE, INHERIT_SIZE, LANGUAGES, SIZE, TYPE_ORDERED_LIST, TYPE_UNORDERED_LIST };

dist/index.cjs.js

@@ -14,3 +14,3 @@ /**
 var polished = require('polished');
-var Highlight = require('prism-react-renderer');
+var prismReactRenderer = require('prism-react-renderer');
 var containerScrollregion = require('@zendeskgarden/container-scrollregion');
@@ -23,3 +23,2 @@
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
 
@@ -31,3 +30,3 @@ const HUE = ['grey', 'red', 'green', 'yellow'];
 const TYPE_UNORDERED_LIST = ['circle', 'disc', 'square'];
-const LANGUAGES = ['markup', 'bash', 'clike', 'c', 'cpp', 'css', 'javascript', 'jsx', 'coffeescript', 'actionscript', 'css-extr', 'diff', 'git', 'go', 'graphql', 'handlebars', 'json', 'less', 'makefile', 'markdown', 'objectivec', 'ocaml', 'python', 'reason', 'sass', 'scss', 'sql', 'stylus', 'tsx', 'typescript', 'wasm', 'yaml'];
+const LANGUAGES = ['bash', 'css', 'diff', 'graphql', 'javascript', 'json', 'jsx', 'markdown', 'markup', 'python', 'typescript', 'tsx', 'yaml'];
 
@@ -88,3 +87,3 @@ const COMPONENT_ID$9 = 'typography.font';
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -102,3 +101,3 @@ displayName: "StyledFont",
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -157,3 +156,3 @@ displayName: "StyledBlockquote",
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'code',
@@ -172,5 +171,14 @@ isMonospace: true
 const COMPONENT_ID$6 = 'typography.codeblock';
-const colorStyles$2 = props => {
-  const backgroundColor = reactTheming.getColorV8('neutralHue', props.isLight ? 100 : 1000, props.theme);
-  const foregroundColor = props.isLight ? reactTheming.getColorV8('foreground', 600 , props.theme) : reactTheming.getColorV8('neutralHue', 300, props.theme);
+const colorStyles$2 = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundColor = reactTheming.getColor({
+    theme,
+    variable: theme.colors.base === 'light' ? 'background.subtle' : 'background.default'
+  });
+  const foregroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.default'
+  });
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
@@ -180,7 +188,7 @@ };
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
-})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, props => colorStyles$2(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
+})(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], props => props.theme.space.base * 3, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 StyledCodeBlock.defaultProps = {
@@ -193,3 +201,3 @@ theme: reactTheming.DEFAULT_THEME
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -206,38 +214,64 @@ displayName: "StyledCodeBlockContainer",
 const COMPONENT_ID$4 = 'typography.codeblock_code';
-const colorStyles$1 = props => {
+const colorStyles$1 = _ref => {
+  let {
+    theme,
+    diff,
+    isHighlighted
+  } = _ref;
   let backgroundColor;
-  if (props.diff) {
-    let hue;
-    switch (props.diff) {
-      case 'hunk':
-        hue = 'royal';
-        break;
-      case 'add':
-        hue = 'lime';
-        break;
-      case 'delete':
-        hue = 'crimson';
-        break;
-      case 'change':
-        hue = 'lemon';
-        break;
-    }
-    backgroundColor = reactTheming.getColorV8(hue, 400, props.theme, 0.2);
-  } else if (props.isHighlighted) {
-    const hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
-    backgroundColor = reactTheming.getColorV8(hue, 600, props.theme, 0.1);
+  if (diff) {
+    const hues = {
+      hunk: 'royal',
+      add: 'lime',
+      delete: 'crimson',
+      change: 'lemon'
+    };
+    backgroundColor = reactTheming.getColor({
+      theme,
+      hue: hues[diff],
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 400
+      },
+      transparency: theme.opacity[300]
+    });
+  } else if (isHighlighted) {
+    backgroundColor = reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'white'
+      },
+      light: {
+        hue: 'neutralHue',
+        shade: 700
+      },
+      transparency: theme.opacity[100]
+    });
   }
   return styled.css(["background-color:", ";"], backgroundColor);
 };
-const lineNumberStyles = props => {
-  const color = reactTheming.getColorV8('neutralHue', props.isLight ? 600 : 500, props.theme);
+const lineNumberStyles = _ref2 => {
+  let {
+    theme,
+    language,
+    size
+  } = _ref2;
+  const color = reactTheming.getColor({
+    theme,
+    variable: 'foreground.subtle',
+    light: {
+      offset: -100
+    }
+  });
   let padding;
-  if (props.language && props.language === 'diff') {
+  if (language && language === 'diff') {
     padding = 0;
-  } else if (props.size === 'small') {
-    padding = props.theme.space.base * 4;
-  } else if (props.size === 'large') {
-    padding = props.theme.space.base * 7;
+  } else if (size === 'small') {
+    padding = theme.space.base * 4;
+  } else if (size === 'large') {
+    padding = theme.space.base * 7;
   } else {
-    padding = props.theme.space.base * 6;
+    padding = theme.space.base * 6;
   }
@@ -258,3 +292,3 @@ return `
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'code',
@@ -265,3 +299,3 @@ isMonospace: true
   componentId: "sc-1goay17-0"
-})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.size]], props => colorStyles$1(props), props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
+})(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], props => props.theme.lineHeights[THEME_SIZES[props.size]], colorStyles$1, props => props.isNumbered && lineNumberStyles(props), props => props.theme.space.base * 3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 StyledCodeBlockLine.defaultProps = {
@@ -272,20 +306,159 @@ theme: reactTheming.DEFAULT_THEME
 const COMPONENT_ID$3 = 'typography.codeblock_token';
-const colorStyles = props => {
-  const palette = props.theme.palette;
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
   const colors = {
-    boolean: props.isLight ? palette.royal[600] : palette.azure[400],
-    builtin: palette.teal[400],
-    comment: props.isLight ? palette.lime[600] : palette.mint[400],
-    constant: props.isLight ? palette.azure[400] : palette.blue[500],
-    coord: props.isLight ? palette.purple[600] : palette.blue[200],
-    deleted: props.isLight ? palette.red[700] : palette.red[200],
-    diff: props.isLight ? palette.yellow[800] : palette.yellow[200],
-    function: props.isLight ? palette.orange['M600'] : palette.yellow[300],
-    inserted: props.isLight ? palette.green[700] : palette.green[200],
-    keyword: palette.fuschia['M400'],
-    name: props.isLight ? palette.crimson[400] : palette.blue[300],
-    number: props.isLight ? palette.green[600] : palette.green[300],
-    punctuation: props.isLight ? palette.red[800] : palette.grey[600],
-    regex: palette.red[400],
-    value: props.isLight ? palette.red[700] : palette.crimson['M400']
+    boolean: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'azure',
+        shade: 600
+      },
+      light: {
+        hue: 'royal',
+        shade: 700
+      }
+    }),
+    builtin: reactTheming.getColor({
+      theme,
+      hue: 'teal',
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    comment: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'mint',
+        shade: 600
+      },
+      light: {
+        hue: 'lime',
+        shade: 700
+      }
+    }),
+    constant: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'blue',
+        shade: 600
+      },
+      light: {
+        hue: 'azure',
+        shade: 700
+      }
+    }),
+    coord: reactTheming.getColor({
+      theme,
+      hue: 'blue',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    deleted: reactTheming.getColor({
+      theme,
+      hue: 'red',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    diff: reactTheming.getColor({
+      theme,
+      hue: 'yellow',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    function: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'yellow',
+        shade: 300
+      },
+      light: {
+        hue: 'orange',
+        shade: 700
+      }
+    }),
+    inserted: reactTheming.getColor({
+      theme,
+      hue: 'green',
+      dark: {
+        shade: 200
+      },
+      light: {
+        shade: 800
+      }
+    }),
+    keyword: reactTheming.getColor({
+      theme,
+      hue: 'fuschia',
+      dark: {
+        shade: 600
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    name: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'blue',
+        shade: 400
+      },
+      light: {
+        hue: 'crimson',
+        shade: 700
+      }
+    }),
+    number: reactTheming.getColor({
+      theme,
+      hue: 'green',
+      dark: {
+        shade: 400
+      },
+      light: {
+        shade: 700
+      }
+    }),
+    punctuation: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'grey',
+        shade: 700
+      },
+      light: {
+        hue: 'red',
+        shade: 900
+      }
+    }),
+    regex: reactTheming.getColor({
+      theme,
+      hue: 'red',
+      shade: 600
+    }),
+    value: reactTheming.getColor({
+      theme,
+      dark: {
+        hue: 'crimson',
+        shade: 600
+      },
+      light: {
+        hue: 'red',
+        shade: 800
+      }
+    })
   };
@@ -296,7 +469,7 @@ return styled.css(["&.builtin,&.class-name,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script){color:", ";}&.doctype,&.prolog,&.tag.punctuation:not(.attr-value):not(.script):not(.spread){color:", ";}&.attribute.value,&.attr-value,&.atrule,&.cdata,&.string,&.url.content{color:", ";}&.constant,&.interpolation-punctuation{color:", ";}&.attr-name,&.attr-value.spread,&.environment,&.interpolation,&.parameter,&.property,&.property-access,&.variable{color:", ";}&.parameter.punctuation,&.attr-name + .attr-value.punctuation{color:inherit;}&.regex{color:", ";}&.boolean,&.bold:not(.diff),&.entity,&.important,&.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script):not(.class-name){color:", ";}&.number,&.unit{color:", ";}&.assign-left,&.function,&.selector:not(.attribute){color:", ";}&.atrule.rule,&.keyword{color:", ";}&.blockquote,&.comment,&.shebang{color:", ";}", ".language-css &&.plain{color:", ";}", ".language-diff &&.coord{color:", ";}", ".language-diff &&.deleted{color:", ";}", ".language-diff &&.diff{color:", ";}", ".language-diff &&.inserted{color:", ";}"], colors.builtin, colors.punctuation, colors.value, colors.constant, colors.name, colors.regex, colors.boolean, colors.number, colors.function, colors.keyword, colors.comment, StyledCodeBlock, colors.value, StyledCodeBlock, colors.coord, StyledCodeBlock, colors.deleted, StyledCodeBlock, colors.diff, StyledCodeBlock, colors.inserted);
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
-})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], props => props.theme.fontWeights.semibold, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
+})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], props => props.theme.fontWeights.semibold, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 StyledCodeBlockToken.defaultProps = {
@@ -309,3 +482,3 @@ theme: reactTheming.DEFAULT_THEME
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -327,3 +500,3 @@ displayName: "StyledEllipsis",
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -344,3 +517,3 @@ displayName: "StyledIcon",
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -356,3 +529,3 @@ displayName: "StyledList__StyledOrderedList",
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -377,3 +550,3 @@ displayName: "StyledList__StyledUnorderedList",
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'li'
@@ -391,3 +564,3 @@ }).withConfig({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.18',
+  'data-garden-version': '9.0.0-next.19',
   as: 'li'
@@ -406,3 +579,3 @@ }).withConfig({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.18'
+  'data-garden-version': '9.0.0-next.19'
 }).withConfig({
@@ -577,4 +750,4 @@ displayName: "StyledParagraph",
     isNumbered,
-    language,
-    size,
+    language = 'tsx',
+    size = 'medium',
     ...other
@@ -589,2 +762,21 @@ } = _ref;
   });
+  const [isPrismImported, setIsPrismImported] = React.useState(false);
+  const win = reactTheming.useWindow();
+  const importPrism = React.useCallback(async () => {
+    if (win && !isPrismImported) {
+      win.Prism = prismReactRenderer.Prism;
+      try {
+        await import('prismjs/components/prism-bash');
+        await import('prismjs/components/prism-diff');
+        await import('prismjs/components/prism-json');
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsPrismImported(true);
+      }
+    }
+  }, [win, isPrismImported]);
+  React.useEffect(() => {
+    importPrism();
+  }, [importPrism]);
   const getDiff = line => {
@@ -608,7 +800,6 @@ let retVal;
   };
-  return React__default.default.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
+  return isPrismImported && React__default.default.createElement(StyledCodeBlockContainer, Object.assign({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
-  }), React__default.default.createElement(Highlight__default.default, {
-    Prism: Highlight.Prism,
+  }), React__default.default.createElement(prismReactRenderer.Highlight, {
     code: code ? code.trim() : '',
@@ -623,6 +814,13 @@ language: LANGUAGES.includes(language) ? language : 'tsx'
     } = _ref2;
-    return React__default.default.createElement(StyledCodeBlock, Object.assign({
+    return React__default.default.createElement(reactTheming.ThemeProvider, {
+      theme: parentTheme => ({
+        ...parentTheme,
+        colors: {
+          ...parentTheme.colors,
+          base: isLight ? 'light' : 'dark'
+        }
+      })
+    }, React__default.default.createElement(StyledCodeBlock, Object.assign({
       className: className,
-      ref: ref,
-      isLight: isLight
+      ref: ref
     }, other), tokens.map((line, index) => React__default.default.createElement(StyledCodeBlockLine, Object.assign({}, getLineProps({
@@ -634,6 +832,6 @@ line
       isHighlighted: highlightLines && highlightLines.includes(index + 1),
-      isLight: isLight,
       isNumbered: isNumbered,
       diff: getDiff(line),
-      size: size
+      size: size,
+      style: undefined
     }), line.map((token, tokenKey) => React__default.default.createElement(StyledCodeBlockToken, Object.assign({}, getTokenProps({
@@ -643,11 +841,7 @@ token
       key: tokenKey,
-      isLight: isLight
-    }), token.empty ? '\n' : token.content)))));
+      style: undefined
+    }), token.empty ? '\n' : token.content))))));
   }));
 });
 CodeBlock.displayName = 'CodeBlock';
-CodeBlock.defaultProps = {
-  language: 'tsx',
-  size: 'medium'
-};
 
@@ -654,0 +848,0 @@ const Ellipsis = React.forwardRef((_ref, ref) => {

dist/typings/styled/StyledCodeBlock.d.ts

@@ -8,8 +8,5 @@ /**
 import { DefaultTheme } from 'styled-components';
-export interface IStyledCodeBlockProps {
-    isLight?: boolean;
-}
 export declare const StyledCodeBlock: import("styled-components").StyledComponent<"pre", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-} & IStyledCodeBlockProps, "data-garden-id" | "data-garden-version">;
+}, "data-garden-id" | "data-garden-version">;

dist/typings/styled/StyledCodeBlockLine.d.ts

@@ -13,3 +13,2 @@ /**
     isHighlighted?: boolean;
-    isLight?: boolean;
     isNumbered?: boolean;
@@ -19,6 +18,2 @@ diff?: Diff;
 }
-/**
- * 1. Fix line display for mobile.
- * 2. Match parent padding for overflow scroll.
- */
 export declare const StyledCodeBlockLine: import("styled-components").StyledComponent<"code", DefaultTheme, {
@@ -25,0 +20,0 @@ 'data-garden-id': string;

dist/typings/styled/StyledCodeBlockToken.d.ts

@@ -8,8 +8,5 @@ /**
 import { DefaultTheme } from 'styled-components';
-export interface IStyledCodeBlockTokenProps {
-    isLight?: boolean;
-}
 export declare const StyledCodeBlockToken: import("styled-components").StyledComponent<"span", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
-} & IStyledCodeBlockTokenProps, "data-garden-id" | "data-garden-version">;
+}, "data-garden-id" | "data-garden-version">;

dist/typings/types/index.d.ts

@@ -13,3 +13,3 @@ /**
 export declare const TYPE_UNORDERED_LIST: readonly ["circle", "disc", "square"];
-export declare const LANGUAGES: readonly ["markup", "bash", "clike", "c", "cpp", "css", "javascript", "jsx", "coffeescript", "actionscript", "css-extr", "diff", "git", "go", "graphql", "handlebars", "json", "less", "makefile", "markdown", "objectivec", "ocaml", "python", "reason", "sass", "scss", "sql", "stylus", "tsx", "typescript", "wasm", "yaml"];
+export declare const LANGUAGES: readonly ["bash", "css", "diff", "graphql", "javascript", "json", "jsx", "markdown", "markup", "python", "typescript", "tsx", "yaml"];
 export type Diff = 'hunk' | 'add' | 'delete' | 'change';
@@ -16,0 +16,0 @@ export type Size = (typeof SIZE)[number];

package.json

 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.0.0-next.18",
+  "version": "9.0.0-next.19",
   "description": "Components relating to typography in the Garden Design System",
@@ -26,3 +26,4 @@ "license": "Apache-2.0",
     "polished": "^4.3.1",
-    "prism-react-renderer": "^1.1.1",
+    "prism-react-renderer": "^2.3.1",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.5.7"
@@ -37,3 +38,3 @@ },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.18"
+    "@zendeskgarden/react-theming": "^9.0.0-next.19"
   },
@@ -50,3 +51,3 @@ "keywords": [
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "31680e30a7c9b1f2bd1f8f711f540dfaaf4ee4ec"
+  "gitHead": "3f18fec721a25bebc274de6af38cd88ab4e63a79"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113827

increased by3.57%

Lines of code

3054

increased by14%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Addedprismjs@^1.29.0

• + Added@types/prismjs@1.26.5(transitive)

• + Addedclsx@2.1.1(transitive)

• + Addedprism-react-renderer@2.4.0(transitive)

• + Addedprismjs@1.29.0(transitive)

• - Removedprism-react-renderer@1.3.5(transitive)

• Updatedprism-react-renderer@^2.3.1