@zendeskgarden/react-typography 8.40.1 → 8.42.2

package/dist/index.cjs.js

@@ -81,7 +81,7 @@ function _objectWithoutProperties(source, excluded) {
 var COMPONENT_ID$9 = 'typography.blockquote';
 var StyledBlockquote = styled__default['default'].blockquote.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -141,7 +141,7 @@ var fontStyles = function fontStyles(props) {
 };
 var StyledFont = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -156,7 +156,7 @@ StyledFont.defaultProps = {
 };
 
 var COMPONENT_ID$7 = 'typography.code';
-var colorStyles$2 = function colorStyles(props) {
+var colorStyles$3 = function colorStyles(props) {
   var hue = props.hue || 'neutralHue';
   var backgroundColor = reactTheming.getColor(hue, 200, props.theme);
   var shade = hue === 'yellow' ? 800 : 700;
@@ -165,7 +165,7 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledCode = styled__default['default'](StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.40.1',
+  'data-garden-version': '8.42.2',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -173,7 +173,7 @@ var StyledCode = styled__default['default'](StyledFont).attrs({
 })(["border-radius:", ";padding:1.5px;", ";", ";"], function (props) {
   return props.theme.borderRadii.sm;
 }, function (props) {
-  return colorStyles$2(props);
+  return colorStyles$3(props);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props);
 });
@@ -185,21 +185,21 @@ StyledCode.defaultProps = {
 };
 
 var COMPONENT_ID$6 = 'typography.codeblock';
-var colorStyles$1 = function colorStyles(props) {
+var colorStyles$2 = function colorStyles(props) {
   var backgroundColor = reactTheming.getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
   var foregroundColor = props.isLight ? props.theme.colors.foreground : reactTheming.getColor('neutralHue', 300, props.theme);
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 var StyledCodeBlock = styled__default['default'].pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).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;", ";", ";"], function (props) {
   return props.theme.space.base * 3;
 }, function (props) {
-  return colorStyles$1(props);
+  return colorStyles$2(props);
 }, function (props) {
   return reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props);
 });
@@ -210,7 +210,7 @@ StyledCodeBlock.defaultProps = {
 var COMPONENT_ID$5 = 'typography.codeblock_container';
 var StyledCodeBlockContainer = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -224,19 +224,48 @@ StyledCodeBlockContainer.defaultProps = {
 };
 
 var COMPONENT_ID$4 = 'typography.codeblock_code';
-var highlightStyles = function highlightStyles(props) {
-  var hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
-  var backgroundColor = reactTheming.getColor(hue, 600, props.theme, 0.1);
+var colorStyles$1 = function colorStyles(props) {
+  var backgroundColor;
+  if (props.diff) {
+    var 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.getColor(hue, 400, props.theme, 0.2);
+  } else if (props.isHighlighted) {
+    var _hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
+    backgroundColor = reactTheming.getColor(_hue, 600, props.theme, 0.1);
+  }
   return styled.css(["background-color:", ";"], backgroundColor);
 };
 var lineNumberStyles = function lineNumberStyles(props) {
-  var padding = "".concat(props.theme.space.base * 6, "px");
   var color = reactTheming.getColor('neutralHue', props.isLight ? 600 : 500, props.theme);
-  return styled.css(["&::before{display:table-cell;padding-right:", ";width:1px;text-align:right;color:", ";content:counter(linenumber);counter-increment:linenumber;}"], padding, color);
+  var padding;
+  if (props.language && props.language === 'diff') {
+    padding = 0;
+  } else if (props.size === 'sm') {
+    padding = props.theme.space.base * 4;
+  } else if (props.size === 'lg') {
+    padding = props.theme.space.base * 7;
+  } else {
+    padding = props.theme.space.base * 6;
+  }
+  return "\n    &::before {\n      display: table-cell;\n      padding-right: ".concat(padding, "px;\n      width: 1px;\n      text-align: right;\n      color: ").concat(color, ";\n      content: counter(linenumber);\n      counter-increment: linenumber;\n    }\n  ");
 };
 var StyledCodeBlockLine = styled__default['default'](StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.40.1',
+  'data-garden-version': '8.42.2',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -245,7 +274,7 @@ var StyledCodeBlockLine = styled__default['default'](StyledFont).attrs({
 })(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], function (props) {
   return props.theme.lineHeights[props.size];
 }, function (props) {
-  return props.isHighlighted && highlightStyles(props);
+  return colorStyles$1(props);
 }, function (props) {
   return props.isNumbered && lineNumberStyles(props);
 }, function (props) {
@@ -266,7 +295,11 @@ var colorStyles = function colorStyles(props) {
     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],
@@ -274,15 +307,15 @@ var colorStyles = function colorStyles(props) {
     regex: palette.red[400],
     value: props.isLight ? palette.red[700] : palette.crimson['M400']
   };
-  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,&.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:", ";}"], 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);
+  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);
 };
 var StyledCodeBlockToken = styled__default['default'].span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
-})(["display:inline-block;&.bold{font-weight:", ";}&.italic{font-style:italic;}", ";", ";"], function (props) {
+})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], function (props) {
   return props.theme.fontWeights.semibold;
 }, function (props) {
   return colorStyles(props);
@@ -296,7 +329,7 @@ StyledCodeBlockToken.defaultProps = {
 var COMPONENT_ID$2 = 'typography.ellipsis';
 var StyledEllipsis = styled__default['default'].div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -323,7 +356,7 @@ var StyledIcon = styled__default['default'](function (_ref) {
   return React__default['default'].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -343,7 +376,7 @@ var listStyles = function listStyles(props) {
 var ORDERED_ID$1 = 'typography.ordered_list';
 var StyledOrderedList = styled__default['default'].ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -358,7 +391,7 @@ StyledOrderedList.defaultProps = {
 var UNORDERED_ID$1 = 'typography.unordered_list';
 var StyledUnorderedList = styled__default['default'].ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -382,7 +415,7 @@ var listItemStyles = function listItemStyles(props) {
 var ORDERED_ID = 'typography.ordered_list_item';
 var StyledOrderedListItem = styled__default['default'](StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.40.1',
+  'data-garden-version': '8.42.2',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -407,7 +440,7 @@ StyledOrderedListItem.defaultProps = {
 var UNORDERED_ID = 'typography.unordered_list_item';
 var StyledUnorderedListItem = styled__default['default'](StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.40.1',
+  'data-garden-version': '8.42.2',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -425,7 +458,7 @@ StyledUnorderedListItem.defaultProps = {
 var COMPONENT_ID = 'typography.paragraph';
 var StyledParagraph = styled__default['default'].p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -615,6 +648,7 @@ Blockquote.defaultProps = {
 };
 
 var _excluded$5 = ["children", "containerProps", "highlightLines", "isLight", "isNumbered", "language", "size"];
+var 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'];
 var CodeBlock = React__default['default'].forwardRef(function (_ref, ref) {
   var children = _ref.children,
       containerProps = _ref.containerProps,
@@ -626,14 +660,11 @@ var CodeBlock = React__default['default'].forwardRef(function (_ref, ref) {
       other = _objectWithoutProperties(_ref, _excluded$5);
   var containerRef = React.useRef(null);
   var code = Array.isArray(children) ? children[0] : children;
-  var _size;
-  if (size === 'small') {
-    _size = 'sm';
-  } else if (size === 'medium') {
-    _size = 'md';
-  } else {
-    _size = 'lg';
-  }
+  var SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+  };
   var dependency = React.useMemo(function () {
     return [size, children];
   }, [size, children]);
@@ -641,13 +672,33 @@ var CodeBlock = React__default['default'].forwardRef(function (_ref, ref) {
     containerRef: containerRef,
     dependency: dependency
   });
+  var getDiff = function getDiff(line) {
+    var retVal;
+    if (language === 'diff') {
+      var token = line.find(function (value) {
+        return !(value.empty || value.content === '');
+      });
+      if (token) {
+        if (token.types.includes('deleted')) {
+          retVal = 'delete';
+        } else if (token.types.includes('inserted')) {
+          retVal = 'add';
+        } else if (token.types.includes('coord')) {
+          retVal = 'hunk';
+        } else if (token.types.includes('diff')) {
+          retVal = 'change';
+        }
+      }
+    }
+    return retVal;
+  };
   return React__default['default'].createElement(StyledCodeBlockContainer, _extends({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
   }), React__default['default'].createElement(Highlight__default['default'], {
     Prism: Highlight.Prism,
     code: code ? code.trim() : '',
-    language: language || 'tsx'
+    language: LANGUAGES.includes(language) ? language : 'tsx'
   }, function (_ref2) {
     var className = _ref2.className,
         tokens = _ref2.tokens,
@@ -662,10 +713,12 @@ var CodeBlock = React__default['default'].forwardRef(function (_ref, ref) {
         line: line
       }), {
         key: index,
+        language: language,
         isHighlighted: highlightLines && highlightLines.includes(index + 1),
         isLight: isLight,
         isNumbered: isNumbered,
-        size: _size
+        diff: getDiff(line),
+        size: size ? SIZES[size] : undefined
       }), line.map(function (token, tokenKey) {
         return React__default['default'].createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
           token: token

package/dist/index.esm.js

@@ -70,7 +70,7 @@ function _objectWithoutProperties(source, excluded) {
 var COMPONENT_ID$9 = 'typography.blockquote';
 var StyledBlockquote = styled.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
@@ -130,7 +130,7 @@ var fontStyles = function fontStyles(props) {
 };
 var StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -145,7 +145,7 @@ StyledFont.defaultProps = {
 };
 
 var COMPONENT_ID$7 = 'typography.code';
-var colorStyles$2 = function colorStyles(props) {
+var colorStyles$3 = function colorStyles(props) {
   var hue = props.hue || 'neutralHue';
   var backgroundColor = getColor(hue, 200, props.theme);
   var shade = hue === 'yellow' ? 800 : 700;
@@ -154,7 +154,7 @@ var colorStyles$2 = function colorStyles(props) {
 };
 var StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '8.40.1',
+  'data-garden-version': '8.42.2',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -162,7 +162,7 @@ var StyledCode = styled(StyledFont).attrs({
 })(["border-radius:", ";padding:1.5px;", ";", ";"], function (props) {
   return props.theme.borderRadii.sm;
 }, function (props) {
-  return colorStyles$2(props);
+  return colorStyles$3(props);
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$7, props);
 });
@@ -174,21 +174,21 @@ StyledCode.defaultProps = {
 };
 
 var COMPONENT_ID$6 = 'typography.codeblock';
-var colorStyles$1 = function colorStyles(props) {
+var colorStyles$2 = function colorStyles(props) {
   var backgroundColor = getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
   var foregroundColor = props.isLight ? props.theme.colors.foreground : getColor('neutralHue', 300, props.theme);
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 var StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).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;", ";", ";"], function (props) {
   return props.theme.space.base * 3;
 }, function (props) {
-  return colorStyles$1(props);
+  return colorStyles$2(props);
 }, function (props) {
   return retrieveComponentStyles(COMPONENT_ID$6, props);
 });
@@ -199,7 +199,7 @@ StyledCodeBlock.defaultProps = {
 var COMPONENT_ID$5 = 'typography.codeblock_container';
 var StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -213,19 +213,48 @@ StyledCodeBlockContainer.defaultProps = {
 };
 
 var COMPONENT_ID$4 = 'typography.codeblock_code';
-var highlightStyles = function highlightStyles(props) {
-  var hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
-  var backgroundColor = getColor(hue, 600, props.theme, 0.1);
+var colorStyles$1 = function colorStyles(props) {
+  var backgroundColor;
+  if (props.diff) {
+    var 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 = getColor(hue, 400, props.theme, 0.2);
+  } else if (props.isHighlighted) {
+    var _hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
+    backgroundColor = getColor(_hue, 600, props.theme, 0.1);
+  }
   return css(["background-color:", ";"], backgroundColor);
 };
 var lineNumberStyles = function lineNumberStyles(props) {
-  var padding = "".concat(props.theme.space.base * 6, "px");
   var color = getColor('neutralHue', props.isLight ? 600 : 500, props.theme);
-  return css(["&::before{display:table-cell;padding-right:", ";width:1px;text-align:right;color:", ";content:counter(linenumber);counter-increment:linenumber;}"], padding, color);
+  var padding;
+  if (props.language && props.language === 'diff') {
+    padding = 0;
+  } else if (props.size === 'sm') {
+    padding = props.theme.space.base * 4;
+  } else if (props.size === 'lg') {
+    padding = props.theme.space.base * 7;
+  } else {
+    padding = props.theme.space.base * 6;
+  }
+  return "\n    &::before {\n      display: table-cell;\n      padding-right: ".concat(padding, "px;\n      width: 1px;\n      text-align: right;\n      color: ").concat(color, ";\n      content: counter(linenumber);\n      counter-increment: linenumber;\n    }\n  ");
 };
 var StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.40.1',
+  'data-garden-version': '8.42.2',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -234,7 +263,7 @@ var StyledCodeBlockLine = styled(StyledFont).attrs({
 })(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], function (props) {
   return props.theme.lineHeights[props.size];
 }, function (props) {
-  return props.isHighlighted && highlightStyles(props);
+  return colorStyles$1(props);
 }, function (props) {
   return props.isNumbered && lineNumberStyles(props);
 }, function (props) {
@@ -255,7 +284,11 @@ var colorStyles = function colorStyles(props) {
     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],
@@ -263,15 +296,15 @@ var colorStyles = function colorStyles(props) {
     regex: palette.red[400],
     value: props.isLight ? palette.red[700] : palette.crimson['M400']
   };
-  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,&.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:", ";}"], 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);
+  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);
 };
 var StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
-})(["display:inline-block;&.bold{font-weight:", ";}&.italic{font-style:italic;}", ";", ";"], function (props) {
+})(["display:inline-block;&.bold:not(.diff){font-weight:", ";}&.coord{padding-left:0.75em;}&.italic{font-style:italic;}&.prefix{width:2em;text-align:center;}", ";", ";"], function (props) {
   return props.theme.fontWeights.semibold;
 }, function (props) {
   return colorStyles(props);
@@ -285,7 +318,7 @@ StyledCodeBlockToken.defaultProps = {
 var COMPONENT_ID$2 = 'typography.ellipsis';
 var StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -312,7 +345,7 @@ var StyledIcon = styled(function (_ref) {
   return React.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -332,7 +365,7 @@ var listStyles = function listStyles(props) {
 var ORDERED_ID$1 = 'typography.ordered_list';
 var StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -347,7 +380,7 @@ StyledOrderedList.defaultProps = {
 var UNORDERED_ID$1 = 'typography.unordered_list';
 var StyledUnorderedList = styled.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -371,7 +404,7 @@ var listItemStyles = function listItemStyles(props) {
 var ORDERED_ID = 'typography.ordered_list_item';
 var StyledOrderedListItem = styled(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '8.40.1',
+  'data-garden-version': '8.42.2',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -396,7 +429,7 @@ StyledOrderedListItem.defaultProps = {
 var UNORDERED_ID = 'typography.unordered_list_item';
 var StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '8.40.1',
+  'data-garden-version': '8.42.2',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -414,7 +447,7 @@ StyledUnorderedListItem.defaultProps = {
 var COMPONENT_ID = 'typography.paragraph';
 var StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.40.1'
+  'data-garden-version': '8.42.2'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"
@@ -604,6 +637,7 @@ Blockquote.defaultProps = {
 };
 
 var _excluded$5 = ["children", "containerProps", "highlightLines", "isLight", "isNumbered", "language", "size"];
+var 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'];
 var CodeBlock = React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       containerProps = _ref.containerProps,
@@ -615,14 +649,11 @@ var CodeBlock = React.forwardRef(function (_ref, ref) {
       other = _objectWithoutProperties(_ref, _excluded$5);
   var containerRef = useRef(null);
   var code = Array.isArray(children) ? children[0] : children;
-  var _size;
-  if (size === 'small') {
-    _size = 'sm';
-  } else if (size === 'medium') {
-    _size = 'md';
-  } else {
-    _size = 'lg';
-  }
+  var SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+  };
   var dependency = useMemo(function () {
     return [size, children];
   }, [size, children]);
@@ -630,13 +661,33 @@ var CodeBlock = React.forwardRef(function (_ref, ref) {
     containerRef: containerRef,
     dependency: dependency
   });
+  var getDiff = function getDiff(line) {
+    var retVal;
+    if (language === 'diff') {
+      var token = line.find(function (value) {
+        return !(value.empty || value.content === '');
+      });
+      if (token) {
+        if (token.types.includes('deleted')) {
+          retVal = 'delete';
+        } else if (token.types.includes('inserted')) {
+          retVal = 'add';
+        } else if (token.types.includes('coord')) {
+          retVal = 'hunk';
+        } else if (token.types.includes('diff')) {
+          retVal = 'change';
+        }
+      }
+    }
+    return retVal;
+  };
   return React.createElement(StyledCodeBlockContainer, _extends({}, containerProps, {
     ref: containerRef,
     tabIndex: containerTabIndex
   }), React.createElement(Highlight, {
     Prism: Prism,
     code: code ? code.trim() : '',
-    language: language || 'tsx'
+    language: LANGUAGES.includes(language) ? language : 'tsx'
   }, function (_ref2) {
     var className = _ref2.className,
         tokens = _ref2.tokens,
@@ -651,10 +702,12 @@ var CodeBlock = React.forwardRef(function (_ref, ref) {
         line: line
       }), {
         key: index,
+        language: language,
         isHighlighted: highlightLines && highlightLines.includes(index + 1),
         isLight: isLight,
         isNumbered: isNumbered,
-        size: _size
+        diff: getDiff(line),
+        size: size ? SIZES[size] : undefined
       }), line.map(function (token, tokenKey) {
         return React.createElement(StyledCodeBlockToken, _extends({}, getTokenProps({
           token: token

package/dist/typings/elements/CodeBlock.d.ts

@@ -5,10 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import React, { HTMLAttributes } from 'react';
-import { Language } from 'prism-react-renderer';
+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 interface ICodeBlockProps extends HTMLAttributes<HTMLPreElement> {
-    /** Selects the language used by the Prism tokenizer */
-    language?: Language;
+    /** Selects the language used by the [Prism](https://prismjs.com/) tokenizer */
+    language?: typeof LANGUAGES[number];
     /** Specifies the font size */
     size?: 'small' | 'medium' | 'large';
     /** Applies light mode styling */
@@ -24,3 +24,4 @@ export interface ICodeBlockProps extends HTMLAttributes<HTMLPreElement> {
  * @extends HTMLAttributes<HTMLPreElement>
  */
 export declare const CodeBlock: React.ForwardRefExoticComponent<ICodeBlockProps & React.RefAttributes<HTMLPreElement>>;
+export {};

package/dist/typings/styled/StyledCodeBlockLine.d.ts

@@ -5,11 +5,16 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 import { DefaultTheme } from 'styled-components';
+import { Language } from 'prism-react-renderer';
+export declare type DIFF = 'hunk' | 'add' | 'delete' | 'change';
+export declare type SIZE = 'sm' | 'md' | 'lg';
 export interface IStyledCodeBlockLineProps {
+    language?: Language;
     isHighlighted?: boolean;
     isLight?: boolean;
     isNumbered?: boolean;
-    size?: 'sm' | 'md' | 'lg';
+    diff?: DIFF;
+    size?: SIZE;
 }
 /**
  * 1. Fix line display for mobile.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "8.40.1",
+  "version": "8.42.2",
   "description": "Components relating to typography in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.40.1"
+    "@zendeskgarden/react-theming": "^8.42.2"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "7feeb65e934f41f48757fcd3bd0d36287b893fae"
+  "gitHead": "4d3dfab413c6a167dcaf6f9cc674160455881407"
 }