@zendeskgarden/react-breadcrumbs 9.0.0-next.16 → 9.0.0-next.18

package/dist/esm/elements/Breadcrumb.js

@@ -22,7 +22,7 @@ const Breadcrumb = forwardRef((props, ref) => {
     const isLastItem = index === totalChildren - 1;
     if (isLastItem) {
       return React__default.createElement(StyledBreadcrumbItem, {
-        isCurrent: true
+        $isCurrent: true
       }, cloneElement(child, getCurrentPageProps()));
     }
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledBreadcrumbItem, null, child), React__default.createElement(StyledCenteredBreadcrumbItem, null, React__default.createElement(StyledChevronIcon, null)));

package/dist/esm/styled/StyledBreadcrumb.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'breadcrumbs.list';
 const StyledBreadcrumb = styled.ol.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledBreadcrumb",
   componentId: "sc-11jrinn-0"

package/dist/esm/styled/StyledBreadcrumbItem.js

@@ -5,31 +5,41 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'breadcrumbs.item';
-const linkStyles = _ref => {
+const sizeStyles = _ref => {
   let {
-    isCurrent
+    theme
   } = _ref;
-  return css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
+  return css(["line-height:", ";white-space:nowrap;& > :link,& > :visited{white-space:inherit;}"], getLineHeight(theme.space.base * 5, theme.fontSizes.md));
+};
+const colorStyles = _ref2 => {
+  let {
+    $isCurrent,
+    theme
+  } = _ref2;
+  return css(["color:", ";", ""], $isCurrent ? getColor({
+    variable: 'foreground.subtle',
+    theme
+  }) : 'inherit', $isCurrent && `
       & > :link,
       & > :visited,
       & > :link:hover,
       & > :visited:hover,
       & > :link:focus,
       & > :visited:focus {
-        color: inherit;
+        color: inherit; /* [1] */
       }
     `);
 };
 const StyledBreadcrumbItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledBreadcrumbItem",
   componentId: "sc-r0suq7-0"
-})(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? getColorV8(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["font-size:inherit;", " ", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledBreadcrumbItem.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledChevronIcon.js

@@ -7,7 +7,7 @@
 import React__default from 'react';
 import styled from 'styled-components';
 import { em } from 'polished';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import SvgChevronRightStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg.js';
 
 const StyledChevronIcon = styled(_ref => {
@@ -23,7 +23,10 @@ const StyledChevronIcon = styled(_ref => {
 }).withConfig({
   displayName: "StyledChevronIcon",
   componentId: "sc-9r9qrm-0"
-})(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => em(props.theme.space.base, props.theme.fontSizes.md), props => getColorV8('neutralHue', 600, props.theme));
+})(["transform:", ";margin:0 ", ";color:", ";"], p => p.theme.rtl && `rotate(180deg);`, p => em(p.theme.space.base, p.theme.fontSizes.md), p => getColor({
+  variable: 'foreground.subtle',
+  theme: p.theme
+}));
 StyledChevronIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/index.cjs.js

@@ -38,7 +38,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 const COMPONENT_ID$1 = 'breadcrumbs.list';
 const StyledBreadcrumb = styled__default.default.ol.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledBreadcrumb",
   componentId: "sc-11jrinn-0"
@@ -76,34 +76,47 @@ const StyledChevronIcon = styled__default.default(_ref => {
 }).withConfig({
   displayName: "StyledChevronIcon",
   componentId: "sc-9r9qrm-0"
-})(["transform:", ";margin:0 ", ";color:", ";"], props => props.theme.rtl && `rotate(180deg);`, props => polished.em(props.theme.space.base, props.theme.fontSizes.md), props => reactTheming.getColorV8('neutralHue', 600, props.theme));
+})(["transform:", ";margin:0 ", ";color:", ";"], p => p.theme.rtl && `rotate(180deg);`, p => polished.em(p.theme.space.base, p.theme.fontSizes.md), p => reactTheming.getColor({
+  variable: 'foreground.subtle',
+  theme: p.theme
+}));
 StyledChevronIcon.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
 const COMPONENT_ID = 'breadcrumbs.item';
-const linkStyles = _ref => {
+const sizeStyles = _ref => {
   let {
-    isCurrent
+    theme
   } = _ref;
-  return styled.css(["& > :link,& > :visited{white-space:inherit;}", ""], isCurrent && `
+  return styled.css(["line-height:", ";white-space:nowrap;& > :link,& > :visited{white-space:inherit;}"], reactTheming.getLineHeight(theme.space.base * 5, theme.fontSizes.md));
+};
+const colorStyles = _ref2 => {
+  let {
+    $isCurrent,
+    theme
+  } = _ref2;
+  return styled.css(["color:", ";", ""], $isCurrent ? reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  }) : 'inherit', $isCurrent && `
       & > :link,
       & > :visited,
       & > :link:hover,
       & > :visited:hover,
       & > :link:focus,
       & > :visited:focus {
-        color: inherit;
+        color: inherit; /* [1] */
       }
     `);
 };
 const StyledBreadcrumbItem = styled__default.default.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.16'
+  'data-garden-version': '9.0.0-next.18'
 }).withConfig({
   displayName: "StyledBreadcrumbItem",
   componentId: "sc-r0suq7-0"
-})(["line-height:", ";white-space:nowrap;color:", ";font-size:inherit;", ";", ";"], props => reactTheming.getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => props.isCurrent ? reactTheming.getColorV8(props.theme.colors.neutralHue, 600) : 'inherit', linkStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["font-size:inherit;", " ", ";", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledBreadcrumbItem.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -128,7 +141,7 @@ const Breadcrumb = React.forwardRef((props, ref) => {
     const isLastItem = index === totalChildren - 1;
     if (isLastItem) {
       return React__namespace.default.createElement(StyledBreadcrumbItem, {
-        isCurrent: true
+        $isCurrent: true
       }, React.cloneElement(child, getCurrentPageProps()));
     }
     return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledBreadcrumbItem, null, child), React__namespace.default.createElement(StyledCenteredBreadcrumbItem, null, React__namespace.default.createElement(StyledChevronIcon, null)));

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

@@ -4,10 +4,11 @@
  * Use of this source code is governed under the Apache License, Version 2.0
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
+import { DefaultTheme } from 'styled-components';
 export interface IStyledBreadcrumbItemProps {
-    isCurrent?: boolean;
+    $isCurrent?: boolean;
 }
-export declare const StyledBreadcrumbItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+export declare const StyledBreadcrumbItem: import("styled-components").StyledComponent<"li", DefaultTheme, {
     'data-garden-id': string;
     'data-garden-version': string;
 } & IStyledBreadcrumbItemProps, "data-garden-id" | "data-garden-version">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-breadcrumbs",
-  "version": "9.0.0-next.16",
+  "version": "9.0.0-next.18",
   "description": "Components relating to breadcrumbs in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -32,7 +32,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.16",
+    "@zendeskgarden/react-theming": "^9.0.0-next.18",
     "@zendeskgarden/svg-icons": "7.1.1"
   },
   "keywords": [
@@ -45,5 +45,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "52321498a76a68e6152aca0b44949e79ed9b2b3b"
+  "gitHead": "31680e30a7c9b1f2bd1f8f711f540dfaaf4ee4ec"
 }