@zendeskgarden/react-grid 8.74.2 → 8.75.0

package/dist/index.cjs.js

@@ -53,7 +53,7 @@ const ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
 const COMPONENT_ID$6 = 'grid.col';
 const colorStyles$4 = props => {
-  const backgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.1);
+  const backgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.1);
   return styled.css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
@@ -103,7 +103,7 @@ const sizeStyles$4 = props => {
 };
 const StyledCol = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -115,7 +115,7 @@ StyledCol.defaultProps = {
 
 const COMPONENT_ID$5 = 'grid.grid';
 const colorStyles$3 = props => {
-  const borderColor = reactTheming.getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
+  const borderColor = reactTheming.getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
   const borderWidth = polished.math(`${props.theme.borderWidths.sm} * 2`);
   return styled.css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
@@ -125,7 +125,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGrid = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -137,7 +137,7 @@ StyledGrid.defaultProps = {
 
 const COMPONENT_ID$4 = 'grid.row';
 const colorStyles$2 = props => {
-  const borderColor = reactTheming.getColor(props.theme.palette.mint, 600, props.theme, 0.5);
+  const borderColor = reactTheming.getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
   const borderWidth = props.theme.borderWidths.sm;
   return styled.css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
@@ -167,7 +167,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRow = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -180,7 +180,7 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -192,7 +192,7 @@ StyledPane.defaultProps = {
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -203,9 +203,9 @@ StyledPaneContent.defaultProps = {
 
 const COMPONENT_ID$1 = 'pane.splitter';
 const colorStyles$1 = props => {
-  const color = reactTheming.getColor('neutralHue', 300, props.theme);
-  const hoverColor = reactTheming.getColor('primaryHue', 600, props.theme);
-  const activeColor = reactTheming.getColor('primaryHue', 800, props.theme);
+  const color = reactTheming.getColorV8('neutralHue', 300, props.theme);
+  const hoverColor = reactTheming.getColorV8('primaryHue', 600, props.theme);
+  const activeColor = reactTheming.getColorV8('primaryHue', 800, props.theme);
   return styled.css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, reactTheming.focusStyles({
     theme: props.theme,
     hue: hoverColor,
@@ -278,7 +278,7 @@ const sizeStyles$1 = props => {
 };
 const StyledPaneSplitter = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -306,7 +306,7 @@ const colorStyles = _ref => {
   let {
     theme
   } = _ref;
-  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColor('chromeHue', 600, theme, 0.15));
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, reactTheming.getColorV8('chromeHue', 600, theme, 0.15));
   return styled.css(["box-shadow:", ";", ""], boxShadow, reactTheming.focusStyles({
     theme,
     boxShadow
@@ -343,14 +343,14 @@ const sizeStyles = props => {
 };
 const StyledPaneSplitterButton = styled__default.default(reactButtons.ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";", ":hover &,", ":focus-visible &,", "[data-garden-focus-visible] &,", "{opacity:1;}", ";"], sizeStyles, transformStyles, props => props.theme.colors.background, colorStyles, StyledPaneSplitter, StyledPaneSplitter, StyledPaneSplitter, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";", ":hover &,", ":focus-visible &,", "[data-garden-focus-visible] &,", "{opacity:1;}", ";"], sizeStyles, transformStyles, props => reactTheming.getColorV8('background', 600 , props.theme), colorStyles, StyledPaneSplitter, StyledPaneSplitter, StyledPaneSplitter, reactTheming.SELECTOR_FOCUS_VISIBLE, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 StyledPaneSplitterButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import React, { createContext, useContext, useMemo, useState, useCallback, forwa
 import PropTypes from 'prop-types';
 import styled, { css, ThemeContext } from 'styled-components';
 import { math, stripUnit } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument, useText } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, SELECTOR_FOCUS_VISIBLE, focusStyles, useDocument, useText } from '@zendeskgarden/react-theming';
 import { ChevronButton } from '@zendeskgarden/react-buttons';
 import { useId, composeEventHandlers } from '@zendeskgarden/container-utilities';
 import useResizeObserver from 'use-resize-observer';
@@ -43,7 +43,7 @@ const ORIENTATION = ['top', 'bottom', 'start', 'end'];
 
 const COMPONENT_ID$6 = 'grid.col';
 const colorStyles$4 = props => {
-  const backgroundColor = getColor('primaryHue', 600, props.theme, 0.1);
+  const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1);
   return css(["background-clip:content-box;background-color:", ";"], backgroundColor);
 };
 const flexStyles$1 = (size, alignSelf, textAlign, offset, order, props) => {
@@ -93,7 +93,7 @@ const sizeStyles$4 = props => {
 };
 const StyledCol = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledCol",
   componentId: "sc-inuw62-0"
@@ -105,7 +105,7 @@ StyledCol.defaultProps = {
 
 const COMPONENT_ID$5 = 'grid.grid';
 const colorStyles$3 = props => {
-  const borderColor = getColor(props.theme.palette.crimson, 400, props.theme, 0.5);
+  const borderColor = getColorV8(props.theme.palette.crimson, 400, props.theme, 0.5);
   const borderWidth = math(`${props.theme.borderWidths.sm} * 2`);
   return css(["box-shadow:-", " 0 0 0 ", ",", " 0 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
@@ -115,7 +115,7 @@ const sizeStyles$3 = props => {
 };
 const StyledGrid = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-oxgg5i-0"
@@ -127,7 +127,7 @@ StyledGrid.defaultProps = {
 
 const COMPONENT_ID$4 = 'grid.row';
 const colorStyles$2 = props => {
-  const borderColor = getColor(props.theme.palette.mint, 600, props.theme, 0.5);
+  const borderColor = getColorV8(props.theme.palette.mint, 600, props.theme, 0.5);
   const borderWidth = props.theme.borderWidths.sm;
   return css(["box-shadow:inset 0 ", " 0 0 ", ",inset 0 -", " 0 0 ", ";"], borderWidth, borderColor, borderWidth, borderColor);
 };
@@ -157,7 +157,7 @@ const sizeStyles$2 = props => {
 };
 const StyledRow = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledRow",
   componentId: "sc-xjsdg1-0"
@@ -170,7 +170,7 @@ StyledRow.defaultProps = {
 const COMPONENT_ID$3 = 'pane';
 const StyledPane = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledPane",
   componentId: "sc-1ltjst7-0"
@@ -182,7 +182,7 @@ StyledPane.defaultProps = {
 const COMPONENT_ID$2 = 'pane.content';
 const StyledPaneContent = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledPaneContent",
   componentId: "sc-1b38mbh-0"
@@ -193,9 +193,9 @@ StyledPaneContent.defaultProps = {
 
 const COMPONENT_ID$1 = 'pane.splitter';
 const colorStyles$1 = props => {
-  const color = getColor('neutralHue', 300, props.theme);
-  const hoverColor = getColor('primaryHue', 600, props.theme);
-  const activeColor = getColor('primaryHue', 800, props.theme);
+  const color = getColorV8('neutralHue', 300, props.theme);
+  const hoverColor = getColorV8('primaryHue', 600, props.theme);
+  const activeColor = getColorV8('primaryHue', 800, props.theme);
   return css(["&::before{background-color:", ";}&:hover::before{background-color:", ";}", " &:active::before{background-color:", ";}"], color, props.isHovered && hoverColor, focusStyles({
     theme: props.theme,
     hue: hoverColor,
@@ -268,7 +268,7 @@ const sizeStyles$1 = props => {
 };
 const StyledPaneSplitter = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledPaneSplitter",
   componentId: "sc-jylemn-0"
@@ -296,7 +296,7 @@ const colorStyles = _ref => {
   let {
     theme
   } = _ref;
-  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColor('chromeHue', 600, theme, 0.15));
+  const boxShadow = theme.shadows.lg(`${theme.space.base}px`, `${theme.space.base * 2}px`, getColorV8('chromeHue', 600, theme, 0.15));
   return css(["box-shadow:", ";", ""], boxShadow, focusStyles({
     theme,
     boxShadow
@@ -333,14 +333,14 @@ const sizeStyles = props => {
 };
 const StyledPaneSplitterButton = styled(ChevronButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   isBasic: true,
   isPill: true,
   size: 'small'
 }).withConfig({
   displayName: "StyledPaneSplitterButton",
   componentId: "sc-zh032e-0"
-})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";", ":hover &,", ":focus-visible &,", "[data-garden-focus-visible] &,", "{opacity:1;}", ";"], sizeStyles, transformStyles, props => props.theme.colors.background, colorStyles, StyledPaneSplitter, StyledPaneSplitter, StyledPaneSplitter, SELECTOR_FOCUS_VISIBLE, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,opacity 0.25s ease-in-out 0.1s;opacity:0;", ";", ";&::before{position:absolute;z-index:-1;background-color:", ";width:100%;height:100%;content:'';}", ";", ":hover &,", ":focus-visible &,", "[data-garden-focus-visible] &,", "{opacity:1;}", ";"], sizeStyles, transformStyles, props => getColorV8('background', 600 , props.theme), colorStyles, StyledPaneSplitter, StyledPaneSplitter, StyledPaneSplitter, SELECTOR_FOCUS_VISIBLE, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledPaneSplitterButton.defaultProps = {
   theme: DEFAULT_THEME
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-grid",
-  "version": "8.74.2",
+  "version": "8.75.0",
   "description": "Components relating to layout grids in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@zendeskgarden/container-splitter": "^2.0.3",
     "@zendeskgarden/container-utilities": "^2.0.0",
-    "@zendeskgarden/react-buttons": "^8.74.2",
-    "@zendeskgarden/react-tooltips": "^8.74.2",
+    "@zendeskgarden/react-buttons": "^8.75.0",
+    "@zendeskgarden/react-tooltips": "^8.75.0",
     "polished": "^4.0.0",
     "prop-types": "^15.5.7",
     "react-merge-refs": "^1.1.0",
@@ -37,7 +37,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.74.2"
+    "@zendeskgarden/react-theming": "^8.75.0"
   },
   "keywords": [
     "components",
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "be0e20f0b016a227ed1ab6b5b13cb04971969d3b"
+  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
 }