@zendeskgarden/react-typography 9.0.0-next.3 → 9.0.0-next.5

package/dist/index.cjs.js

@@ -83,13 +83,13 @@ const fontStyles = props => {
   }
   if (props.hue) {
     const shade = props.hue === 'yellow' ? 700 : 600;
-    color = reactTheming.getColor(props.hue, shade, props.theme);
+    color = reactTheming.getColorV8(props.hue, shade, props.theme);
   }
   return styled.css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
 };
 const StyledFont = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -102,11 +102,11 @@ StyledFont.defaultProps = {
 const COMPONENT_ID$8 = 'typography.blockquote';
 const StyledBlockquote = styled__default.default.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
-})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => reactTheming.getColor('neutralHue', 400, props.theme), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => reactTheming.getColorV8('neutralHue', 400, props.theme), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledBlockquote.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -114,14 +114,14 @@ StyledBlockquote.defaultProps = {
 const COMPONENT_ID$7 = 'typography.code';
 const colorStyles$3 = props => {
   const hue = props.hue || 'neutralHue';
-  const backgroundColor = reactTheming.getColor(hue, 200, props.theme);
+  const backgroundColor = reactTheming.getColorV8(hue, 200, props.theme);
   const shade = hue === 'yellow' ? 800 : 700;
-  const foregroundColor = reactTheming.getColor(hue, shade, props.theme);
+  const foregroundColor = reactTheming.getColorV8(hue, shade, props.theme);
   return styled.css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
 };
 const StyledCode = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -136,13 +136,13 @@ StyledCode.defaultProps = {
 
 const COMPONENT_ID$6 = 'typography.codeblock';
 const colorStyles$2 = props => {
-  const backgroundColor = reactTheming.getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
-  const foregroundColor = props.isLight ? props.theme.colors.foreground : reactTheming.getColor('neutralHue', 300, props.theme);
+  const backgroundColor = reactTheming.getColorV8('neutralHue', props.isLight ? 100 : 1000, props.theme);
+  const foregroundColor = props.isLight ? props.theme.colors.foreground : reactTheming.getColorV8('neutralHue', 300, props.theme);
   return styled.css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledCodeBlock = styled__default.default.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -154,7 +154,7 @@ StyledCodeBlock.defaultProps = {
 const COMPONENT_ID$5 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -184,15 +184,15 @@ const colorStyles$1 = props => {
         hue = 'lemon';
         break;
     }
-    backgroundColor = reactTheming.getColor(hue, 400, props.theme, 0.2);
+    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.getColor(hue, 600, props.theme, 0.1);
+    backgroundColor = reactTheming.getColorV8(hue, 600, props.theme, 0.1);
   }
   return styled.css(["background-color:", ";"], backgroundColor);
 };
 const lineNumberStyles = props => {
-  const color = reactTheming.getColor('neutralHue', props.isLight ? 600 : 500, props.theme);
+  const color = reactTheming.getColorV8('neutralHue', props.isLight ? 600 : 500, props.theme);
   let padding;
   if (props.language && props.language === 'diff') {
     padding = 0;
@@ -217,7 +217,7 @@ const lineNumberStyles = props => {
 };
 const StyledCodeBlockLine = styled__default.default(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -252,7 +252,7 @@ const colorStyles = props => {
 };
 const StyledCodeBlockToken = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -264,7 +264,7 @@ StyledCodeBlockToken.defaultProps = {
 const COMPONENT_ID$2 = 'typography.ellipsis';
 const StyledEllipsis = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -288,7 +288,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__default.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -304,7 +304,7 @@ const listStyles = props => {
 const ORDERED_ID$1 = 'typography.ordered_list';
 const StyledOrderedList = styled__default.default.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -315,7 +315,7 @@ StyledOrderedList.defaultProps = {
 const UNORDERED_ID$1 = 'typography.unordered_list';
 const StyledUnorderedList = styled__default.default.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -335,7 +335,7 @@ const listItemStyles = props => {
 const ORDERED_ID = 'typography.ordered_list_item';
 const StyledOrderedListItem = styled__default.default(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -348,7 +348,7 @@ StyledOrderedListItem.defaultProps = {
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled__default.default(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -362,7 +362,7 @@ StyledUnorderedListItem.defaultProps = {
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled__default.default.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"

package/dist/index.esm.js

@@ -8,7 +8,7 @@
 import React, { Children, forwardRef, useRef, useMemo, createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { hideVisually, math } from 'polished';
 import Highlight, { Prism } from 'prism-react-renderer';
 import { useScrollRegion } from '@zendeskgarden/container-scrollregion';
@@ -74,13 +74,13 @@ const fontStyles = props => {
   }
   if (props.hue) {
     const shade = props.hue === 'yellow' ? 700 : 600;
-    color = getColor(props.hue, shade, props.theme);
+    color = getColorV8(props.hue, shade, props.theme);
   }
   return css(["line-height:", ";color:", ";font-family:", ";font-size:", ";font-weight:", ";direction:", ";"], lineHeight, color, fontFamily, fontSize, fontWeight, direction);
 };
 const StyledFont = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$9,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledFont",
   componentId: "sc-1iildbo-0"
@@ -93,11 +93,11 @@ StyledFont.defaultProps = {
 const COMPONENT_ID$8 = 'typography.blockquote';
 const StyledBlockquote = styled.blockquote.attrs({
   'data-garden-id': COMPONENT_ID$8,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledBlockquote",
   componentId: "sc-1tt3ye0-0"
-})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => getColor('neutralHue', 400, props.theme), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";& + &,p + &{margin-top:", ";}", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.shadowWidths.sm, props => getColorV8('neutralHue', 400, props.theme), props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 4, props => props.theme.rtl ? 'rtl' : 'ltr', props => props.theme.lineHeights[THEME_SIZES[props.size]], props => retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledBlockquote.defaultProps = {
   theme: DEFAULT_THEME
 };
@@ -105,14 +105,14 @@ StyledBlockquote.defaultProps = {
 const COMPONENT_ID$7 = 'typography.code';
 const colorStyles$3 = props => {
   const hue = props.hue || 'neutralHue';
-  const backgroundColor = getColor(hue, 200, props.theme);
+  const backgroundColor = getColorV8(hue, 200, props.theme);
   const shade = hue === 'yellow' ? 800 : 700;
-  const foregroundColor = getColor(hue, shade, props.theme);
+  const foregroundColor = getColorV8(hue, shade, props.theme);
   return css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
 };
 const StyledCode = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$7,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   as: 'code'
 }).withConfig({
   displayName: "StyledCode",
@@ -127,13 +127,13 @@ StyledCode.defaultProps = {
 
 const COMPONENT_ID$6 = 'typography.codeblock';
 const colorStyles$2 = props => {
-  const backgroundColor = getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
-  const foregroundColor = props.isLight ? props.theme.colors.foreground : getColor('neutralHue', 300, props.theme);
+  const backgroundColor = getColorV8('neutralHue', props.isLight ? 100 : 1000, props.theme);
+  const foregroundColor = props.isLight ? props.theme.colors.foreground : getColorV8('neutralHue', 300, props.theme);
   return css(["background-color:", ";color:", ";"], backgroundColor, foregroundColor);
 };
 const StyledCodeBlock = styled.pre.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCodeBlock",
   componentId: "sc-5wky57-0"
@@ -145,7 +145,7 @@ StyledCodeBlock.defaultProps = {
 const COMPONENT_ID$5 = 'typography.codeblock_container';
 const StyledCodeBlockContainer = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCodeBlockContainer",
   componentId: "sc-14zgbfw-0"
@@ -175,15 +175,15 @@ const colorStyles$1 = props => {
         hue = 'lemon';
         break;
     }
-    backgroundColor = getColor(hue, 400, props.theme, 0.2);
+    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 = getColor(hue, 600, props.theme, 0.1);
+    backgroundColor = getColorV8(hue, 600, props.theme, 0.1);
   }
   return css(["background-color:", ";"], backgroundColor);
 };
 const lineNumberStyles = props => {
-  const color = getColor('neutralHue', props.isLight ? 600 : 500, props.theme);
+  const color = getColorV8('neutralHue', props.isLight ? 600 : 500, props.theme);
   let padding;
   if (props.language && props.language === 'diff') {
     padding = 0;
@@ -208,7 +208,7 @@ const lineNumberStyles = props => {
 };
 const StyledCodeBlockLine = styled(StyledFont).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   as: 'code',
   isMonospace: true
 }).withConfig({
@@ -243,7 +243,7 @@ const colorStyles = props => {
 };
 const StyledCodeBlockToken = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledCodeBlockToken",
   componentId: "sc-1hkshdq-0"
@@ -255,7 +255,7 @@ StyledCodeBlockToken.defaultProps = {
 const COMPONENT_ID$2 = 'typography.ellipsis';
 const StyledEllipsis = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledEllipsis",
   componentId: "sc-1u4uqmy-0"
@@ -279,7 +279,7 @@ const StyledIcon = styled(_ref => {
   return React.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-10rfb5b-0"
@@ -295,7 +295,7 @@ const listStyles = props => {
 const ORDERED_ID$1 = 'typography.ordered_list';
 const StyledOrderedList = styled.ol.attrs({
   'data-garden-id': ORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledList__StyledOrderedList",
   componentId: "sc-jdbsfi-0"
@@ -306,7 +306,7 @@ StyledOrderedList.defaultProps = {
 const UNORDERED_ID$1 = 'typography.unordered_list';
 const StyledUnorderedList = styled.ul.attrs({
   'data-garden-id': UNORDERED_ID$1,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledList__StyledUnorderedList",
   componentId: "sc-jdbsfi-1"
@@ -326,7 +326,7 @@ const listItemStyles = props => {
 const ORDERED_ID = 'typography.ordered_list_item';
 const StyledOrderedListItem = styled(StyledFont).attrs({
   'data-garden-id': ORDERED_ID,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledOrderedListItem",
@@ -339,7 +339,7 @@ StyledOrderedListItem.defaultProps = {
 const UNORDERED_ID = 'typography.unordered_list_item';
 const StyledUnorderedListItem = styled(StyledFont).attrs({
   'data-garden-id': UNORDERED_ID,
-  'data-garden-version': '9.0.0-next.3',
+  'data-garden-version': '9.0.0-next.5',
   as: 'li'
 }).withConfig({
   displayName: "StyledListItem__StyledUnorderedListItem",
@@ -353,7 +353,7 @@ StyledUnorderedListItem.defaultProps = {
 const COMPONENT_ID = 'typography.paragraph';
 const StyledParagraph = styled.p.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledParagraph",
   componentId: "sc-zkuftz-0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-typography",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.5",
   "description": "Components relating to typography in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -30,10 +30,10 @@
     "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.3"
+    "@zendeskgarden/react-theming": "^9.0.0-next.5"
   },
   "keywords": [
     "components",
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
+  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
 }