diff --git a/package-lock.json b/package-lock.json index 118b7575c87..f09591a66c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32503,6 +32503,48 @@ "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/body-parser": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz", + "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==", + "extraneous": true, + "dependencies": { + "@types/connect": "*", + "@types/node": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/connect": { + "version": "3.4.35", + "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", + "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==", + "extraneous": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/express": { + "version": "4.17.13", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz", + "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==", + "extraneous": true, + "dependencies": { + "@types/body-parser": "*", + "@types/express-serve-static-core": "^4.17.18", + "@types/qs": "*", + "@types/serve-static": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/express-serve-static-core": { + "version": "4.17.28", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz", + "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==", + "extraneous": true, + "dependencies": { + "@types/node": "*", + "@types/qs": "*", + "@types/range-parser": "*" + } + }, "node_modules/netlify-cli/node_modules/@types/http-cache-semantics": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.2.tgz", @@ -32542,6 +32584,12 @@ "@types/istanbul-lib-report": "*" } }, + "node_modules/netlify-cli/node_modules/@types/mime": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", + "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/@types/node": { "version": "20.9.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.0.tgz", @@ -32557,12 +32605,34 @@ "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", + "extraneous": true + }, + "node_modules/netlify-cli/node_modules/@types/range-parser": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", + "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/@types/retry": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/serve-static": { + "version": "1.13.10", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz", + "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==", + "extraneous": true, + "dependencies": { + "@types/mime": "^1", + "@types/node": "*" + } + }, "node_modules/netlify-cli/node_modules/@types/yargs-parser": { "version": "20.2.1", "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz", @@ -33018,6 +33088,22 @@ "node": ">= 6.0.0" } }, + "node_modules/netlify-cli/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "extraneous": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/netlify-cli/node_modules/ajv-formats": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", @@ -36399,6 +36485,12 @@ "node": ">=8.6.0" } }, + "node_modules/netlify-cli/node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/fast-json-stringify": { "version": "5.7.0", "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.7.0.tgz", @@ -38907,6 +38999,12 @@ "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", "dev": true }, + "node_modules/netlify-cli/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/jsonc-parser": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", diff --git a/packages/.template/src/styled/Styled{{capitalize component}}.ts b/packages/.template/src/styled/Styled{{capitalize component}}.ts index 66ee8399e5d..780a96b4770 100644 --- a/packages/.template/src/styled/Styled{{capitalize component}}.ts +++ b/packages/.template/src/styled/Styled{{capitalize component}}.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = '{{pluralize (lowercase component)}}.{{lowercase component}}'; @@ -15,12 +15,12 @@ export interface IStyled{{capitalize component}}Props extends ThemeProps { - const backgroundColor = getColor('primaryHue', 600, props.theme, 0.08); - const borderColor = getColor('primaryHue', 600, props.theme); + const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08); + const borderColor = getColorV8('primaryHue', 600, props.theme); const foregroundColor = props.theme.colors.foreground; - const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2); + const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2); const focusBoxShadow = props.theme.shadows.md( - getColor('primaryHue', 600, props.theme, 0.35) as string + getColorV8('primaryHue', 600, props.theme, 0.35) as string ); return css` diff --git a/packages/accordions/src/styled/accordion/StyledButton.spec.tsx b/packages/accordions/src/styled/accordion/StyledButton.spec.tsx index f1e840808f0..b5e29129d06 100644 --- a/packages/accordions/src/styled/accordion/StyledButton.spec.tsx +++ b/packages/accordions/src/styled/accordion/StyledButton.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledButton } from './StyledButton'; describe('StyledButton', () => { @@ -37,7 +37,7 @@ describe('StyledButton', () => { expect(container.firstChild).toHaveStyleRule( 'color', - getColor('primaryHue', 600, DEFAULT_THEME) + getColorV8('primaryHue', 600, DEFAULT_THEME) ); expect(container.firstChild).toHaveStyleRule('cursor', 'pointer', { diff --git a/packages/accordions/src/styled/accordion/StyledButton.ts b/packages/accordions/src/styled/accordion/StyledButton.ts index daa69b1e4c1..9eb10806f11 100644 --- a/packages/accordions/src/styled/accordion/StyledButton.ts +++ b/packages/accordions/src/styled/accordion/StyledButton.ts @@ -8,7 +8,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { getLineHeight, - getColor, + getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; @@ -27,7 +27,7 @@ const colorStyles = (props: ThemeProps & IStyledButton) => { let color = props.theme.colors.foreground; if (showColor && props.isHovered) { - color = getColor('primaryHue', 600, props.theme)!; + color = getColorV8('primaryHue', 600, props.theme)!; } return css` diff --git a/packages/accordions/src/styled/accordion/StyledPanel.spec.tsx b/packages/accordions/src/styled/accordion/StyledPanel.spec.tsx index b62423a6449..a4f7d9b830c 100644 --- a/packages/accordions/src/styled/accordion/StyledPanel.spec.tsx +++ b/packages/accordions/src/styled/accordion/StyledPanel.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledPanel } from './StyledPanel'; describe('StyledPanel', () => { @@ -19,7 +19,7 @@ describe('StyledPanel', () => { expect(container.firstChild).toHaveStyleRule('border-bottom', `${DEFAULT_THEME.borders.sm}`); expect(container.firstChild).toHaveStyleRule( 'border-bottom-color', - `${getColor('neutralHue', 300, DEFAULT_THEME)}` + `${getColorV8('neutralHue', 300, DEFAULT_THEME)}` ); expect(container.firstChild).toHaveStyleRule( 'transition', diff --git a/packages/accordions/src/styled/accordion/StyledPanel.ts b/packages/accordions/src/styled/accordion/StyledPanel.ts index fb7e88f3f02..186c7b5018b 100644 --- a/packages/accordions/src/styled/accordion/StyledPanel.ts +++ b/packages/accordions/src/styled/accordion/StyledPanel.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { - getColor, + getColorV8, getLineHeight, retrieveComponentStyles, DEFAULT_THEME @@ -27,7 +27,7 @@ const colorStyles = (props: IStyledPanel & ThemeProps) => { const { theme, isBare } = props; return css` - border-bottom-color: ${isBare ? 'transparent' : getColor('neutralHue', 300, theme)}; + border-bottom-color: ${isBare ? 'transparent' : getColorV8('neutralHue', 300, theme)}; `; }; diff --git a/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx b/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx index 663d5d8c0ae..4826a28b180 100644 --- a/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx +++ b/packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledRotateIcon } from './StyledRotateIcon'; describe('StyledRotateIcon', () => { @@ -22,7 +22,7 @@ describe('StyledRotateIcon', () => { expect(container.firstChild).toHaveStyleRule('padding', '20px'); expect(container.firstChild).toHaveStyleRule( 'color', - getColor('neutralHue', 600, DEFAULT_THEME) + getColorV8('neutralHue', 600, DEFAULT_THEME) ); }); @@ -65,7 +65,7 @@ describe('StyledRotateIcon', () => { expect(container.firstChild).toHaveStyleRule( 'color', - getColor('primaryHue', 600, DEFAULT_THEME) + getColorV8('primaryHue', 600, DEFAULT_THEME) ); }); }); diff --git a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts index 63932d195d0..1772567ea37 100644 --- a/packages/accordions/src/styled/accordion/StyledRotateIcon.ts +++ b/packages/accordions/src/styled/accordion/StyledRotateIcon.ts @@ -7,7 +7,7 @@ import { cloneElement, Children } from 'react'; import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'accordions.rotate_icon'; @@ -17,10 +17,10 @@ interface IStyledRotateIcon { const colorStyles = (props: ThemeProps & any) => { const showColor = props.isCollapsible || !props.isRotated; - let color = getColor('neutralHue', 600, props.theme); + let color = getColorV8('neutralHue', 600, props.theme); if (showColor && props.isHovered) { - color = getColor('primaryHue', 600, props.theme); + color = getColorV8('primaryHue', 600, props.theme); } return css` diff --git a/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx b/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx index 237e83d3362..2877b93f7ff 100644 --- a/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx +++ b/packages/accordions/src/styled/stepper/StyledIcon.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; import { StyledIcon } from './StyledIcon'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; describe('StyledIcon', () => { it('renders default styles', () => { @@ -17,7 +17,7 @@ describe('StyledIcon', () => { expect(container.firstChild).toHaveStyleRule('color', DEFAULT_THEME.colors.foreground); expect(container.firstChild).toHaveStyleRule( 'background', - getColor('neutralHue', 200, DEFAULT_THEME) + getColorV8('neutralHue', 200, DEFAULT_THEME) ); expect(container.firstChild).toHaveStyleRule('margin-right', '12px'); expect(container.firstChild).not.toHaveStyleRule('margin-bottom'); @@ -28,7 +28,7 @@ describe('StyledIcon', () => { expect(container.firstChild).toHaveStyleRule('color', DEFAULT_THEME.colors.background); expect(container.firstChild).toHaveStyleRule( 'background', - getColor('neutralHue', 600, DEFAULT_THEME) + getColorV8('neutralHue', 600, DEFAULT_THEME) ); }); diff --git a/packages/accordions/src/styled/stepper/StyledIcon.ts b/packages/accordions/src/styled/stepper/StyledIcon.ts index f963b7afb7b..12c359bcd62 100644 --- a/packages/accordions/src/styled/stepper/StyledIcon.ts +++ b/packages/accordions/src/styled/stepper/StyledIcon.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { - getColor, + getColorV8, getLineHeight, retrieveComponentStyles, DEFAULT_THEME @@ -49,8 +49,8 @@ const sizeStyles = (props: IStyledIcon & ThemeProps) => { const colorStyles = (props: IStyledIcon & ThemeProps) => { return css` background: ${props.isActive - ? getColor('neutralHue', 600, props.theme) - : getColor('neutralHue', 200, props.theme)}; + ? getColorV8('neutralHue', 600, props.theme) + : getColorV8('neutralHue', 200, props.theme)}; color: ${props.isActive ? props.theme.colors.background : props.theme.colors.foreground}; `; }; diff --git a/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx b/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx index 7525da98af6..cd610e56e91 100644 --- a/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx +++ b/packages/accordions/src/styled/stepper/StyledLabel.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; import { StyledLabel } from './StyledLabel'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; describe('StyledLabel', () => { it('renders default styles', () => { @@ -20,7 +20,7 @@ describe('StyledLabel', () => { expect(container.firstChild).toHaveStyleRule('align-items', 'center'); expect(container.firstChild).toHaveStyleRule( 'color', - getColor('neutralHue', 600, DEFAULT_THEME) + getColorV8('neutralHue', 600, DEFAULT_THEME) ); }); diff --git a/packages/accordions/src/styled/stepper/StyledLabel.ts b/packages/accordions/src/styled/stepper/StyledLabel.ts index f88ce08041a..c6fecfb6935 100644 --- a/packages/accordions/src/styled/stepper/StyledLabel.ts +++ b/packages/accordions/src/styled/stepper/StyledLabel.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { - getColor, + getColorV8, getLineHeight, retrieveComponentStyles, DEFAULT_THEME @@ -32,7 +32,7 @@ export const StyledLabel = styled.div.attrs({ text-align: ${props => props.isHorizontal && 'center'}; line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)}; color: ${props => - props.isActive ? props.theme.colors.foreground : getColor('neutralHue', 600, props.theme)}; + props.isActive ? props.theme.colors.foreground : getColorV8('neutralHue', 600, props.theme)}; font-size: ${props => props.theme.fontSizes.md}; font-weight: ${props => props.isActive && 600}; diff --git a/packages/accordions/src/styled/stepper/StyledLine.ts b/packages/accordions/src/styled/stepper/StyledLine.ts index 477ad2680ea..9876d86ec5d 100644 --- a/packages/accordions/src/styled/stepper/StyledLine.ts +++ b/packages/accordions/src/styled/stepper/StyledLine.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'accordions.step_line'; @@ -21,7 +21,7 @@ export const StyledLine = styled.div.attrs({ left: ${props => `calc(-50% + ${props.theme.space.base * 6}px)`}; flex: 1; border-top: ${props => props.theme.borders.sm}; - border-color: ${props => getColor('neutralHue', 300, props.theme)}; + border-color: ${props => getColorV8('neutralHue', 300, props.theme)}; `; StyledLine.defaultProps = { diff --git a/packages/accordions/src/styled/stepper/StyledStep.ts b/packages/accordions/src/styled/stepper/StyledStep.ts index b39a17d7050..dfe2119763c 100644 --- a/packages/accordions/src/styled/stepper/StyledStep.ts +++ b/packages/accordions/src/styled/stepper/StyledStep.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledContent } from './StyledContent'; import { StyledLine } from './StyledLine'; @@ -35,7 +35,7 @@ export const StyledStep = styled.li.attrs({ &:not(:last-of-type) ${StyledContent} { /* stylelint-disable-next-line property-no-unknown */ border-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.borders.sm}; - border-color: ${props => getColor('neutralHue', 300, props.theme)}; + border-color: ${props => getColorV8('neutralHue', 300, props.theme)}; } ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/accordions/src/styled/timeline/StyledItemIcon.ts b/packages/accordions/src/styled/timeline/StyledItemIcon.ts index 65473cf51bb..b9cc8c85f45 100644 --- a/packages/accordions/src/styled/timeline/StyledItemIcon.ts +++ b/packages/accordions/src/styled/timeline/StyledItemIcon.ts @@ -8,7 +8,7 @@ import { cloneElement, Children } from 'react'; import styled from 'styled-components'; import { math } from 'polished'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'timeline.icon'; @@ -32,7 +32,7 @@ export const StyledItemIcon = styled(({ surfaceColor, children, ...props }) => padding: ${props => props.theme.space.base}px 0; width: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */ height: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */ - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/accordions/src/styled/timeline/StyledSeparator.ts b/packages/accordions/src/styled/timeline/StyledSeparator.ts index 1ca19c18e0e..407cc0773c1 100644 --- a/packages/accordions/src/styled/timeline/StyledSeparator.ts +++ b/packages/accordions/src/styled/timeline/StyledSeparator.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'timeline.content.separator'; @@ -22,7 +22,7 @@ export const StyledSeparator = styled.div.attrs({ &::after { position: absolute; border-left: ${props => - `${props.theme.borders.sm} ${getColor('neutralHue', 600, props.theme)}`}; + `${props.theme.borders.sm} ${getColorV8('neutralHue', 600, props.theme)}`}; height: 100%; content: ''; } diff --git a/packages/avatars/src/elements/Avatar.spec.tsx b/packages/avatars/src/elements/Avatar.spec.tsx index c0a18b6f9f8..5686e3fb8c3 100644 --- a/packages/avatars/src/elements/Avatar.spec.tsx +++ b/packages/avatars/src/elements/Avatar.spec.tsx @@ -7,10 +7,10 @@ import React from 'react'; import { render, cleanup } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { Avatar } from './Avatar'; -const activeBoxShadow = DEFAULT_THEME.shadows.sm(getColor('crimson', 400)!); +const activeBoxShadow = DEFAULT_THEME.shadows.sm(getColorV8('crimson', 400)!); describe('Avatar', () => { afterEach(cleanup); diff --git a/packages/avatars/src/styled/StyledStatusIndicator.spec.tsx b/packages/avatars/src/styled/StyledStatusIndicator.spec.tsx index e3cd2bab025..15e83bb59dd 100644 --- a/packages/avatars/src/styled/StyledStatusIndicator.spec.tsx +++ b/packages/avatars/src/styled/StyledStatusIndicator.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledStatusIndicator } from './StyledStatusIndicator'; @@ -94,7 +94,7 @@ describe('StyledStatusIndicator', () => { describe('away', () => { it('renders away style', () => { const { container } = render(); - const color = getColor('orange', 400); + const color = getColorV8('orange', 400); expect(container.firstChild).toHaveStyleRule('background-color', color); }); @@ -103,7 +103,7 @@ describe('StyledStatusIndicator', () => { describe('transfers', () => { it('renders transfers style', () => { const { container } = render(); - const color = getColor('azure', 400); + const color = getColorV8('azure', 400); expect(container.firstChild).toHaveStyleRule('background-color', color); }); @@ -112,7 +112,7 @@ describe('StyledStatusIndicator', () => { describe('active', () => { it('renders active style', () => { const { container } = render(); - const color = getColor('crimson', 400); + const color = getColorV8('crimson', 400); expect(container.firstChild).toHaveStyleRule('height', '16px'); expect(container.firstChild).toHaveStyleRule('background-color', color); @@ -120,7 +120,7 @@ describe('StyledStatusIndicator', () => { it('renders active style with small size', () => { const { container } = render(); - const color = getColor('crimson', 400); + const color = getColorV8('crimson', 400); expect(container.firstChild).toHaveStyleRule('height', '12px'); expect(container.firstChild).toHaveStyleRule('background-color', color); @@ -130,7 +130,7 @@ describe('StyledStatusIndicator', () => { describe('available', () => { it('renders available style', () => { const { container } = render(); - const color = getColor('mint', 400); + const color = getColorV8('mint', 400); expect(container.firstChild).toHaveStyleRule('background-color', color); }); @@ -139,7 +139,7 @@ describe('StyledStatusIndicator', () => { describe('offline', () => { it('renders offline style', () => { const { container } = render(); - const color = getColor('grey', 500); + const color = getColorV8('grey', 500); expect(container.firstChild).toHaveStyleRule('border-color', `${color}`); }); diff --git a/packages/avatars/src/styled/utility.ts b/packages/avatars/src/styled/utility.ts index 01098ec2214..9e9f3aa07f6 100644 --- a/packages/avatars/src/styled/utility.ts +++ b/packages/avatars/src/styled/utility.ts @@ -5,7 +5,7 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; @@ -26,15 +26,15 @@ export function getStatusColor( ): string { switch (type) { case 'active': - return getColor('crimson', 400, theme)!; + return getColorV8('crimson', 400, theme)!; case 'available': - return getColor('mint', 400, theme)!; + return getColorV8('mint', 400, theme)!; case 'away': - return getColor('orange', 400, theme)!; + return getColorV8('orange', 400, theme)!; case 'transfers': - return getColor('azure', 400, theme)!; + return getColorV8('azure', 400, theme)!; case 'offline': - return getColor('grey', 500, theme)!; + return getColorV8('grey', 500, theme)!; default: return 'transparent'; } diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.spec.tsx b/packages/breadcrumbs/src/elements/Breadcrumb.spec.tsx index 1883e95881b..f9f85280d23 100644 --- a/packages/breadcrumbs/src/elements/Breadcrumb.spec.tsx +++ b/packages/breadcrumbs/src/elements/Breadcrumb.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { Breadcrumb } from './Breadcrumb'; @@ -75,7 +75,7 @@ describe('Breadcrumb', () => { if (i === lastItemIndex) { expect(item.parentElement).toHaveStyleRule( 'color', - getColor(DEFAULT_THEME.colors.neutralHue, 600) + getColorV8(DEFAULT_THEME.colors.neutralHue, 600) ); } else { expect(item.parentElement).toHaveStyleRule('color', 'inherit'); diff --git a/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.spec.tsx b/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.spec.tsx index c3de13c1ff1..afce28b6140 100644 --- a/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.spec.tsx +++ b/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming'; import { StyledBreadcrumbItem } from './StyledBreadcrumbItem'; describe('StyledBreadcrumbItem', () => { @@ -25,7 +25,7 @@ describe('StyledBreadcrumbItem', () => { expect(container.firstChild).toHaveStyleRule( 'color', - getColor(DEFAULT_THEME.colors.neutralHue, 600) + getColorV8(DEFAULT_THEME.colors.neutralHue, 600) ); }); }); diff --git a/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.ts b/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.ts index e64d64f5a34..5821842fbf2 100644 --- a/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.ts +++ b/packages/breadcrumbs/src/styled/StyledBreadcrumbItem.ts @@ -7,7 +7,7 @@ import styled, { css } from 'styled-components'; import { - getColor, + getColorV8, getLineHeight, retrieveComponentStyles, DEFAULT_THEME @@ -48,7 +48,7 @@ export const StyledBreadcrumbItem = styled.li.attrs({ })` line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)}; white-space: nowrap; - color: ${props => (props.isCurrent ? getColor(props.theme.colors.neutralHue, 600) : 'inherit')}; + color: ${props => (props.isCurrent ? getColorV8(props.theme.colors.neutralHue, 600) : 'inherit')}; font-size: inherit; ${linkStyles}; diff --git a/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx b/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx index 7f3d90538f8..59cf928d6b7 100644 --- a/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx +++ b/packages/breadcrumbs/src/styled/StyledChevronIcon.tsx @@ -8,7 +8,7 @@ import React, { HTMLAttributes } from 'react'; import styled, { ThemeProps, DefaultTheme } from 'styled-components'; import { em } from 'polished'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg'; /** @@ -32,7 +32,7 @@ export const StyledChevronIcon = styled(ValidChevronIcon).attrs({ })` transform: ${props => props.theme.rtl && `rotate(180deg);`}; margin: 0 ${props => em(props.theme.space.base, props.theme.fontSizes.md)}; - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; `; StyledChevronIcon.defaultProps = { diff --git a/packages/buttons/src/styled/StyledAnchor.spec.tsx b/packages/buttons/src/styled/StyledAnchor.spec.tsx index 2516934d524..0b5f37c3f67 100644 --- a/packages/buttons/src/styled/StyledAnchor.spec.tsx +++ b/packages/buttons/src/styled/StyledAnchor.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { StyledAnchor } from './StyledAnchor'; describe('StyledAnchor', () => { @@ -26,7 +26,7 @@ describe('StyledAnchor', () => { it('renders danger styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('dangerHue')); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue')); }); it('renders expected RTL direction', () => { diff --git a/packages/buttons/src/styled/StyledButton.spec.tsx b/packages/buttons/src/styled/StyledButton.spec.tsx index 362e3e4794a..98e16812242 100644 --- a/packages/buttons/src/styled/StyledButton.spec.tsx +++ b/packages/buttons/src/styled/StyledButton.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColor, PALETTE } from '@zendeskgarden/react-theming'; +import { getColorV8, PALETTE } from '@zendeskgarden/react-theming'; import { StyledButton } from './StyledButton'; describe('StyledButton', () => { @@ -32,13 +32,13 @@ describe('StyledButton', () => { it('renders danger styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('dangerHue')); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue')); }); it('renders disabled styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('neutralHue')); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('neutralHue')); }); it('renders link styling if provided', () => { @@ -51,7 +51,7 @@ describe('StyledButton', () => { it('renders primary styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', getColor('primaryHue')); + expect(container.firstChild).toHaveStyleRule('background-color', getColorV8('primaryHue')); }); it('renders neutral styling if provided', () => { @@ -69,7 +69,7 @@ describe('StyledButton', () => { it('renders selected styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', getColor('primaryHue')); + expect(container.firstChild).toHaveStyleRule('background-color', getColorV8('primaryHue')); }); it('renders stretched styling if provided', () => { diff --git a/packages/buttons/src/styled/StyledButton.ts b/packages/buttons/src/styled/StyledButton.ts index 2ff76b6d647..59135fbed2e 100644 --- a/packages/buttons/src/styled/StyledButton.ts +++ b/packages/buttons/src/styled/StyledButton.ts @@ -11,7 +11,7 @@ import { DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, focusStyles, - getColor, + getColorV8, getFocusBoxShadow, retrieveComponentStyles } from '@zendeskgarden/react-theming'; @@ -30,7 +30,7 @@ const getBorderRadius = (props: IButtonProps & ThemeProps) => { }; const getDisabledBackgroundColor = (props: IButtonProps & ThemeProps) => { - return getColor('neutralHue', 200, props.theme); + return getColorV8('neutralHue', 200, props.theme); }; export const getHeight = (props: IButtonProps & ThemeProps) => { @@ -65,12 +65,12 @@ const colorStyles = (props: IButtonProps & ThemeProps) => { } const shade = 600; - const baseColor = getColor(hue, shade, props.theme); - const hoverColor = getColor(hue, shade + 100, props.theme); - const activeColor = getColor(hue, shade + 200, props.theme); - const focusColor = getColor('primaryHue', shade, props.theme); + const baseColor = getColorV8(hue, shade, props.theme); + const hoverColor = getColorV8(hue, shade + 100, props.theme); + const activeColor = getColorV8(hue, shade + 200, props.theme); + const focusColor = getColorV8('primaryHue', shade, props.theme); const disabledBackgroundColor = getDisabledBackgroundColor(props); - const disabledForegroundColor = getColor(hue, shade - 200, props.theme); + const disabledForegroundColor = getColorV8(hue, shade - 200, props.theme); if (props.isLink) { retVal = css` @@ -143,7 +143,7 @@ const colorStyles = (props: IButtonProps & ThemeProps) => { `; } else { const borderColor = - props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor; + props.isNeutral && !props.isDanger ? getColorV8('neutralHue', 300, props.theme) : baseColor; const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor; const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor; const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor; @@ -181,14 +181,14 @@ const colorStyles = (props: IButtonProps & ThemeProps) => { } & ${StyledIcon} { - color: ${props.isNeutral && getColor('neutralHue', shade, props.theme)}; + color: ${props.isNeutral && getColorV8('neutralHue', shade, props.theme)}; } /* prettier-ignore */ &:hover ${StyledIcon}, &:focus-visible ${StyledIcon}, &[data-garden-focus-visible] ${StyledIcon} { - color: ${props.isNeutral && getColor('neutralHue', shade + 100, props.theme)}; + color: ${props.isNeutral && getColorV8('neutralHue', shade + 100, props.theme)}; } &:active ${StyledIcon} { @@ -218,7 +218,7 @@ const groupStyles = (props: IButtonProps & ThemeProps) => { const iconMarginDisplacement = isPill && '-2px'; const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props); const borderColor = isBasic ? 'transparent' : 'revert'; - const focusColor = getColor('primaryHue', 600, theme); + const focusColor = getColorV8('primaryHue', 600, theme); const focusBoxShadow = isBasic && !isSelected && diff --git a/packages/buttons/src/styled/StyledIconButton.ts b/packages/buttons/src/styled/StyledIconButton.ts index 0861d27c296..f67f1fd7a03 100644 --- a/packages/buttons/src/styled/StyledIconButton.ts +++ b/packages/buttons/src/styled/StyledIconButton.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { IButtonProps } from '../types'; import { StyledButton, getHeight } from './StyledButton'; import { StyledIcon } from './StyledIcon'; @@ -15,9 +15,9 @@ const COMPONENT_ID = 'buttons.icon_button'; const iconColorStyles = (props: IButtonProps & ThemeProps) => { const shade = 600; - const baseColor = getColor('neutralHue', shade, props.theme); - const hoverColor = getColor('neutralHue', shade + 100, props.theme); - const activeColor = getColor('neutralHue', shade + 200, props.theme); + const baseColor = getColorV8('neutralHue', shade, props.theme); + const hoverColor = getColorV8('neutralHue', shade + 100, props.theme); + const activeColor = getColorV8('neutralHue', shade + 200, props.theme); return css` color: ${baseColor}; diff --git a/packages/chrome/src/elements/Chrome.tsx b/packages/chrome/src/elements/Chrome.tsx index d6291e9589c..203dacde954 100644 --- a/packages/chrome/src/elements/Chrome.tsx +++ b/packages/chrome/src/elements/Chrome.tsx @@ -9,7 +9,7 @@ import React, { useMemo, useEffect, useContext } from 'react'; import PropTypes from 'prop-types'; import { ThemeContext } from 'styled-components'; import { readableColor } from 'polished'; -import { getColor, useDocument } from '@zendeskgarden/react-theming'; +import { getColorV8, useDocument } from '@zendeskgarden/react-theming'; import { IChromeProps } from '../types'; import { ChromeContext } from '../utils/useChromeContext'; import { StyledChrome } from '../styled'; @@ -22,7 +22,7 @@ export const Chrome = React.forwardRef( const theme = useContext(ThemeContext); const isLightMemoized = useMemo(() => { if (hue) { - const backgroundColor = getColor(hue, 600, theme); + const backgroundColor = getColorV8(hue, 600, theme); const LIGHT_COLOR = 'white'; /* prevent this expensive computation on every render */ diff --git a/packages/chrome/src/elements/nav/NavItem.spec.tsx b/packages/chrome/src/elements/nav/NavItem.spec.tsx index 08e77701c2c..49afdfeb3ee 100644 --- a/packages/chrome/src/elements/nav/NavItem.spec.tsx +++ b/packages/chrome/src/elements/nav/NavItem.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { PALETTE, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { PALETTE, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { Chrome } from '../Chrome'; import { NavItem } from './NavItem'; import { Nav } from './Nav'; @@ -130,7 +130,7 @@ describe('NavItem', () => { expect(container.firstChild!.firstChild).toHaveStyleRule( 'background-color', - getColor('chromeHue', 500, DEFAULT_THEME) + getColorV8('chromeHue', 500, DEFAULT_THEME) ); }); diff --git a/packages/chrome/src/elements/subnav/SubNav.spec.tsx b/packages/chrome/src/elements/subnav/SubNav.spec.tsx index 1cbbf049983..f29159da866 100644 --- a/packages/chrome/src/elements/subnav/SubNav.spec.tsx +++ b/packages/chrome/src/elements/subnav/SubNav.spec.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; import { Chrome } from '../Chrome'; import { SubNav } from './SubNav'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; describe('SubNav', () => { it('passes ref to underlying DOM element', () => { @@ -28,7 +28,7 @@ describe('SubNav', () => { ); expect(container.firstChild!.firstChild).toHaveStyle(` - background-color: ${getColor(hue, 700, DEFAULT_THEME)}; + background-color: ${getColorV8(hue, 700, DEFAULT_THEME)}; color: ${DEFAULT_THEME.colors.background}; `); }); @@ -42,7 +42,7 @@ describe('SubNav', () => { ); expect(container.firstChild!.firstChild).toHaveStyle(` - background-color: ${getColor(hue, 500, DEFAULT_THEME)}; + background-color: ${getColorV8(hue, 500, DEFAULT_THEME)}; color: ${DEFAULT_THEME.colors.foreground}; `); }); diff --git a/packages/chrome/src/styled/StyledSkipNav.ts b/packages/chrome/src/styled/StyledSkipNav.ts index 030cce3a838..5dfb84d03fa 100644 --- a/packages/chrome/src/styled/StyledSkipNav.ts +++ b/packages/chrome/src/styled/StyledSkipNav.ts @@ -10,7 +10,7 @@ import { math } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, getLineHeight, focusStyles, SELECTOR_FOCUS_VISIBLE @@ -43,12 +43,12 @@ const animationStyles = () => { }; const colorStyles = (theme: DefaultTheme) => { - const color = getColor('primaryHue', 600, theme); - const borderColor = getColor('neutralHue', 300, theme); + const color = getColorV8('primaryHue', 600, theme); + const borderColor = getColorV8('neutralHue', 300, theme); const boxShadow = theme.shadows.lg( `${theme.space.base * 5}px`, `${theme.space.base * 7}px`, - getColor('chromeHue', 600, theme, 0.15) as string + getColorV8('chromeHue', 600, theme, 0.15) as string ); return css` diff --git a/packages/chrome/src/styled/StyledSkipNavIcon.ts b/packages/chrome/src/styled/StyledSkipNavIcon.ts index d94899f1479..bc693c4ffb0 100644 --- a/packages/chrome/src/styled/StyledSkipNavIcon.ts +++ b/packages/chrome/src/styled/StyledSkipNavIcon.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import LinkIcon from '@zendeskgarden/svg-icons/src/16/link-stroke.svg'; -import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.skipnav_icon'; @@ -28,7 +28,7 @@ export const StyledSkipNavIcon = styled(LinkIcon).attrs({ 'data-garden-version': PACKAGE_VERSION })>` transform: ${props => props.theme.rtl && 'scaleX(-1)'}; - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; ${props => sizeStyles(props.theme)}; diff --git a/packages/chrome/src/styled/body/StyledBody.ts b/packages/chrome/src/styled/body/StyledBody.ts index 4e085391210..d57c21672ce 100644 --- a/packages/chrome/src/styled/body/StyledBody.ts +++ b/packages/chrome/src/styled/body/StyledBody.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.body'; @@ -16,7 +16,7 @@ export const StyledBody = styled.div.attrs({ })` flex: 1; order: 1; - background-color: ${props => getColor('neutralHue', 100, props.theme)}; + background-color: ${props => getColorV8('neutralHue', 100, props.theme)}; min-width: 0; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/chrome/src/styled/body/StyledSidebar.ts b/packages/chrome/src/styled/body/StyledSidebar.ts index 7edf77444fa..de63de58a06 100644 --- a/packages/chrome/src/styled/body/StyledSidebar.ts +++ b/packages/chrome/src/styled/body/StyledSidebar.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.sidebar'; @@ -19,7 +19,7 @@ export const StyledSidebar = styled.aside.attrs({ box-sizing: border-box; /* stylelint-disable-next-line property-no-unknown */ border-${props => (props.theme.rtl ? 'left' : 'right')}: ${props => - `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}`}; + `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`}; width: 330px; overflow: auto; diff --git a/packages/chrome/src/styled/footer/StyledFooter.ts b/packages/chrome/src/styled/footer/StyledFooter.ts index c251e164e4f..fdbc205c92a 100644 --- a/packages/chrome/src/styled/footer/StyledFooter.ts +++ b/packages/chrome/src/styled/footer/StyledFooter.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.footer'; @@ -22,7 +22,7 @@ export const StyledFooter = styled.footer.attrs({ align-items: center; justify-content: flex-end; box-sizing: border-box; - border-top: ${props => `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}`}; + border-top: ${props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`}; background-color: ${props => props.theme.colors.background}; padding: 0 ${props => props.theme.space.base * 9}px; height: ${getFooterHeight}; diff --git a/packages/chrome/src/styled/header/StyledHeader.ts b/packages/chrome/src/styled/header/StyledHeader.ts index e84f55b7948..28f54024121 100644 --- a/packages/chrome/src/styled/header/StyledHeader.ts +++ b/packages/chrome/src/styled/header/StyledHeader.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledLogoHeaderItem } from './StyledLogoHeaderItem'; import { getNavItemHeight } from '../nav/StyledBaseNavItem'; @@ -30,14 +30,14 @@ export const StyledHeader = styled.header.attrs({ justify-content: flex-end; box-sizing: border-box; border-bottom: ${props => - `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}`}; + `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`}; box-shadow: ${props => props.isStandalone && - props.theme.shadows.lg('0', '10px', getColor('chromeHue', 600, props.theme, 0.15)!)}; + props.theme.shadows.lg('0', '10px', getColorV8('chromeHue', 600, props.theme, 0.15)!)}; background-color: ${props => props.theme.colors.background}; padding: 0 ${props => props.theme.space.base}px; height: ${getHeaderHeight}; - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; font-size: ${props => props.theme.fontSizes.md}; ${props => diff --git a/packages/chrome/src/styled/header/StyledHeaderItem.ts b/packages/chrome/src/styled/header/StyledHeaderItem.ts index 7f704b76cf9..0f4494d1b14 100644 --- a/packages/chrome/src/styled/header/StyledHeaderItem.ts +++ b/packages/chrome/src/styled/header/StyledHeaderItem.ts @@ -9,7 +9,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { math } from 'polished'; import { retrieveComponentStyles, - getColor, + getColorV8, focusStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; @@ -65,7 +65,7 @@ export const StyledHeaderItem = styled(StyledBaseHeaderItem as 'button').attrs({ &:hover ${/* sc-selector */ StyledHeaderItemText}, &:active ${/* sc-selector */ StyledHeaderItemIcon}, &:active ${/* sc-selector */ StyledHeaderItemText} { - color: ${props => getColor('chromeHue', 700, props.theme)}; + color: ${props => getColorV8('chromeHue', 700, props.theme)}; } ${imgStyles} diff --git a/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts b/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts index 29bf7b09232..6b1d0075140 100644 --- a/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts +++ b/packages/chrome/src/styled/header/StyledLogoHeaderItem.ts @@ -8,7 +8,7 @@ import styled from 'styled-components'; import { retrieveComponentStyles, - getColor, + getColorV8, PALETTE, DEFAULT_THEME } from '@zendeskgarden/react-theming'; @@ -59,13 +59,13 @@ export const StyledLogoHeaderItem = styled(StyledBaseHeaderItem).attrs({ margin-left: ${props => (props.theme.rtl ? 'auto' : `-${props.theme.space.base}px`)}; /* stylelint-disable-next-line property-no-unknown */ border-${props => (props.theme.rtl ? 'left' : 'right')}: ${props => - `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}`}; + `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}`}; border-radius: 0; padding: 0; width: ${props => getNavWidth(props)}; height: 100%; overflow: hidden; - fill: ${props => getColor('chromeHue', 700, props.theme)}; + fill: ${props => getColorV8('chromeHue', 700, props.theme)}; text-decoration: none; /* [1] */ color: ${props => retrieveProductColor(props)}; /* [1] */ diff --git a/packages/chrome/src/styled/nav/StyledNav.ts b/packages/chrome/src/styled/nav/StyledNav.ts index fc238ce705c..c402e1b5985 100644 --- a/packages/chrome/src/styled/nav/StyledNav.ts +++ b/packages/chrome/src/styled/nav/StyledNav.ts @@ -6,13 +6,13 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.nav'; const colorStyles = (props: IStyledNavProps) => { const shade = props.isDark || props.isLight ? 600 : 700; - const backgroundColor = getColor(props.hue, shade, props.theme); + const backgroundColor = getColorV8(props.hue, shade, props.theme); const foregroundColor = props.isLight ? props.theme.palette.black : props.theme.palette.white; return css` diff --git a/packages/chrome/src/styled/nav/StyledNavItem.ts b/packages/chrome/src/styled/nav/StyledNavItem.ts index 538d8f4a383..769f59b2347 100644 --- a/packages/chrome/src/styled/nav/StyledNavItem.ts +++ b/packages/chrome/src/styled/nav/StyledNavItem.ts @@ -9,7 +9,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math, rgba } from 'polished'; import { retrieveComponentStyles, - getColor, + getColorV8, focusStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE @@ -37,7 +37,7 @@ const colorStyles = (props: IStyledNavItemProps) => { } else if (isDark) { currentColor = rgba(LIGHT, 0.4); } else { - currentColor = getColor(hue, 500, theme); + currentColor = getColorV8(hue, 500, theme); } } else { hoverColor = rgba(isLight ? LIGHT : DARK, 0.1); diff --git a/packages/chrome/src/styled/sheet/StyledSheet.ts b/packages/chrome/src/styled/sheet/StyledSheet.ts index 9904e5788ac..6eefb8b3481 100644 --- a/packages/chrome/src/styled/sheet/StyledSheet.ts +++ b/packages/chrome/src/styled/sheet/StyledSheet.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { ISheetProps } from '../../types'; const COMPONENT_ID = 'chrome.sheet'; @@ -23,7 +23,7 @@ const borderStyle = ({ placement, isOpen }: IStyledSheetProps & ThemeProps) => { - const borderColor = isOpen ? getColor('neutralHue', 300, theme) : 'transparent'; + const borderColor = isOpen ? getColorV8('neutralHue', 300, theme) : 'transparent'; const borderSides = ['-left', '-right']; let borderSide = ''; diff --git a/packages/chrome/src/styled/sheet/StyledSheetClose.ts b/packages/chrome/src/styled/sheet/StyledSheetClose.ts index 49ac43934c6..43c00d9a7ff 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetClose.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetClose.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { - getColor, + getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles @@ -27,11 +27,11 @@ const colorStyles = (props: ThemeProps) => { return css` background-color: transparent; - color: ${getColor(foregroundColor, 600, props.theme)}; + color: ${getColorV8(foregroundColor, 600, props.theme)}; &:hover { - background-color: ${getColor(backgroundColor, 600, props.theme, 0.08)}; - color: ${getColor(foregroundColor, 700, props.theme)}; + background-color: ${getColorV8(backgroundColor, 600, props.theme, 0.08)}; + color: ${getColorV8(foregroundColor, 700, props.theme)}; } ${focusStyles({ @@ -43,8 +43,8 @@ const colorStyles = (props: ThemeProps) => { transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; - background-color: ${getColor(backgroundColor, 600, props.theme, 0.2)}; - color: ${getColor(foregroundColor, 800, props.theme)}; + background-color: ${getColorV8(backgroundColor, 600, props.theme, 0.2)}; + color: ${getColorV8(foregroundColor, 800, props.theme)}; } `; }; diff --git a/packages/chrome/src/styled/sheet/StyledSheetDescription.ts b/packages/chrome/src/styled/sheet/StyledSheetDescription.ts index 57306274b83..5c578efac76 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetDescription.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetDescription.ts @@ -9,7 +9,7 @@ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; import { retrieveComponentStyles, getLineHeight, - getColor, + getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; @@ -20,7 +20,7 @@ export const StyledSheetDescription = styled.div.attrs({ 'data-garden-version': PACKAGE_VERSION })>` line-height: ${props => getLineHeight(props.theme.space.base * 4, props.theme.fontSizes.md)}; - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/chrome/src/styled/sheet/StyledSheetFooter.ts b/packages/chrome/src/styled/sheet/StyledSheetFooter.ts index 5c7639467e3..0bdf169fc3a 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetFooter.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetFooter.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'chrome.sheet_footer'; @@ -23,7 +23,8 @@ export const StyledSheetFooter = styled.footer.attrs({ flex-flow: row wrap; align-items: center; justify-content: ${props => (props.isCompact ? 'center' : 'flex-end')}; - border-top: ${props => `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}}`}; + border-top: ${props => + `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`}; padding: ${props => props.theme.space.base * (props.isCompact ? 2.5 : 5)}px; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/chrome/src/styled/sheet/StyledSheetHeader.spec.tsx b/packages/chrome/src/styled/sheet/StyledSheetHeader.spec.tsx index c8e8465c3d2..467b898fc77 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetHeader.spec.tsx +++ b/packages/chrome/src/styled/sheet/StyledSheetHeader.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { renderRtl, render, screen } from 'garden-test-utils'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { StyledSheetHeader } from './StyledSheetHeader'; @@ -17,7 +17,7 @@ describe('StyledSheetHeader', () => { expect(screen.getByText('Header')).toHaveStyleRule( 'border-bottom', - `${DEFAULT_THEME.borders.sm} ${getColor('neutralHue', 300, DEFAULT_THEME)}` + `${DEFAULT_THEME.borders.sm} ${getColorV8('neutralHue', 300, DEFAULT_THEME)}` ); }); diff --git a/packages/chrome/src/styled/sheet/StyledSheetHeader.ts b/packages/chrome/src/styled/sheet/StyledSheetHeader.ts index 5d79091f68f..ea40d1351eb 100644 --- a/packages/chrome/src/styled/sheet/StyledSheetHeader.ts +++ b/packages/chrome/src/styled/sheet/StyledSheetHeader.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { BASE_MULTIPLIERS } from './StyledSheetClose'; @@ -25,7 +25,7 @@ export const StyledSheetHeader = styled.header.attrs({ 'data-garden-version': PACKAGE_VERSION })>` border-bottom: ${props => - `${props.theme.borders.sm} ${getColor('neutralHue', 300, props.theme)}}`}; + `${props.theme.borders.sm} ${getColorV8('neutralHue', 300, props.theme)}}`}; padding: ${props => props.theme.space.base * 5}px; ${props => props.isCloseButtonPresent && diff --git a/packages/chrome/src/styled/subnav/StyledSubNav.ts b/packages/chrome/src/styled/subnav/StyledSubNav.ts index 160f4938da0..4c0f99d86c3 100644 --- a/packages/chrome/src/styled/subnav/StyledSubNav.ts +++ b/packages/chrome/src/styled/subnav/StyledSubNav.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledSubNavItem } from './StyledSubNavItem'; const COMPONENT_ID = 'chrome.subnav'; @@ -20,7 +20,7 @@ const colorStyles = (props: IStyledSubNavProps) => { shade = props.isDark ? 700 : 800; } - const backgroundColor = getColor(props.hue, shade, props.theme); + const backgroundColor = getColorV8(props.hue, shade, props.theme); const foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white; return css` diff --git a/packages/colorpickers/src/styled/Colorpicker/StyledColorPicker.ts b/packages/colorpickers/src/styled/Colorpicker/StyledColorPicker.ts index 95ad3d8f268..91f4fc9546f 100644 --- a/packages/colorpickers/src/styled/Colorpicker/StyledColorPicker.ts +++ b/packages/colorpickers/src/styled/Colorpicker/StyledColorPicker.ts @@ -14,7 +14,7 @@ interface IStyledColorPickerProps { isOpaque?: boolean; } -export const getColorPickerWidth = (props: IStyledColorPickerProps) => { +export const getColorV8PickerWidth = (props: IStyledColorPickerProps) => { return props.isOpaque ? 268 : 312; }; @@ -22,8 +22,8 @@ export const StyledColorPicker = styled.div.attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - width: ${getColorPickerWidth}px; - min-width: ${getColorPickerWidth}px; + width: ${getColorV8PickerWidth}px; + min-width: ${getColorV8PickerWidth}px; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/colorpickers/src/styled/Colorpicker/StyledColorWellThumb.ts b/packages/colorpickers/src/styled/Colorpicker/StyledColorWellThumb.ts index 3edabf6ae65..0e3d7a768ae 100644 --- a/packages/colorpickers/src/styled/Colorpicker/StyledColorWellThumb.ts +++ b/packages/colorpickers/src/styled/Colorpicker/StyledColorWellThumb.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme } from 'styled-components'; import { stripUnit } from 'polished'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb'; @@ -46,7 +46,7 @@ export const StyledColorWellThumb = styled.div.attrs sizeStyles(props.theme)}; diff --git a/packages/colorpickers/src/styled/common/StyledRange.ts b/packages/colorpickers/src/styled/common/StyledRange.ts index c803675b6b8..03bc1308485 100644 --- a/packages/colorpickers/src/styled/common/StyledRange.ts +++ b/packages/colorpickers/src/styled/common/StyledRange.ts @@ -8,7 +8,7 @@ import { Range } from '@zendeskgarden/react-forms'; import styled, { ThemeProps, DefaultTheme } from 'styled-components'; import { math, stripUnit } from 'polished'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; export interface IStyledRangeProps { isOpaque?: boolean; @@ -61,11 +61,11 @@ const trackLowerStyles = (styles: string, modifier = '') => { }; const colorStyles = (props: IStyledRangeProps & ThemeProps) => { - const thumbBackgroundColor = getColor('neutralHue', 100, props.theme); + const thumbBackgroundColor = getColorV8('neutralHue', 100, props.theme); const thumbBorderColor = thumbBackgroundColor; - const thumbActiveBackgroundColor = getColor('neutralHue', 200, props.theme); - const thumbActiveBorderColor = getColor('primaryHue', 600, props.theme); - const thumbFocusBorderColor = getColor('primaryHue', 400, props.theme); + const thumbActiveBackgroundColor = getColorV8('neutralHue', 200, props.theme); + const thumbActiveBorderColor = getColorV8('primaryHue', 600, props.theme); + const thumbFocusBorderColor = getColorV8('primaryHue', 400, props.theme); const thumbHoverBackgroundColor = thumbActiveBackgroundColor; const thumbHoverBorderColor = thumbHoverBackgroundColor; diff --git a/packages/colorpickers/src/styled/common/checkeredBackground.ts b/packages/colorpickers/src/styled/common/checkeredBackground.ts index 262c31ddd7c..5b4811e08b2 100644 --- a/packages/colorpickers/src/styled/common/checkeredBackground.ts +++ b/packages/colorpickers/src/styled/common/checkeredBackground.ts @@ -6,7 +6,7 @@ */ import { DefaultTheme } from 'styled-components'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; export const checkeredBackground = ( theme: DefaultTheme, @@ -14,7 +14,7 @@ export const checkeredBackground = ( positionY = 0, repeat = 'repeat' ) => { - const color = getColor('neutralHue', 400, theme); + const color = getColorV8('neutralHue', 400, theme); const dimensions = `${size}px ${size}px`; const positionX1 = theme.rtl ? '100%' : '0'; const positionX2 = theme.rtl ? `calc(100% - ${size / 2}px)` : `${size / 2}px`; diff --git a/packages/datepickers/src/styled/StyledDay.ts b/packages/datepickers/src/styled/StyledDay.ts index 8e5ac40c691..f2c92128c45 100644 --- a/packages/datepickers/src/styled/StyledDay.ts +++ b/packages/datepickers/src/styled/StyledDay.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; interface IStyledDayProps extends ThemeProps { isPreviousMonth?: boolean; @@ -24,17 +24,17 @@ const retrieveStyledDayColors = ({ theme }: IStyledDayProps) => { let backgroundColor = 'inherit'; - let color = getColor('primaryHue', 600, theme); + let color = getColorV8('primaryHue', 600, theme); if (isSelected && !isDisabled) { - backgroundColor = getColor('primaryHue', 600, theme)!; + backgroundColor = getColorV8('primaryHue', 600, theme)!; color = theme.colors.background; } else if (isDisabled) { - color = getColor('neutralHue', 400, theme); + color = getColorV8('neutralHue', 400, theme); } else if (isToday) { color = 'inherit'; } else if (isPreviousMonth) { - color = getColor('neutralHue', 600, theme); + color = getColorV8('neutralHue', 600, theme); } return css` @@ -45,13 +45,13 @@ const retrieveStyledDayColors = ({ !isDisabled && ` :hover { - background-color: ${getColor('primaryHue', 600, theme, 0.08)}; - color: ${getColor('primaryHue', 800, theme)}; + background-color: ${getColorV8('primaryHue', 600, theme, 0.08)}; + color: ${getColorV8('primaryHue', 800, theme)}; } :active { - background-color: ${getColor('primaryHue', 600, theme, 0.2)}; - color: ${getColor('primaryHue', 800, theme)}; + background-color: ${getColorV8('primaryHue', 600, theme, 0.2)}; + color: ${getColorV8('primaryHue', 800, theme)}; } `} `; diff --git a/packages/datepickers/src/styled/StyledHeaderPaddle.ts b/packages/datepickers/src/styled/StyledHeaderPaddle.ts index 25b845be097..9c9b17025a3 100644 --- a/packages/datepickers/src/styled/StyledHeaderPaddle.ts +++ b/packages/datepickers/src/styled/StyledHeaderPaddle.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const retrieveSizing = ({ isCompact, @@ -27,16 +27,16 @@ const retrieveSizing = ({ const retrieveColor = ({ theme }: ThemeProps) => { return css` :hover { - background-color: ${getColor('primaryHue', 600, theme, 0.08)}; + background-color: ${getColorV8('primaryHue', 600, theme, 0.08)}; color: ${theme.colors.foreground}; } :active { - background-color: ${getColor('primaryHue', 600, theme, 0.2)}; + background-color: ${getColorV8('primaryHue', 600, theme, 0.2)}; color: ${theme.colors.foreground}; } - color: ${getColor('neutralHue', 600, theme)}; + color: ${getColorV8('neutralHue', 600, theme)}; `; }; diff --git a/packages/datepickers/src/styled/StyledHighlight.ts b/packages/datepickers/src/styled/StyledHighlight.ts index ed71c054689..28469c034ba 100644 --- a/packages/datepickers/src/styled/StyledHighlight.ts +++ b/packages/datepickers/src/styled/StyledHighlight.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, css, DefaultTheme } from 'styled-components'; -import { getColor, DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'datepickers.highlight'; @@ -40,7 +40,7 @@ const retrieveColor = ({ theme }: IStyledHighlightProps & ThemeProps) => { return css` - background-color: ${isHighlighted && getColor('primaryHue', 600, theme, 0.08)}; + background-color: ${isHighlighted && getColorV8('primaryHue', 600, theme, 0.08)}; `; }; diff --git a/packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx b/packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx index f7628a7617f..4b446ad041b 100644 --- a/packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx +++ b/packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { rgba } from 'polished'; import { render, renderRtl } from 'garden-test-utils'; import { Dropzone } from './Dropzone'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; describe('Dropzone', () => { it('passes ref to underlying DOM element', () => { @@ -156,20 +156,20 @@ describe('Dropzone', () => { }); const STATES = ['default', 'danger', 'disabled']; - const dangerColor = getColor('dangerHue', 600, DEFAULT_THEME); - const dangerDarkColor = getColor('dangerHue', 800, DEFAULT_THEME); - const dangerBgColor = rgba(getColor('dangerHue', 600, DEFAULT_THEME) as string, 0.08); - const primaryColor = getColor('primaryHue', 600, DEFAULT_THEME); - const primaryDarkColor = getColor('primaryHue', 800, DEFAULT_THEME); - const primaryBgColor = rgba(getColor('primaryHue', 600, DEFAULT_THEME) as string, 0.08); - const neutralColor = getColor('neutralHue', 600, DEFAULT_THEME); + const dangerColor = getColorV8('dangerHue', 600, DEFAULT_THEME); + const dangerDarkColor = getColorV8('dangerHue', 800, DEFAULT_THEME); + const dangerBgColor = rgba(getColorV8('dangerHue', 600, DEFAULT_THEME) as string, 0.08); + const primaryColor = getColorV8('primaryHue', 600, DEFAULT_THEME); + const primaryDarkColor = getColorV8('primaryHue', 800, DEFAULT_THEME); + const primaryBgColor = rgba(getColorV8('primaryHue', 600, DEFAULT_THEME) as string, 0.08); + const neutralColor = getColorV8('neutralHue', 600, DEFAULT_THEME); const StateMap: Record = { disabled: { base: ` - background-color: ${getColor('neutralHue', 200, DEFAULT_THEME)}; - color: ${getColor('neutralHue', 400, DEFAULT_THEME)}; - border-color: ${getColor('neutralHue', 300, DEFAULT_THEME)}; + background-color: ${getColorV8('neutralHue', 200, DEFAULT_THEME)}; + color: ${getColorV8('neutralHue', 400, DEFAULT_THEME)}; + border-color: ${getColorV8('neutralHue', 300, DEFAULT_THEME)}; ` }, default: { diff --git a/packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts b/packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts index 4f4f930914d..ee18542721b 100644 --- a/packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts +++ b/packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'draggable_list.drop_indicator'; @@ -16,8 +16,8 @@ export interface IStyledDropIndicatorProps extends ThemeProps { const colorStyles = (props: IStyledDropIndicatorProps) => { const { theme } = props; - const backgroundColor = getColor('primaryHue', 600, theme); - const color = getColor('primaryHue', 600, theme); + const backgroundColor = getColorV8('primaryHue', 600, theme); + const color = getColorV8('primaryHue', 600, theme); return css` box-shadow: ${`0 0 0 ${theme.borderWidths.sm} ${color}`}; diff --git a/packages/drag-drop/src/styled/draggable/StyledDraggable.spec.tsx b/packages/drag-drop/src/styled/draggable/StyledDraggable.spec.tsx index ece5c7ae0a7..7687e051491 100644 --- a/packages/drag-drop/src/styled/draggable/StyledDraggable.spec.tsx +++ b/packages/drag-drop/src/styled/draggable/StyledDraggable.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { render, fireEvent } from 'garden-test-utils'; import { StyledDraggable, getDragShadow } from './StyledDraggable'; @@ -67,7 +67,7 @@ describe('StyledDraggable', () => { expect(draggable).toHaveStyleRule( 'background-color', - getColor('primaryHue', 600, DEFAULT_THEME, 0.08), + getColorV8('primaryHue', 600, DEFAULT_THEME, 0.08), { modifier: ':hover' } ); }); @@ -114,11 +114,11 @@ describe('StyledDraggable', () => { const { container } = render(); expect(container.firstChild).toHaveStyle( - `background-color: ${getColor('neutralHue', 200, DEFAULT_THEME)}` + `background-color: ${getColorV8('neutralHue', 200, DEFAULT_THEME)}` ); expect(container.firstChild).toHaveStyleRule( 'color', - getColor('neutralHue', 400, DEFAULT_THEME) + getColorV8('neutralHue', 400, DEFAULT_THEME) ); }); @@ -126,7 +126,7 @@ describe('StyledDraggable', () => { const { container } = render(); expect(container.firstChild).toHaveStyle( - `background-color: ${getColor('neutralHue', 800, DEFAULT_THEME, 0.1)}` + `background-color: ${getColorV8('neutralHue', 800, DEFAULT_THEME, 0.1)}` ); expect(container.firstChild).toHaveStyleRule('visibility', 'hidden', { modifier: '> *' }); }); diff --git a/packages/drag-drop/src/styled/draggable/StyledDraggable.ts b/packages/drag-drop/src/styled/draggable/StyledDraggable.ts index 5b769004d18..23a34a6d988 100644 --- a/packages/drag-drop/src/styled/draggable/StyledDraggable.ts +++ b/packages/drag-drop/src/styled/draggable/StyledDraggable.ts @@ -10,7 +10,7 @@ import { rgba } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, IGardenTheme, getLineHeight, focusStyles @@ -32,7 +32,7 @@ export function getDragShadow(theme: IGardenTheme) { const { space, shadows } = theme; const offsetY = `${space.base * 5}px`; const blurRadius = `${space.base * 7}px`; - const color = getColor('neutralHue', 600, theme, 0.35) as string; + const color = getColorV8('neutralHue', 600, theme, 0.35) as string; return shadows.lg(offsetY, blurRadius, color); } @@ -40,10 +40,10 @@ export function getDragShadow(theme: IGardenTheme) { const colorStyles = (props: IStyledDraggableProps) => { const { isBare, isGrabbed, isDisabled, isPlaceholder, focusInset, theme } = props; - const baseColor = getColor('primaryHue', 600, theme); + const baseColor = getColorV8('primaryHue', 600, theme); const dragShadow = getDragShadow(theme); const baseBgColor = theme.colors.background; - const disabledColor = getColor('neutralHue', 400, theme); + const disabledColor = getColorV8('neutralHue', 400, theme); let color; let hoverBackgroundColor; @@ -52,13 +52,13 @@ const colorStyles = (props: IStyledDraggableProps) => { let backgroundColor = baseBgColor; if (isDisabled) { - backgroundColor = getColor('neutralHue', 200, theme)!; + backgroundColor = getColorV8('neutralHue', 200, theme)!; color = disabledColor; } else if (isPlaceholder) { - backgroundColor = getColor('neutralHue', 800, theme, 0.1)!; + backgroundColor = getColorV8('neutralHue', 800, theme, 0.1)!; } else { color = theme.colors.foreground; - borderColor = isBare ? 'transparent' : (getColor('neutralHue', 300, theme) as string); + borderColor = isBare ? 'transparent' : (getColorV8('neutralHue', 300, theme) as string); hoverBackgroundColor = isGrabbed ? baseBgColor : rgba(baseColor as string, 0.08); boxShadow = dragShadow; } diff --git a/packages/drag-drop/src/styled/draggable/StyledGrip.ts b/packages/drag-drop/src/styled/draggable/StyledGrip.ts index ba5a21259cb..89f924b5632 100644 --- a/packages/drag-drop/src/styled/draggable/StyledGrip.ts +++ b/packages/drag-drop/src/styled/draggable/StyledGrip.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'draggable.grip'; @@ -26,7 +26,7 @@ export const StyledGrip = styled.div.attrs({ /* prettier-ignore */ transition: color 0.1s ease-in-out; box-sizing: border-box; - color: ${p => getColor('neutralHue', 600, p.theme)}; + color: ${p => getColorV8('neutralHue', 600, p.theme)}; ${sizeStyles} diff --git a/packages/drag-drop/src/styled/dropzone/StyledDropzone.ts b/packages/drag-drop/src/styled/dropzone/StyledDropzone.ts index 55793c7083d..78f091ae66c 100644 --- a/packages/drag-drop/src/styled/dropzone/StyledDropzone.ts +++ b/packages/drag-drop/src/styled/dropzone/StyledDropzone.ts @@ -7,7 +7,7 @@ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; import { rgba, math } from 'polished'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropzone'; @@ -25,19 +25,19 @@ const colorStyles = (props: IStyledDropzoneProps) => { const { isDanger, isDisabled, isActive, isHighlighted, theme } = props; const hue = isDanger ? 'dangerHue' : 'primaryHue'; - const baseColor = getColor(hue, 600, theme); - const neutralColor = getColor('neutralHue', 600, theme); + const baseColor = getColorV8(hue, 600, theme); + const neutralColor = getColorV8('neutralHue', 600, theme); let backgroundColor = 'transparent'; let borderColor = neutralColor; let color = neutralColor; if (isDisabled) { - backgroundColor = getColor('neutralHue', 200, theme) as string; - borderColor = getColor('neutralHue', 300, theme); - color = getColor('neutralHue', 400, theme); + backgroundColor = getColorV8('neutralHue', 200, theme) as string; + borderColor = getColorV8('neutralHue', 300, theme); + color = getColorV8('neutralHue', 400, theme); } else if (isActive || isHighlighted) { - color = isHighlighted ? getColor(hue, 800, theme) : baseColor; + color = isHighlighted ? getColorV8(hue, 800, theme) : baseColor; backgroundColor = rgba(baseColor as string, 0.08); borderColor = baseColor; } else if (isDanger) { diff --git a/packages/dropdowns.next/demo/~patterns/stories/ListboxStory.tsx b/packages/dropdowns.next/demo/~patterns/stories/ListboxStory.tsx index 2c18c173779..c48812a3611 100644 --- a/packages/dropdowns.next/demo/~patterns/stories/ListboxStory.tsx +++ b/packages/dropdowns.next/demo/~patterns/stories/ListboxStory.tsx @@ -9,7 +9,7 @@ import React, { useRef } from 'react'; import { Story } from '@storybook/react'; import styled from 'styled-components'; import { Combobox, Field, Label, Option } from '@zendeskgarden/react-dropdowns.next'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { Paragraph } from '@zendeskgarden/react-typography'; interface IArgs { @@ -20,7 +20,7 @@ export const StyledContainer = styled.div` position: relative; border: ${p => p.theme.borders.sm}; border-radius: ${p => p.theme.borderRadii.md}; - border-color: ${p => getColor('neutralHue', 300, p.theme)}; + border-color: ${p => getColorV8('neutralHue', 300, p.theme)}; padding: ${p => p.theme.space.md}; max-height: 300px; overflow: clip; diff --git a/packages/dropdowns.next/src/views/combobox/StyledInput.ts b/packages/dropdowns.next/src/views/combobox/StyledInput.ts index 1f695c8c2b2..363f6a18942 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledInput.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledInput.ts @@ -10,7 +10,7 @@ import { hideVisually, math } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, getLineHeight } from '@zendeskgarden/react-theming'; @@ -24,7 +24,7 @@ interface IStyledInputProps extends ThemeProps { } const colorStyles = (props: IStyledInputProps) => { - const placeholderColor = getColor('neutralHue', 400, props.theme); + const placeholderColor = getColorV8('neutralHue', 400, props.theme); return css` background-color: inherit; diff --git a/packages/dropdowns.next/src/views/combobox/StyledInputIcon.ts b/packages/dropdowns.next/src/views/combobox/StyledInputIcon.ts index 0f9c8651fa4..a6f7c150f31 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledInputIcon.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledInputIcon.ts @@ -8,7 +8,7 @@ import { Children, cloneElement } from 'react'; import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { getHeight as getInputHeight } from './StyledInput'; import { StyledTrigger } from './StyledTrigger'; @@ -23,9 +23,9 @@ interface IStyledInputIconProps extends ThemeProps { } const colorStyles = (props: IStyledInputIconProps) => { - const color = getColor('neutralHue', 600, props.theme); - const focusColor = getColor('neutralHue', 700, props.theme); - const disabledColor = getColor('neutralHue', 400, props.theme); + const color = getColorV8('neutralHue', 600, props.theme); + const focusColor = getColorV8('neutralHue', 700, props.theme); + const disabledColor = getColorV8('neutralHue', 400, props.theme); return css` color: ${props.isLabelHovered ? focusColor : color}; diff --git a/packages/dropdowns.next/src/views/combobox/StyledListboxSeparator.ts b/packages/dropdowns.next/src/views/combobox/StyledListboxSeparator.ts index ab3856a10fb..be10fbe1d7c 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledListboxSeparator.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledListboxSeparator.ts @@ -6,12 +6,12 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.combobox.separator'; const colorStyles = (props: ThemeProps) => { - const backgroundColor = getColor('neutralHue', 200, props.theme); + const backgroundColor = getColorV8('neutralHue', 200, props.theme); return css` background-color: ${backgroundColor}; diff --git a/packages/dropdowns.next/src/views/combobox/StyledOption.ts b/packages/dropdowns.next/src/views/combobox/StyledOption.ts index 9fce4ab5df8..27f042d82aa 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledOption.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledOption.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { hideVisually, math } from 'polished'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { OptionType } from '../../types'; const COMPONENT_ID = 'dropdowns.combobox.option'; @@ -25,19 +25,19 @@ const colorStyles = (props: IStyledOptionProps) => { if (props.isActive && props.$type !== 'group' && props.$type !== 'header') { const hue = props.$type === 'danger' ? 'dangerHue' : 'primaryHue'; - backgroundColor = getColor(hue, 600, props.theme, 0.08); + backgroundColor = getColorV8(hue, 600, props.theme, 0.08); boxShadow = `inset ${ props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md - } 0 ${getColor(hue, 600, props.theme)}`; + } 0 ${getColorV8(hue, 600, props.theme)}`; } - const disabledForegroundColor = getColor('neutralHue', 400, props.theme); + const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme); let foregroundColor = props.theme.colors.foreground; if (props.$type === 'add') { - foregroundColor = getColor('primaryHue', 600, props.theme)!; + foregroundColor = getColorV8('primaryHue', 600, props.theme)!; } else if (props.$type === 'danger') { - foregroundColor = getColor('dangerHue', 600, props.theme)!; + foregroundColor = getColorV8('dangerHue', 600, props.theme)!; } return css` diff --git a/packages/dropdowns.next/src/views/combobox/StyledOptionMeta.ts b/packages/dropdowns.next/src/views/combobox/StyledOptionMeta.ts index 7908619d6b5..9262efc7de7 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledOptionMeta.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledOptionMeta.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.combobox.option.meta'; @@ -15,7 +15,7 @@ export interface IStyledOptionMetaProps extends ThemeProps { } const colorStyles = (props: IStyledOptionMetaProps) => { - const color = getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme); + const color = getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme); return css` color: ${color}; diff --git a/packages/dropdowns.next/src/views/combobox/StyledOptionTypeIcon.ts b/packages/dropdowns.next/src/views/combobox/StyledOptionTypeIcon.ts index 96bfb78b6fb..e2c8b2b8c1f 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledOptionTypeIcon.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledOptionTypeIcon.ts @@ -8,7 +8,7 @@ import { Children, cloneElement } from 'react'; import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledOption, getMinHeight as getOptionMinHeight } from './StyledOption'; import { OptionType } from '../../types'; @@ -26,9 +26,9 @@ const colorStyles = (props: IStyledOptionTypeIconProps) => { if (props.type === 'add' || props.type === 'danger') { color = 'inherit'; } else if (props.type === 'header' || props.type === 'next' || props.type === 'previous') { - color = getColor('neutralHue', 600, props.theme); + color = getColorV8('neutralHue', 600, props.theme); } else { - color = getColor('primaryHue', 600, props.theme); + color = getColorV8('primaryHue', 600, props.theme); } return css` diff --git a/packages/dropdowns.next/src/views/combobox/StyledTag.ts b/packages/dropdowns.next/src/views/combobox/StyledTag.ts index a3e1edf5fa9..877cc87480f 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledTag.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledTag.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { hideVisually } from 'polished'; -import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming'; import { Tag } from '@zendeskgarden/react-tags'; const COMPONENT_ID = 'dropdowns.combobox.tag'; @@ -17,7 +17,7 @@ export const StyledTag = styled(Tag).attrs({ 'data-garden-version': PACKAGE_VERSION })` &[aria-disabled='true'] { - color: ${props => (props.hue ? undefined : getColor('neutralHue', 400, props.theme))}; + color: ${props => (props.hue ? undefined : getColorV8('neutralHue', 400, props.theme))}; } &[hidden] { diff --git a/packages/dropdowns.next/src/views/combobox/StyledTagsButton.ts b/packages/dropdowns.next/src/views/combobox/StyledTagsButton.ts index c6ff583b838..e2e35d701d2 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledTagsButton.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledTagsButton.ts @@ -6,7 +6,7 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming'; import { StyledValue } from './StyledValue'; const COMPONENT_ID = 'dropdowns.combobox.tags_button'; @@ -16,7 +16,7 @@ interface IStyledTagsButtonProps extends ThemeProps { } const colorStyles = (props: IStyledTagsButtonProps) => { - const color = getColor('primaryHue', 600, props.theme); + const color = getColorV8('primaryHue', 600, props.theme); return css` color: ${color}; diff --git a/packages/dropdowns.next/src/views/combobox/StyledTrigger.ts b/packages/dropdowns.next/src/views/combobox/StyledTrigger.ts index e03107b6006..0987b127a80 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledTrigger.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledTrigger.ts @@ -10,7 +10,7 @@ import { math } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, focusStyles } from '@zendeskgarden/react-theming'; import { Validation } from '../../types'; @@ -49,26 +49,26 @@ const colorStyles = (props: IStyledTriggerProps) => { let focusShade: number | undefined; if (props.validation) { - borderColor = getColor(hue, SHADE, props.theme); + borderColor = getColorV8(hue, SHADE, props.theme); hoverBorderColor = borderColor; if (props.validation === 'warning') { - focusBorderColor = getColor(hue, SHADE + 100, props.theme); + focusBorderColor = getColorV8(hue, SHADE + 100, props.theme); focusShade = SHADE + 100; } else { focusBorderColor = borderColor; } } else { - borderColor = getColor('neutralHue', SHADE - 300, props.theme); - hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + borderColor = getColorV8('neutralHue', SHADE - 300, props.theme); + hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme); focusBorderColor = hoverBorderColor; } const disabledBackgroundColor = props.isBare ? undefined - : getColor('neutralHue', SHADE - 500, props.theme); - const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme); - const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme); + : getColorV8('neutralHue', SHADE - 500, props.theme); + const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme); + const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme); const focusSelector = ` &:focus-within:not([aria-disabled='true']), &:focus-visible diff --git a/packages/dropdowns.next/src/views/combobox/StyledValue.ts b/packages/dropdowns.next/src/views/combobox/StyledValue.ts index 1b042defb3d..fe1d3c71b64 100644 --- a/packages/dropdowns.next/src/views/combobox/StyledValue.ts +++ b/packages/dropdowns.next/src/views/combobox/StyledValue.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { sizeStyles } from './StyledInput'; const COMPONENT_ID = 'dropdowns.combobox.value'; @@ -22,7 +22,7 @@ interface IStyledValueProps extends ThemeProps { } const colorStyles = (props: IStyledValueProps) => { - const foregroundColor = props.isPlaceholder && getColor('neutralHue', 400, props.theme); + const foregroundColor = props.isPlaceholder && getColorV8('neutralHue', 400, props.theme); return css` color: ${foregroundColor}; diff --git a/packages/dropdowns/src/styled/items/StyledAddItem.ts b/packages/dropdowns/src/styled/items/StyledAddItem.ts index 2486e1a0269..d6bc446c44a 100644 --- a/packages/dropdowns/src/styled/items/StyledAddItem.ts +++ b/packages/dropdowns/src/styled/items/StyledAddItem.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledItem } from './StyledItem'; @@ -19,7 +19,7 @@ export const StyledAddItem = styled(StyledItem).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - color: ${props => !props.disabled && getColor('primaryHue', 600, props.theme)}; + color: ${props => !props.disabled && getColorV8('primaryHue', 600, props.theme)}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/dropdowns/src/styled/items/StyledItem.spec.tsx b/packages/dropdowns/src/styled/items/StyledItem.spec.tsx index 6d5d624c834..7f33287141a 100644 --- a/packages/dropdowns/src/styled/items/StyledItem.spec.tsx +++ b/packages/dropdowns/src/styled/items/StyledItem.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledItem } from './StyledItem'; describe('StyledItem', () => { @@ -26,7 +26,7 @@ describe('StyledItem', () => { it('renders danger styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('dangerHue')); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue')); }); it('render danger focus styling if provided', () => { @@ -34,7 +34,7 @@ describe('StyledItem', () => { expect(container.firstChild).toHaveStyleRule( 'background-color', - getColor('dangerHue', 600, DEFAULT_THEME, 0.08) + getColorV8('dangerHue', 600, DEFAULT_THEME, 0.08) ); }); }); diff --git a/packages/dropdowns/src/styled/items/StyledItem.ts b/packages/dropdowns/src/styled/items/StyledItem.ts index c7dffb84cd9..6b605c43812 100644 --- a/packages/dropdowns/src/styled/items/StyledItem.ts +++ b/packages/dropdowns/src/styled/items/StyledItem.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { rgba } from 'polished'; const COMPONENT_ID = 'dropdowns.item'; @@ -27,18 +27,20 @@ export const getItemPaddingVertical = (props: IStyledItemProps & ThemeProps) => { +const getColorV8Styles = (props: IStyledItemProps & ThemeProps) => { let foregroundColor; let backgroundColor; if (props.disabled) { - foregroundColor = getColor('neutralHue', 400, props.theme); + foregroundColor = getColorV8('neutralHue', 400, props.theme); } else if (props.isDanger) { - foregroundColor = getColor('dangerHue', 600, props.theme); + foregroundColor = getColorV8('dangerHue', 600, props.theme); backgroundColor = props.isFocused ? rgba(foregroundColor as string, 0.08) : 'inherit'; } else { foregroundColor = props.theme.colors.foreground; - backgroundColor = props.isFocused ? getColor('primaryHue', 600, props.theme, 0.08) : 'inherit'; + backgroundColor = props.isFocused + ? getColorV8('primaryHue', 600, props.theme, 0.08) + : 'inherit'; } return css` @@ -93,7 +95,7 @@ export const StyledItem = styled.li.attrs(props => ({ text-decoration: none; } - ${props => getColorStyles(props)}; + ${props => getColorV8Styles(props)}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/dropdowns/src/styled/items/StyledItemIcon.ts b/packages/dropdowns/src/styled/items/StyledItemIcon.ts index 42c4aa2601d..dc396e52616 100644 --- a/packages/dropdowns/src/styled/items/StyledItemIcon.ts +++ b/packages/dropdowns/src/styled/items/StyledItemIcon.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { getItemPaddingVertical } from './StyledItem'; const COMPONENT_ID = 'dropdowns.item_icon'; @@ -37,7 +37,7 @@ export const StyledItemIcon = styled.div.attrs({ justify-content: center; transition: opacity 0.1s ease-in-out; opacity: ${props => (props.isVisible ? '1' : '0')}; - color: ${props => (props.isDisabled ? 'inherit' : getColor('primaryHue', 600, props.theme))}; + color: ${props => (props.isDisabled ? 'inherit' : getColorV8('primaryHue', 600, props.theme))}; ${props => getSizeStyles(props)}; diff --git a/packages/dropdowns/src/styled/items/StyledItemMeta.ts b/packages/dropdowns/src/styled/items/StyledItemMeta.ts index 1a3ca37961f..e68855839e1 100644 --- a/packages/dropdowns/src/styled/items/StyledItemMeta.ts +++ b/packages/dropdowns/src/styled/items/StyledItemMeta.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.item_meta'; @@ -24,7 +24,7 @@ export const StyledItemMeta = styled.span.attrs({ })` display: block; line-height: ${props => props.theme.space.base * (props.isCompact ? 3 : 4)}px; - color: ${props => getColor('neutralHue', props.isDisabled ? 400 : 600, props.theme)}; + color: ${props => getColorV8('neutralHue', props.isDisabled ? 400 : 600, props.theme)}; font-size: ${props => props.theme.fontSizes.sm}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/dropdowns/src/styled/items/StyledNextIcon.tsx b/packages/dropdowns/src/styled/items/StyledNextIcon.tsx index e950a4a810e..9483a140ae7 100644 --- a/packages/dropdowns/src/styled/items/StyledNextIcon.tsx +++ b/packages/dropdowns/src/styled/items/StyledNextIcon.tsx @@ -8,7 +8,7 @@ import React, { HTMLAttributes } from 'react'; import styled from 'styled-components'; import NextIconSvg from '@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.next_item_icon'; @@ -26,7 +26,7 @@ const NextIconComponent: React.FC> = ({ className export const StyledNextIcon = styled(NextIconComponent)` transform: ${props => props.theme.rtl && 'rotate(180deg)'}; - color: ${props => (props.isDisabled ? 'inherit' : getColor('neutralHue', 600, props.theme))}; + color: ${props => (props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme))}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/dropdowns/src/styled/items/StyledPreviousIcon.tsx b/packages/dropdowns/src/styled/items/StyledPreviousIcon.tsx index 687e3c290e8..4d2c9ef3a33 100644 --- a/packages/dropdowns/src/styled/items/StyledPreviousIcon.tsx +++ b/packages/dropdowns/src/styled/items/StyledPreviousIcon.tsx @@ -8,7 +8,7 @@ import React, { HTMLAttributes } from 'react'; import styled from 'styled-components'; import PreviousIconSvg from '@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.previous_item_icon'; @@ -26,7 +26,7 @@ const PreviousIconComponent: React.FC> = ({ classN export const StyledPreviousIcon = styled(PreviousIconComponent)` transform: ${props => props.theme.rtl && 'rotate(180deg)'}; - color: ${props => (props.isDisabled ? 'inherit' : getColor('neutralHue', 600, props.theme))}; + color: ${props => (props.isDisabled ? 'inherit' : getColorV8('neutralHue', 600, props.theme))}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/dropdowns/src/styled/items/header/StyledHeaderIcon.ts b/packages/dropdowns/src/styled/items/header/StyledHeaderIcon.ts index 7f6f53dea3f..fbb214771f6 100644 --- a/packages/dropdowns/src/styled/items/header/StyledHeaderIcon.ts +++ b/packages/dropdowns/src/styled/items/header/StyledHeaderIcon.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.header_icon'; @@ -25,7 +25,7 @@ export const StyledHeaderIcon = styled.div.attrs({ align-items: center; justify-content: center; ${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.space.base * 3}px; - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; & > * { width: ${props => props.theme.iconSizes.md}; diff --git a/packages/dropdowns/src/styled/menu/StyledSeparator.ts b/packages/dropdowns/src/styled/menu/StyledSeparator.ts index 814ddab1694..8807a8fe33e 100644 --- a/packages/dropdowns/src/styled/menu/StyledSeparator.ts +++ b/packages/dropdowns/src/styled/menu/StyledSeparator.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropdowns.separator'; @@ -21,7 +21,7 @@ export const StyledSeparator = styled.li.attrs({ display: block; margin: ${props => props.theme.space.base}px 0; border-bottom: ${props => - `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`}; + `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/dropdowns/src/styled/multiselect/StyledMultiselectMoreAnchor.ts b/packages/dropdowns/src/styled/multiselect/StyledMultiselectMoreAnchor.ts index 5d8fd1a14e3..1979bfb7b00 100644 --- a/packages/dropdowns/src/styled/multiselect/StyledMultiselectMoreAnchor.ts +++ b/packages/dropdowns/src/styled/multiselect/StyledMultiselectMoreAnchor.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { - getColor, + getColorV8, getLineHeight, DEFAULT_THEME, retrieveComponentStyles @@ -35,8 +35,8 @@ export const StyledMultiselectMoreAnchor = styled.div.attrs({ white-space: nowrap; color: ${props => props.isDisabled - ? getColor('neutralHue', 400, props.theme) - : getColor('primaryHue', 600, props.theme)}; + ? getColorV8('neutralHue', 400, props.theme) + : getColorV8('primaryHue', 600, props.theme)}; :hover { text-decoration: ${props => !props.isDisabled && 'underline'}; diff --git a/packages/forms/src/elements/FileUpload.spec.tsx b/packages/forms/src/elements/FileUpload.spec.tsx index e469914df02..e1ac86d98fa 100644 --- a/packages/forms/src/elements/FileUpload.spec.tsx +++ b/packages/forms/src/elements/FileUpload.spec.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { rgba } from 'polished'; import { render, renderRtl } from 'garden-test-utils'; import { FileUpload } from './FileUpload'; @@ -34,8 +34,8 @@ describe('FileUpload', () => { it('renders correct styling when isDragging is active', () => { const { container } = render(); - const activeColor = getColor('primaryHue', 800, DEFAULT_THEME); - const activeBackgroundColor = rgba(getColor('primaryHue', 600, DEFAULT_THEME) as string, 0.2); + const activeColor = getColorV8('primaryHue', 800, DEFAULT_THEME); + const activeBackgroundColor = rgba(getColorV8('primaryHue', 600, DEFAULT_THEME) as string, 0.2); expect(container.firstChild).toHaveStyleRule('color', activeColor); expect(container.firstChild).toHaveStyleRule('background-color', activeBackgroundColor); diff --git a/packages/forms/src/elements/MultiThumbRange.spec.tsx b/packages/forms/src/elements/MultiThumbRange.spec.tsx index f11de4ea6cc..ea25eacc396 100644 --- a/packages/forms/src/elements/MultiThumbRange.spec.tsx +++ b/packages/forms/src/elements/MultiThumbRange.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; import { render, renderRtl, fireEvent, createEvent } from 'garden-test-utils'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { KEYS } from '@zendeskgarden/container-utilities'; import { MultiThumbRange } from './MultiThumbRange'; @@ -111,13 +111,13 @@ describe('MultiThumbRange', () => { const label = getByText('MultiThumbRange'); const minThumb = getAllByRole('slider')[0]; - expect(minThumb).toHaveStyleRule('border-color', getColor('blue', 600)); - expect(minThumb).toHaveStyleRule('background-color', getColor('blue', 600)); + expect(minThumb).toHaveStyleRule('border-color', getColorV8('blue', 600)); + expect(minThumb).toHaveStyleRule('background-color', getColorV8('blue', 600)); await user.hover(label); ['border-color', 'background-color'].forEach(color => { - expect(minThumb).toHaveStyleRule(color, getColor('blue', 700), { + expect(minThumb).toHaveStyleRule(color, getColorV8('blue', 700), { modifier: ':hover' }); }); @@ -133,15 +133,15 @@ describe('MultiThumbRange', () => { const label = getByText('MultiThumbRange'); const minThumb = getAllByRole('slider')[0]; - expect(minThumb).toHaveStyleRule('border-color', getColor('blue', 600)); - expect(minThumb).toHaveStyleRule('background-color', getColor('blue', 600)); + expect(minThumb).toHaveStyleRule('border-color', getColorV8('blue', 600)); + expect(minThumb).toHaveStyleRule('background-color', getColorV8('blue', 600)); await user.click(label); - expect(minThumb).toHaveStyleRule('border-color', getColor('blue', 600), { + expect(minThumb).toHaveStyleRule('border-color', getColorV8('blue', 600), { modifier: ':active' }); - expect(minThumb).toHaveStyleRule('background-color', getColor('blue', 700), { + expect(minThumb).toHaveStyleRule('background-color', getColorV8('blue', 700), { modifier: ':active' }); }); diff --git a/packages/forms/src/styled/checkbox/StyledCheckInput.ts b/packages/forms/src/styled/checkbox/StyledCheckInput.ts index 581f679a06d..e1ebd49d7dd 100644 --- a/packages/forms/src/styled/checkbox/StyledCheckInput.ts +++ b/packages/forms/src/styled/checkbox/StyledCheckInput.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledRadioInput } from '../radio/StyledRadioInput'; import { StyledCheckLabel } from './StyledCheckLabel'; @@ -15,11 +15,11 @@ const COMPONENT_ID = 'forms.checkbox'; const colorStyles = (props: ThemeProps) => { const SHADE = 600; - const indeterminateBorderColor = getColor('primaryHue', SHADE, props.theme); + const indeterminateBorderColor = getColorV8('primaryHue', SHADE, props.theme); const indeterminateBackgroundColor = indeterminateBorderColor; - const indeterminateActiveBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const indeterminateActiveBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme); const indeterminateActiveBackgroundColor = indeterminateActiveBorderColor; - const indeterminateDisabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + const indeterminateDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme); return css` &:indeterminate ~ ${StyledCheckLabel}::before { diff --git a/packages/forms/src/styled/common/StyledHint.ts b/packages/forms/src/styled/common/StyledHint.ts index 2c2b1b51ef3..0d38b99562e 100644 --- a/packages/forms/src/styled/common/StyledHint.ts +++ b/packages/forms/src/styled/common/StyledHint.ts @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { - getColor, + getColorV8, getLineHeight, retrieveComponentStyles, DEFAULT_THEME @@ -23,7 +23,7 @@ export const StyledHint = styled.div.attrs(props => ({ display: block; vertical-align: middle; /* support hint inline with input layout */ line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)}; - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; font-size: ${props => props.theme.fontSizes.md}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/forms/src/styled/common/StyledMessage.spec.tsx b/packages/forms/src/styled/common/StyledMessage.spec.tsx index fea7ab22eeb..434289f3ba2 100644 --- a/packages/forms/src/styled/common/StyledMessage.spec.tsx +++ b/packages/forms/src/styled/common/StyledMessage.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { StyledMessage } from './StyledMessage'; import { StyledLabel } from './StyledLabel'; @@ -28,19 +28,19 @@ describe('StyledMessage', () => { it('renders "success" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('successHue', 600)); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('successHue', 600)); }); it('renders "warning" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('warningHue', 700)); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('warningHue', 700)); }); it('renders "error" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('dangerHue', 600)); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('dangerHue', 600)); }); }); diff --git a/packages/forms/src/styled/common/StyledMessage.ts b/packages/forms/src/styled/common/StyledMessage.ts index 6af2663a01c..3622eec8ea2 100644 --- a/packages/forms/src/styled/common/StyledMessage.ts +++ b/packages/forms/src/styled/common/StyledMessage.ts @@ -10,7 +10,7 @@ import { math } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, getLineHeight } from '@zendeskgarden/react-theming'; import { Validation } from '../../types'; @@ -27,13 +27,13 @@ const validationStyles = (props: IStyledMessageProps & ThemeProps) let color; if (props.validation === 'error') { - color = getColor('dangerHue', 600, props.theme); + color = getColorV8('dangerHue', 600, props.theme); } else if (props.validation === 'success') { - color = getColor('successHue', 600, props.theme); + color = getColorV8('successHue', 600, props.theme); } else if (props.validation === 'warning') { - color = getColor('warningHue', 700, props.theme); + color = getColorV8('warningHue', 700, props.theme); } else { - color = getColor('neutralHue', 700, props.theme); + color = getColorV8('neutralHue', 700, props.theme); } return css` diff --git a/packages/forms/src/styled/file-list/StyledFile.ts b/packages/forms/src/styled/file-list/StyledFile.ts index 5e27abf8259..c264c4078da 100644 --- a/packages/forms/src/styled/file-list/StyledFile.ts +++ b/packages/forms/src/styled/file-list/StyledFile.ts @@ -9,7 +9,7 @@ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, getLineHeight, focusStyles } from '@zendeskgarden/react-theming'; @@ -24,16 +24,16 @@ const colorStyles = (props: IStyledFileProps & ThemeProps) => { let foregroundColor; if (props.validation === 'success') { - borderColor = getColor('successHue', 600, props.theme); + borderColor = getColorV8('successHue', 600, props.theme); focusBorderColor = borderColor; foregroundColor = borderColor; } else if (props.validation === 'error') { - borderColor = getColor('dangerHue', 600, props.theme); + borderColor = getColorV8('dangerHue', 600, props.theme); focusBorderColor = borderColor; foregroundColor = borderColor; } else { - borderColor = getColor('neutralHue', 300, props.theme); - focusBorderColor = getColor('primaryHue', 600, props.theme); + borderColor = getColorV8('neutralHue', 300, props.theme); + focusBorderColor = getColorV8('primaryHue', 600, props.theme); foregroundColor = props.theme.colors.foreground; } diff --git a/packages/forms/src/styled/file-list/StyledFileDelete.ts b/packages/forms/src/styled/file-list/StyledFileDelete.ts index 4fdaf80b2c8..d3fe1e6abfc 100644 --- a/packages/forms/src/styled/file-list/StyledFileDelete.ts +++ b/packages/forms/src/styled/file-list/StyledFileDelete.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { StyledFileClose } from './StyledFileClose'; const COMPONENT_ID = 'forms.file.delete'; @@ -15,7 +15,7 @@ export const StyledFileDelete = styled(StyledFileClose).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - color: ${props => getColor('dangerHue', 600, props.theme)}; + color: ${props => getColorV8('dangerHue', 600, props.theme)}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/forms/src/styled/file-upload/StyledFileUpload.ts b/packages/forms/src/styled/file-upload/StyledFileUpload.ts index bec3a4510fd..73bbc9f1182 100644 --- a/packages/forms/src/styled/file-upload/StyledFileUpload.ts +++ b/packages/forms/src/styled/file-upload/StyledFileUpload.ts @@ -10,7 +10,7 @@ import { math, rgba } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, getLineHeight, focusStyles } from '@zendeskgarden/react-theming'; @@ -26,14 +26,14 @@ interface IStyledFileUploadProps { } const colorStyles = (props: ThemeProps & IStyledFileUploadProps) => { - const baseColor = getColor('primaryHue', 600, props.theme); - const hoverColor = getColor('primaryHue', 700, props.theme); - const activeColor = getColor('primaryHue', 800, props.theme); - const disabledBackgroundColor = getColor('neutralHue', 200, props.theme); - const disabledForegroundColor = getColor('neutralHue', 400, props.theme); + const baseColor = getColorV8('primaryHue', 600, props.theme); + const hoverColor = getColorV8('primaryHue', 700, props.theme); + const activeColor = getColorV8('primaryHue', 800, props.theme); + const disabledBackgroundColor = getColorV8('neutralHue', 200, props.theme); + const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme); return css` - border-color: ${props.isDragging ? activeColor : getColor('neutralHue', 600, props.theme)}; + border-color: ${props.isDragging ? activeColor : getColorV8('neutralHue', 600, props.theme)}; /* stylelint-disable-next-line color-function-notation */ background-color: ${props.isDragging && rgba(baseColor as string, 0.2)}; color: ${props.isDragging ? activeColor : baseColor}; diff --git a/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx b/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx index 4c63f296f64..da54866eefc 100644 --- a/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx +++ b/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { StyledRadioInput } from './StyledRadioInput'; import { StyledRadioLabel } from './StyledRadioLabel'; import { StyledMessage } from '../common/StyledMessage'; @@ -32,9 +32,13 @@ describe('StyledRadioInput', () => { it('renders expected checked styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', getColor('primaryHue', 600), { - modifier: `:checked ~ ${StyledRadioLabel}::before` - }); + expect(container.firstChild).toHaveStyleRule( + 'background-color', + getColorV8('primaryHue', 600), + { + modifier: `:checked ~ ${StyledRadioLabel}::before` + } + ); }); it('renders compact styling if provided', () => { @@ -48,9 +52,13 @@ describe('StyledRadioInput', () => { it('renders expected disabled styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', getColor('neutralHue', 200), { - modifier: `:disabled ~ ${StyledRadioLabel}::before` - }); + expect(container.firstChild).toHaveStyleRule( + 'background-color', + getColorV8('neutralHue', 200), + { + modifier: `:disabled ~ ${StyledRadioLabel}::before` + } + ); }); it('renders expected RTL styling', () => { diff --git a/packages/forms/src/styled/radio/StyledRadioInput.ts b/packages/forms/src/styled/radio/StyledRadioInput.ts index c2e2bcac976..0738240abea 100644 --- a/packages/forms/src/styled/radio/StyledRadioInput.ts +++ b/packages/forms/src/styled/radio/StyledRadioInput.ts @@ -8,7 +8,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; import { - getColor, + getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles @@ -21,21 +21,21 @@ const COMPONENT_ID = 'forms.radio'; const colorStyles = (props: ThemeProps) => { const SHADE = 600; - const borderColor = getColor('neutralHue', SHADE - 300, props.theme); + const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme); const backgroundColor = props.theme.colors.background; const iconColor = backgroundColor; - const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08); - const hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08); + const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme); const focusBorderColor = hoverBorderColor; - const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2); + const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2); const activeBorderColor = focusBorderColor; const checkedBorderColor = focusBorderColor; const checkedBackgroundColor = checkedBorderColor; - const checkedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const checkedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme); const checkedHoverBackgroundColor = checkedHoverBorderColor; - const checkedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme); + const checkedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme); const checkedActiveBackgroundColor = checkedActiveBorderColor; - const disabledBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme); return css` & ~ ${StyledRadioLabel}::before { diff --git a/packages/forms/src/styled/range/StyledRangeInput.spec.tsx b/packages/forms/src/styled/range/StyledRangeInput.spec.tsx index ee324788e70..e9724361744 100644 --- a/packages/forms/src/styled/range/StyledRangeInput.spec.tsx +++ b/packages/forms/src/styled/range/StyledRangeInput.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { StyledRangeInput } from './StyledRangeInput'; import { StyledLabel } from '../common/StyledLabel'; import { StyledHint } from '../common/StyledHint'; @@ -30,9 +30,13 @@ describe('StyledRangeInput', () => { it('renders disabled styling as expected', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('background-color', getColor('neutralHue', 300), { - modifier: ':disabled::-webkit-slider-thumb' - }); + expect(container.firstChild).toHaveStyleRule( + 'background-color', + getColorV8('neutralHue', 300), + { + modifier: ':disabled::-webkit-slider-thumb' + } + ); }); it('renders expected RTL styling', () => { diff --git a/packages/forms/src/styled/range/StyledRangeInput.ts b/packages/forms/src/styled/range/StyledRangeInput.ts index 3f89b28c6ee..cf6760debe7 100644 --- a/packages/forms/src/styled/range/StyledRangeInput.ts +++ b/packages/forms/src/styled/range/StyledRangeInput.ts @@ -8,7 +8,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; import { - getColor, + getColorV8, getFocusBoxShadow, retrieveComponentStyles, DEFAULT_THEME @@ -65,21 +65,21 @@ const trackLowerStyles = (styles: string, modifier = '') => { const colorStyles = (props: ThemeProps & IStyledRangeInputProps) => { const SHADE = 600; - const thumbBackgroundColor = getColor('primaryHue', SHADE, props.theme); + const thumbBackgroundColor = getColorV8('primaryHue', SHADE, props.theme); const thumbBorderColor = thumbBackgroundColor; const thumbBoxShadow = props.theme.shadows.lg( math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), - getColor('neutralHue', SHADE + 200, props.theme, 0.24)! + getColorV8('neutralHue', SHADE + 200, props.theme, 0.24)! ); const thumbFocusBoxShadow = getFocusBoxShadow({ theme: props.theme }); - const thumbActiveBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme); + const thumbActiveBackgroundColor = getColorV8('primaryHue', SHADE + 100, props.theme); const thumbActiveBorderColor = thumbBorderColor; - const thumbDisabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + const thumbDisabledBackgroundColor = getColorV8('neutralHue', SHADE - 300, props.theme); const thumbDisabledBorderColor = thumbDisabledBackgroundColor; const thumbHoverBackgroundColor = thumbActiveBackgroundColor; const thumbHoverBorderColor = thumbHoverBackgroundColor; - const trackBackgroundColor = getColor('neutralHue', SHADE - 400, props.theme); + const trackBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme); const trackLowerBackgroundColor = props.hasLowerTrack ? thumbBackgroundColor : ''; const trackBackgroundImage = props.hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` diff --git a/packages/forms/src/styled/range/StyledSliderThumb.ts b/packages/forms/src/styled/range/StyledSliderThumb.ts index 43a8a96552f..e4139419897 100644 --- a/packages/forms/src/styled/range/StyledSliderThumb.ts +++ b/packages/forms/src/styled/range/StyledSliderThumb.ts @@ -8,7 +8,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; import { - getColor, + getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles @@ -23,18 +23,18 @@ interface IStyledSliderThumbProps { const colorStyles = (props: ThemeProps) => { const SHADE = 600; - const backgroundColor = getColor('primaryHue', SHADE, props.theme); + const backgroundColor = getColorV8('primaryHue', SHADE, props.theme); const borderColor = backgroundColor; const boxShadow = props.theme.shadows.lg( math(`${props.theme.space.base} * 1px`), math(`${props.theme.space.base} * 2px`), - getColor('neutralHue', SHADE + 200, props.theme, 0.24)! + getColorV8('neutralHue', SHADE + 200, props.theme, 0.24)! ); - const activeBackgroundColor = getColor('primaryHue', SHADE + 100, props.theme); + const activeBackgroundColor = getColorV8('primaryHue', SHADE + 100, props.theme); const activeBorderColor = borderColor; const hoverBackgroundColor = activeBackgroundColor; const hoverBorderColor = hoverBackgroundColor; - const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 300, props.theme); const disabledBorderColor = disabledBackgroundColor; return css` diff --git a/packages/forms/src/styled/range/StyledSliderTrack.ts b/packages/forms/src/styled/range/StyledSliderTrack.ts index 94e2168a934..32d6730fb0b 100644 --- a/packages/forms/src/styled/range/StyledSliderTrack.ts +++ b/packages/forms/src/styled/range/StyledSliderTrack.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.slider_track'; @@ -19,9 +19,9 @@ interface IStyledSliderTrackProps { const colorStyles = (props: IStyledSliderTrackProps & ThemeProps) => { const SHADE = 600; - const backgroundColor = getColor('neutralHue', SHADE - 400, props.theme); - const backgroundImageColor = getColor('primaryHue', SHADE, props.theme); - const disabledBackgroundColor = getColor('neutralHue', SHADE - 300, props.theme); + const backgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme); + const backgroundImageColor = getColorV8('primaryHue', SHADE, props.theme); + const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 300, props.theme); return css` background-color: ${backgroundColor}; diff --git a/packages/forms/src/styled/select/StyledSelect.ts b/packages/forms/src/styled/select/StyledSelect.ts index 9bb6da5fba8..575f457adf6 100644 --- a/packages/forms/src/styled/select/StyledSelect.ts +++ b/packages/forms/src/styled/select/StyledSelect.ts @@ -7,14 +7,14 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledTextInput, IStyledTextInputProps } from '../text/StyledTextInput'; import { StyledTextMediaFigure } from '../text/StyledTextMediaFigure'; const COMPONENT_ID = 'forms.select'; const colorStyles = (props: IStyledTextInputProps & ThemeProps) => { - const color = getColor('neutralHue', 700, props.theme); + const color = getColorV8('neutralHue', 700, props.theme); /* prettier-ignore */ return css` diff --git a/packages/forms/src/styled/text/StyledTextFauxInput.spec.tsx b/packages/forms/src/styled/text/StyledTextFauxInput.spec.tsx index efb7ee728d0..0ec6b411463 100644 --- a/packages/forms/src/styled/text/StyledTextFauxInput.spec.tsx +++ b/packages/forms/src/styled/text/StyledTextFauxInput.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { StyledTextFauxInput } from './StyledTextFauxInput'; describe('StyledTextInput', () => { @@ -40,33 +40,33 @@ describe('StyledTextInput', () => { const { container } = render(); expect(container.firstChild).toHaveAttribute('aria-readonly'); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('neutralHue', 300)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('neutralHue', 300)); }); it('renders expected disabled styling', () => { const { container } = render(); expect(container.firstChild).toHaveAttribute('aria-disabled'); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('neutralHue', 300)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('neutralHue', 300)); }); describe('Validation', () => { it('renders "success" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('successHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('successHue', 600)); }); it('renders "warning" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('warningHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('warningHue', 600)); }); it('renders "error" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('dangerHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('dangerHue', 600)); }); }); }); diff --git a/packages/forms/src/styled/text/StyledTextFauxInput.ts b/packages/forms/src/styled/text/StyledTextFauxInput.ts index 468925392b3..c83cff557a2 100644 --- a/packages/forms/src/styled/text/StyledTextFauxInput.ts +++ b/packages/forms/src/styled/text/StyledTextFauxInput.ts @@ -11,7 +11,7 @@ import { DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, focusStyles, - getColor + getColorV8 } from '@zendeskgarden/react-theming'; import { StyledTextInput, IStyledTextInputProps } from './StyledTextInput'; import { StyledTextMediaFigure } from './StyledTextMediaFigure'; @@ -52,7 +52,7 @@ const colorStyles = (props: IStyledTextFauxInputProps & ThemeProps hue: getValidationHue(validation), shade: validation === 'warning' ? 700 : 600, selector: isFocused ? '&' : '&:focus-within', - styles: { borderColor: getColor(getValidationHue(validation), 600, theme) } + styles: { borderColor: getColorV8(getValidationHue(validation), 600, theme) } })} `; }; diff --git a/packages/forms/src/styled/text/StyledTextInput.spec.tsx b/packages/forms/src/styled/text/StyledTextInput.spec.tsx index 44ecc8362a3..6fdd493e77a 100644 --- a/packages/forms/src/styled/text/StyledTextInput.spec.tsx +++ b/packages/forms/src/styled/text/StyledTextInput.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { StyledTextInput } from './StyledTextInput'; describe('StyledTextInput', () => { @@ -32,13 +32,13 @@ describe('StyledTextInput', () => { it('renders expected readonly styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('neutralHue', 300)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('neutralHue', 300)); }); it('renders expected disabled styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('neutralHue', 800)); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('neutralHue', 800)); }); it('renders expected RTL styling', () => { @@ -51,19 +51,19 @@ describe('StyledTextInput', () => { it('renders "success" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('successHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('successHue', 600)); }); it('renders "warning" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('warningHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('warningHue', 600)); }); it('renders "error" styling if provided', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('border-color', getColor('dangerHue', 600)); + expect(container.firstChild).toHaveStyleRule('border-color', getColorV8('dangerHue', 600)); }); }); }); diff --git a/packages/forms/src/styled/text/StyledTextInput.ts b/packages/forms/src/styled/text/StyledTextInput.ts index c7d6ce48b1c..0e1ffe7fc0f 100644 --- a/packages/forms/src/styled/text/StyledTextInput.ts +++ b/packages/forms/src/styled/text/StyledTextInput.ts @@ -9,7 +9,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { em, math } from 'polished'; import { retrieveComponentStyles, - getColor, + getColorV8, getLineHeight, DEFAULT_THEME, focusStyles @@ -28,7 +28,7 @@ const isInvalid = (validation?: Validation) => { const colorStyles = (props: IStyledTextInputProps & ThemeProps) => { const HUE = 'primaryHue'; const SHADE = 600; - const placeholderColor = getColor('neutralHue', SHADE - 200, props.theme); + const placeholderColor = getColorV8('neutralHue', SHADE - 200, props.theme); let borderColor: string | undefined; let hoverBorderColor: string | undefined; let focusBorderColor: string; @@ -47,21 +47,21 @@ const colorStyles = (props: IStyledTextInputProps & ThemeProps) => hue = 'dangerHue'; } - borderColor = getColor(hue as string, SHADE, props.theme)!; + borderColor = getColorV8(hue as string, SHADE, props.theme)!; hoverBorderColor = borderColor; focusBorderColor = borderColor; focusRingHue = hue; } else { - borderColor = getColor('neutralHue', SHADE - 300, props.theme); - hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + borderColor = getColorV8('neutralHue', SHADE - 300, props.theme); + hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme); focusBorderColor = hoverBorderColor!; } - const readOnlyBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme); - const readOnlyBorderColor = getColor('neutralHue', SHADE - 300, props.theme); + const readOnlyBackgroundColor = getColorV8('neutralHue', SHADE - 500, props.theme); + const readOnlyBorderColor = getColorV8('neutralHue', SHADE - 300, props.theme); const disabledBackgroundColor = readOnlyBackgroundColor; - const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme); - const disabledForegroundColor = getColor('neutralHue', SHADE - 200, props.theme); + const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme); + const disabledForegroundColor = getColorV8('neutralHue', SHADE - 200, props.theme); let controlledBorderColor = borderColor; diff --git a/packages/forms/src/styled/text/StyledTextMediaFigure.ts b/packages/forms/src/styled/text/StyledTextMediaFigure.ts index afb44f11397..8a72d894bd3 100644 --- a/packages/forms/src/styled/text/StyledTextMediaFigure.ts +++ b/packages/forms/src/styled/text/StyledTextMediaFigure.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import React, { Children } from 'react'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'forms.media_figure'; @@ -29,7 +29,7 @@ const colorStyles = (props: IStyledTextMediaFigureProps & ThemeProps { @@ -26,6 +26,6 @@ describe('StyledTextMediaInput', () => { it('renders expected disabled styling', () => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor('neutralHue', 800)); + expect(container.firstChild).toHaveStyleRule('color', getColorV8('neutralHue', 800)); }); }); diff --git a/packages/forms/src/styled/tiles/StyledTile.ts b/packages/forms/src/styled/tiles/StyledTile.ts index b08644ca7d9..b6a40bcbd47 100644 --- a/packages/forms/src/styled/tiles/StyledTile.ts +++ b/packages/forms/src/styled/tiles/StyledTile.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { - getColor, + getColorV8, DEFAULT_THEME, retrieveComponentStyles, focusStyles @@ -25,27 +25,27 @@ interface IStyledTileProps { const colorStyles = (props: IStyledTileProps & ThemeProps) => { const SHADE = 600; - const iconColor = getColor('neutralHue', SHADE, props.theme); - const color = getColor('neutralHue', SHADE + 200, props.theme); - const borderColor = getColor('neutralHue', SHADE - 300, props.theme); - const hoverBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.08); - const hoverBorderColor = getColor('primaryHue', SHADE, props.theme); + const iconColor = getColorV8('neutralHue', SHADE, props.theme); + const color = getColorV8('neutralHue', SHADE + 200, props.theme); + const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme); + const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08); + const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme); const focusBorderColor = hoverBorderColor; - const activeBackgroundColor = getColor('primaryHue', SHADE, props.theme, 0.2); + const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2); const activeBorderColor = focusBorderColor; - const disabledBackgroundColor = getColor('neutralHue', SHADE - 500, props.theme); - const disabledBorderColor = getColor('neutralHue', SHADE - 400, props.theme); - const disabledColor = getColor('neutralHue', SHADE - 200, props.theme); + const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 500, props.theme); + const disabledBorderColor = getColorV8('neutralHue', SHADE - 400, props.theme); + const disabledColor = getColorV8('neutralHue', SHADE - 200, props.theme); const selectedBorderColor = focusBorderColor; const selectedBackgroundColor = selectedBorderColor; - const selectedHoverBorderColor = getColor('primaryHue', SHADE + 100, props.theme); + const selectedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme); const selectedHoverBackgroundColor = selectedHoverBorderColor; - const selectedActiveBorderColor = getColor('primaryHue', SHADE + 200, props.theme); + const selectedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme); const selectedActiveBackgroundColor = selectedActiveBorderColor; const selectedDisabledBackgroundColor = disabledBorderColor; return css` - border: ${props.theme.borders.sm} ${getColor('neutralHue', SHADE - 300, props.theme)}; + border: ${props.theme.borders.sm} ${getColorV8('neutralHue', SHADE - 300, props.theme)}; border-color: ${borderColor}; background-color: ${props.theme.colors.background}; color: ${color}; diff --git a/packages/forms/src/styled/toggle/StyledToggleInput.ts b/packages/forms/src/styled/toggle/StyledToggleInput.ts index d4abb92e172..facc26230cc 100644 --- a/packages/forms/src/styled/toggle/StyledToggleInput.ts +++ b/packages/forms/src/styled/toggle/StyledToggleInput.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledCheckInput } from '../checkbox/StyledCheckInput'; import { StyledToggleLabel } from './StyledToggleLabel'; @@ -16,9 +16,9 @@ const COMPONENT_ID = 'forms.toggle'; const colorStyles = (props: ThemeProps) => { const SHADE = 600; - const backgroundColor = getColor('neutralHue', SHADE - 100, props.theme); - const hoverBackgroundColor = getColor('neutralHue', SHADE, props.theme); - const activeBackgroundColor = getColor('neutralHue', SHADE + 100, props.theme); + const backgroundColor = getColorV8('neutralHue', SHADE - 100, props.theme); + const hoverBackgroundColor = getColorV8('neutralHue', SHADE, props.theme); + const activeBackgroundColor = getColorV8('neutralHue', SHADE + 100, props.theme); return css` & ~ ${StyledToggleLabel}::before { diff --git a/packages/grid/src/styled/StyledCol.ts b/packages/grid/src/styled/StyledCol.ts index 484377bb297..b7eda1ff95c 100644 --- a/packages/grid/src/styled/StyledCol.ts +++ b/packages/grid/src/styled/StyledCol.ts @@ -7,13 +7,13 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { AlignSelf, Breakpoint, GridNumber, IColProps, IGridProps, TextAlign } from '../types'; const COMPONENT_ID = 'grid.col'; const colorStyles = (props: IStyledColProps) => { - const backgroundColor = getColor('primaryHue', 600, props.theme, 0.1); + const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.1); return css` background-clip: content-box; diff --git a/packages/grid/src/styled/StyledGrid.ts b/packages/grid/src/styled/StyledGrid.ts index f9aa0fcba48..bdf7541fb80 100644 --- a/packages/grid/src/styled/StyledGrid.ts +++ b/packages/grid/src/styled/StyledGrid.ts @@ -7,13 +7,13 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { IGridProps } from '../types'; const COMPONENT_ID = 'grid.grid'; const colorStyles = (props: IStyledGridProps) => { - 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` diff --git a/packages/grid/src/styled/StyledRow.ts b/packages/grid/src/styled/StyledRow.ts index be6a57d71cd..07b47848d2b 100644 --- a/packages/grid/src/styled/StyledRow.ts +++ b/packages/grid/src/styled/StyledRow.ts @@ -7,13 +7,13 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { AlignItems, IGridProps, IRowProps, JustifyContent, Wrap } from '../types'; const COMPONENT_ID = 'grid.row'; const colorStyles = (props: IStyledRowProps) => { - 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` diff --git a/packages/grid/src/styled/pane/StyledPaneSplitter.ts b/packages/grid/src/styled/pane/StyledPaneSplitter.ts index 74f82af3ab9..99a84a185ca 100644 --- a/packages/grid/src/styled/pane/StyledPaneSplitter.ts +++ b/packages/grid/src/styled/pane/StyledPaneSplitter.ts @@ -10,7 +10,7 @@ import { math } from 'polished'; import { DEFAULT_THEME, focusStyles, - getColor, + getColorV8, retrieveComponentStyles, SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming'; @@ -25,9 +25,9 @@ interface IStyledPaneSplitterProps { } const colorStyles = (props: IStyledPaneSplitterProps & ThemeProps) => { - 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 { diff --git a/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts b/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts index ab11d13dcbc..cf6071bbb38 100644 --- a/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts +++ b/packages/grid/src/styled/pane/StyledPaneSplitterButton.ts @@ -10,7 +10,7 @@ import { math, stripUnit } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, focusStyles, SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming'; @@ -53,7 +53,7 @@ const colorStyles = ({ theme }: IStyledSplitterButtonProps & ThemeProps { @@ -37,8 +37,8 @@ export const StyledProgressBackground = styled.div.attrs` margin: ${props => props.theme.space.base * 2}px 0; border-radius: ${props => props.borderRadius}px; - background-color: ${props => getColor('neutralHue', 200, props.theme)}; - color: ${props => props.color || getColor('successHue', 600, props.theme)}; + background-color: ${props => getColorV8('neutralHue', 200, props.theme)}; + color: ${props => props.color || getColorV8('successHue', 600, props.theme)}; ${props => retrieveComponentStyles(PROGRESS_BACKGROUND_COMPONENT_ID, props)} `; diff --git a/packages/loaders/src/styled/StyledSkeleton.ts b/packages/loaders/src/styled/StyledSkeleton.ts index 317da57bde0..1b318092d54 100644 --- a/packages/loaders/src/styled/StyledSkeleton.ts +++ b/packages/loaders/src/styled/StyledSkeleton.ts @@ -10,7 +10,7 @@ import { rgba } from 'polished'; import { DEFAULT_THEME, retrieveComponentStyles, - getColor, + getColorV8, getLineHeight } from '@zendeskgarden/react-theming'; @@ -55,7 +55,7 @@ const retrieveSkeletonBackgroundColor = ({ } return css` - background-color: ${getColor('neutralHue', 800, theme, 0.1)}; + background-color: ${getColorV8('neutralHue', 800, theme, 0.1)}; `; }; @@ -89,7 +89,7 @@ const retrieveSkeletonGradient = ({ background-image: linear-gradient( ${theme.rtl ? '-45deg' : '45deg'}, transparent, - ${isLight ? getColor('chromeHue', 700, theme, 0.4) : rgba(theme.colors.background, 0.6)}, + ${isLight ? getColorV8('chromeHue', 700, theme, 0.4) : rgba(theme.colors.background, 0.6)}, transparent ); /* stylelint-enable */ diff --git a/packages/modals/src/styled/StyledBackdrop.ts b/packages/modals/src/styled/StyledBackdrop.ts index 84a79f8488a..bda01591d48 100644 --- a/packages/modals/src/styled/StyledBackdrop.ts +++ b/packages/modals/src/styled/StyledBackdrop.ts @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; import styled, { css, keyframes } from 'styled-components'; -import { getColor, DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.backdrop'; @@ -49,7 +49,7 @@ export const StyledBackdrop = styled.div.attrs({ align-items: ${props => props.isCentered && 'center'}; justify-content: ${props => props.isCentered && 'center'}; z-index: 400; - background-color: ${props => getColor('neutralHue', 800, props.theme, 0.85)}; + background-color: ${props => getColorV8('neutralHue', 800, props.theme, 0.85)}; overflow: auto; -webkit-overflow-scrolling: touch; /* [1] */ font-family: ${props => props.theme.fonts.system}; diff --git a/packages/modals/src/styled/StyledClose.ts b/packages/modals/src/styled/StyledClose.ts index a77749d3be4..48716b4a409 100644 --- a/packages/modals/src/styled/StyledClose.ts +++ b/packages/modals/src/styled/StyledClose.ts @@ -7,7 +7,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { - getColor, + getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles @@ -21,11 +21,11 @@ const colorStyles = (props: ThemeProps) => { return css` background-color: transparent; - color: ${getColor(foregroundColor, 600, props.theme)}; + color: ${getColorV8(foregroundColor, 600, props.theme)}; &:hover { - background-color: ${getColor(backgroundColor, 600, props.theme, 0.08)}; - color: ${getColor(foregroundColor, 700, props.theme)}; + background-color: ${getColorV8(backgroundColor, 600, props.theme, 0.08)}; + color: ${getColorV8(foregroundColor, 700, props.theme)}; } ${focusStyles({ @@ -38,8 +38,8 @@ const colorStyles = (props: ThemeProps) => { transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out; - background-color: ${getColor(backgroundColor, 600, props.theme, 0.2)}; - color: ${getColor(foregroundColor, 800, props.theme)}; + background-color: ${getColorV8(backgroundColor, 600, props.theme, 0.2)}; + color: ${getColorV8(foregroundColor, 800, props.theme)}; } `; }; diff --git a/packages/modals/src/styled/StyledDrawerModal.ts b/packages/modals/src/styled/StyledDrawerModal.ts index 4dc0c9098fc..d3a8f24fe15 100644 --- a/packages/modals/src/styled/StyledDrawerModal.ts +++ b/packages/modals/src/styled/StyledDrawerModal.ts @@ -6,7 +6,7 @@ */ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.drawer_modal'; @@ -17,7 +17,7 @@ const boxShadow = (props: ThemeProps) => { const { space, shadows } = theme; const offsetY = `${space.base * 5}px`; const blurRadius = `${space.base * 7}px`; - const color = getColor('neutralHue', 800, theme, 0.35); + const color = getColorV8('neutralHue', 800, theme, 0.35); return shadows.lg(offsetY, blurRadius, color as string); }; diff --git a/packages/modals/src/styled/StyledDrawerModalFooter.ts b/packages/modals/src/styled/StyledDrawerModalFooter.ts index 25d2e7346f2..5e81d0bf3fd 100644 --- a/packages/modals/src/styled/StyledDrawerModalFooter.ts +++ b/packages/modals/src/styled/StyledDrawerModalFooter.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.drawer_modal.footer'; @@ -17,7 +17,7 @@ export const StyledDrawerModalFooter = styled.div.attrs({ display: flex; flex-shrink: 0; justify-content: flex-end; - border-top: ${props => `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`}; + border-top: ${props => `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`}; padding: ${props => props.theme.space.base * 5}px; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/modals/src/styled/StyledFooter.ts b/packages/modals/src/styled/StyledFooter.ts index 502277caf70..2eb2e8958c2 100644 --- a/packages/modals/src/styled/StyledFooter.ts +++ b/packages/modals/src/styled/StyledFooter.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'modals.footer'; @@ -23,7 +23,7 @@ export const StyledFooter = styled.div.attrs({ align-items: center; justify-content: flex-end; border-top: ${props => - props.isLarge && `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`}; + props.isLarge && `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`}; padding: ${props => props.isLarge ? `${props.theme.space.base * 8}px ${props.theme.space.base * 10}px` diff --git a/packages/modals/src/styled/StyledHeader.ts b/packages/modals/src/styled/StyledHeader.ts index 916c481135d..8647b3a75f9 100644 --- a/packages/modals/src/styled/StyledHeader.ts +++ b/packages/modals/src/styled/StyledHeader.ts @@ -8,7 +8,7 @@ import styled from 'styled-components'; import { getLineHeight, - getColor, + getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; @@ -33,7 +33,7 @@ export const StyledHeader = styled.div.attrs({ display: block; position: ${props => props.isDanger && 'relative'}; margin: 0; - border-bottom: ${props => props.theme.borders.sm} ${getColor('neutralHue', 200)}; + border-bottom: ${props => props.theme.borders.sm} ${getColorV8('neutralHue', 200)}; padding: ${props => `${props.theme.space.base * 5}px ${props.theme.space.base * 10}px`}; ${props => props.isCloseButtonPresent && @@ -42,7 +42,7 @@ export const StyledHeader = styled.div.attrs({ }px;`} /* [1] */ line-height: ${props => getLineHeight(props.theme.lineHeights.md, props.theme.fontSizes.md)}; color: ${props => - props.isDanger ? getColor('dangerHue', 600, props.theme) : props.theme.colors.foreground}; + props.isDanger ? getColorV8('dangerHue', 600, props.theme) : props.theme.colors.foreground}; font-size: ${props => props.theme.fontSizes.md}; font-weight: ${props => props.theme.fontWeights.semibold}; diff --git a/packages/modals/src/styled/StyledModal.ts b/packages/modals/src/styled/StyledModal.ts index 662e6c013e8..676b4af7166 100644 --- a/packages/modals/src/styled/StyledModal.ts +++ b/packages/modals/src/styled/StyledModal.ts @@ -8,7 +8,7 @@ import PropTypes from 'prop-types'; import styled, { css, keyframes, ThemeProps, DefaultTheme } from 'styled-components'; import { - getColor, + getColorV8, mediaQuery, retrieveComponentStyles, DEFAULT_THEME @@ -52,7 +52,7 @@ const boxShadow = (props: ThemeProps) => { const { space, shadows } = theme; const offsetY = `${space.base * 5}px`; const blurRadius = `${space.base * 7}px`; - const color = getColor('neutralHue', 800, theme, 0.35); + const color = getColorV8('neutralHue', 800, theme, 0.35); return shadows.lg(offsetY, blurRadius, color as string); }; diff --git a/packages/notifications/src/elements/content/Title.spec.tsx b/packages/notifications/src/elements/content/Title.spec.tsx index 1638f37695d..432c4082aac 100644 --- a/packages/notifications/src/elements/content/Title.spec.tsx +++ b/packages/notifications/src/elements/content/Title.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { css } from 'styled-components'; import { render } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { Notification } from '../Notification'; import { Title } from './Title'; import { StyledTitle } from '../../styled'; @@ -62,7 +62,7 @@ describe('Title', () => { expect(container.firstChild).toHaveStyleRule( 'color', - getColor('successHue', 600, DEFAULT_THEME), + getColorV8('successHue', 600, DEFAULT_THEME), { modifier: css` ${StyledTitle} @@ -80,7 +80,7 @@ describe('Title', () => { expect(container.firstChild).toHaveStyleRule( 'color', - getColor('dangerHue', 600, DEFAULT_THEME), + getColorV8('dangerHue', 600, DEFAULT_THEME), { modifier: css` ${StyledTitle} @@ -98,7 +98,7 @@ describe('Title', () => { expect(container.firstChild).toHaveStyleRule( 'color', - getColor('warningHue', 700, DEFAULT_THEME), + getColorV8('warningHue', 700, DEFAULT_THEME), { modifier: css` ${StyledTitle} diff --git a/packages/notifications/src/styled/StyledAlert.spec.tsx b/packages/notifications/src/styled/StyledAlert.spec.tsx index d8c39788058..1d4f698bea6 100644 --- a/packages/notifications/src/styled/StyledAlert.spec.tsx +++ b/packages/notifications/src/styled/StyledAlert.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { css } from 'styled-components'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { render } from 'garden-test-utils'; import { StyledAlert, StyledTitle } from '../styled'; import { Type } from '../types'; @@ -24,7 +24,7 @@ describe('StyledAlert', () => { Object.values(validationHues).forEach(hue => { const { container } = render(); - expect(container.firstChild).toHaveStyleRule('color', getColor(hue, 800, DEFAULT_THEME), { + expect(container.firstChild).toHaveStyleRule('color', getColorV8(hue, 800, DEFAULT_THEME), { modifier: css` ${StyledTitle} ` as any diff --git a/packages/notifications/src/styled/StyledAlert.ts b/packages/notifications/src/styled/StyledAlert.ts index 79c9b1f2121..d91b0d6c6eb 100644 --- a/packages/notifications/src/styled/StyledAlert.ts +++ b/packages/notifications/src/styled/StyledAlert.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledTitle } from './content/StyledTitle'; import { StyledBase } from './StyledBase'; @@ -18,7 +18,7 @@ export interface IStyledAlertProps { const colorStyles = (props: IStyledAlertProps & ThemeProps) => css` ${StyledTitle} { - color: ${props.hue && getColor(props.hue, 800, props.theme)}; + color: ${props.hue && getColorV8(props.hue, 800, props.theme)}; } `; diff --git a/packages/notifications/src/styled/StyledBase.ts b/packages/notifications/src/styled/StyledBase.ts index 4a8a53a66c6..b624668e0c8 100644 --- a/packages/notifications/src/styled/StyledBase.ts +++ b/packages/notifications/src/styled/StyledBase.ts @@ -6,7 +6,7 @@ */ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { getColor, getLineHeight, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, getLineHeight, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { Type } from '../types'; export interface IStyledBaseProps { @@ -20,7 +20,7 @@ const boxShadow = (props: ThemeProps) => { const { space, shadows } = theme; const offsetY = `${space.base * 5}px`; const blurRadius = `${space.base * 7}px`; - const color = getColor('chromeHue', 600, theme, 0.15); + const color = getColorV8('chromeHue', 600, theme, 0.15); return shadows.lg(offsetY, blurRadius, color as string); }; @@ -31,13 +31,13 @@ const colorStyles = (props: ThemeProps & IStyledBaseProps) => { let foregroundColor; if (props.hue) { - backgroundColor = getColor(props.hue, 100, props.theme); - borderColor = getColor(props.hue, 300, props.theme); - foregroundColor = getColor(props.hue, props.type === 'info' ? 600 : 700, props.theme); + backgroundColor = getColorV8(props.hue, 100, props.theme); + borderColor = getColorV8(props.hue, 300, props.theme); + foregroundColor = getColorV8(props.hue, props.type === 'info' ? 600 : 700, props.theme); } else { backgroundColor = props.theme.colors.background; - borderColor = getColor('neutralHue', 300, props.theme); - foregroundColor = getColor('neutralHue', 800, props.theme); + borderColor = getColorV8('neutralHue', 300, props.theme); + foregroundColor = getColorV8('neutralHue', 800, props.theme); } return css` diff --git a/packages/notifications/src/styled/StyledIcon.ts b/packages/notifications/src/styled/StyledIcon.ts index ee15b687f22..8723b728fe3 100644 --- a/packages/notifications/src/styled/StyledIcon.ts +++ b/packages/notifications/src/styled/StyledIcon.ts @@ -7,7 +7,7 @@ import React, { Children } from 'react'; import styled from 'styled-components'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; export const StyledIcon = styled(({ children, ...props }) => React.cloneElement(Children.only(children), props) @@ -17,7 +17,7 @@ export const StyledIcon = styled(({ children, ...props }) => left: ${props => !props.theme.rtl && `${props.theme.space.base * 4}px`}; margin-top: ${props => props.theme.space.base / 2}px; color: ${props => - props.hue && getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme)}; + props.hue && getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme)}; `; StyledIcon.defaultProps = { diff --git a/packages/notifications/src/styled/StyledNotification.ts b/packages/notifications/src/styled/StyledNotification.ts index f1f906fff4e..6e6dff1cfe0 100644 --- a/packages/notifications/src/styled/StyledNotification.ts +++ b/packages/notifications/src/styled/StyledNotification.ts @@ -7,7 +7,7 @@ import PropTypes from 'prop-types'; import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { INotificationProps, TYPE } from '../types'; import { StyledTitle } from './content/StyledTitle'; import { StyledBase } from './StyledBase'; @@ -23,13 +23,13 @@ const colorStyles = (props: INotificationProps & ThemeProps) => { switch (type) { case 'success': - color = getColor(successHue, 600, theme); + color = getColorV8(successHue, 600, theme); break; case 'error': - color = getColor(dangerHue, 600, theme); + color = getColorV8(dangerHue, 600, theme); break; case 'warning': - color = getColor(warningHue, 700, theme); + color = getColorV8(warningHue, 700, theme); break; case 'info': color = foreground; diff --git a/packages/notifications/src/styled/StyledWell.ts b/packages/notifications/src/styled/StyledWell.ts index 44c422c2116..b9bdf57a0cf 100644 --- a/packages/notifications/src/styled/StyledWell.ts +++ b/packages/notifications/src/styled/StyledWell.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledBase } from './StyledBase'; const COMPONENT_ID = 'notifications.well'; @@ -22,8 +22,8 @@ export const StyledWell = styled(StyledBase).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - background-color: ${props => props.isRecessed && getColor('neutralHue', 100, props.theme)}; - color: ${props => getColor('neutralHue', 600, props.theme)} + background-color: ${props => props.isRecessed && getColorV8('neutralHue', 100, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)} ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/notifications/src/styled/content/StyledClose.ts b/packages/notifications/src/styled/content/StyledClose.ts index 5d4f7f0b749..0f26ac9cd3b 100644 --- a/packages/notifications/src/styled/content/StyledClose.ts +++ b/packages/notifications/src/styled/content/StyledClose.ts @@ -8,7 +8,7 @@ import styled from 'styled-components'; import { retrieveComponentStyles, - getColor, + getColorV8, DEFAULT_THEME, focusStyles } from '@zendeskgarden/react-theming'; @@ -49,8 +49,8 @@ export const StyledClose = styled.button.attrs({ overflow: hidden; color: ${props => props.hue - ? getColor(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) - : getColor('neutralHue', 600, props.theme)}; + ? getColorV8(props.hue, props.hue === 'warningHue' ? 700 : 600, props.theme) + : getColorV8('neutralHue', 600, props.theme)}; font-size: 0; /* [1] */ user-select: none; @@ -60,7 +60,9 @@ export const StyledClose = styled.button.attrs({ &:hover { color: ${props => - props.hue ? getColor(props.hue, 800, props.theme) : getColor('neutralHue', 800, props.theme)}; + props.hue + ? getColorV8(props.hue, 800, props.theme) + : getColorV8('neutralHue', 800, props.theme)}; } ${props => diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlert.spec.tsx b/packages/notifications/src/styled/global-alert/StyledGlobalAlert.spec.tsx index 0e188f07738..a52692a12e7 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlert.spec.tsx +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlert.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { TYPE } from '../../types'; import { StyledGlobalAlert } from './StyledGlobalAlert'; @@ -19,10 +19,10 @@ describe('StyledGlobalAlert', () => { expect(container.firstChild).toHaveStyleRule( 'background-color', { - success: getColor(DEFAULT_THEME.colors.successHue, 600, DEFAULT_THEME), - error: getColor(DEFAULT_THEME.colors.dangerHue, 600, DEFAULT_THEME), - warning: getColor(DEFAULT_THEME.colors.warningHue, 300, DEFAULT_THEME), - info: getColor(DEFAULT_THEME.colors.primaryHue, 200, DEFAULT_THEME) + success: getColorV8(DEFAULT_THEME.colors.successHue, 600, DEFAULT_THEME), + error: getColorV8(DEFAULT_THEME.colors.dangerHue, 600, DEFAULT_THEME), + warning: getColorV8(DEFAULT_THEME.colors.warningHue, 300, DEFAULT_THEME), + info: getColorV8(DEFAULT_THEME.colors.primaryHue, 200, DEFAULT_THEME) }[type] ); }); diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts index c27076a65c0..49a65b24aec 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlert.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { - getColor, + getColorV8, DEFAULT_THEME, retrieveComponentStyles, getLineHeight, @@ -35,38 +35,38 @@ const colorStyles = (props: ThemeProps & IStyledGlobalAlertProps) switch (props.alertType) { case 'success': - borderColor = getColor('successHue', 700, props.theme); - backgroundColor = getColor('successHue', 600, props.theme); - foregroundColor = getColor('successHue', 100, props.theme); + borderColor = getColorV8('successHue', 700, props.theme); + backgroundColor = getColorV8('successHue', 600, props.theme); + foregroundColor = getColorV8('successHue', 100, props.theme); anchorHoverColor = props.theme.palette.white; anchorActiveColor = props.theme.palette.white; focusColor = 'successHue'; break; case 'error': - borderColor = getColor('dangerHue', 700, props.theme); - backgroundColor = getColor('dangerHue', 600, props.theme); - foregroundColor = getColor('dangerHue', 100, props.theme); + borderColor = getColorV8('dangerHue', 700, props.theme); + backgroundColor = getColorV8('dangerHue', 600, props.theme); + foregroundColor = getColorV8('dangerHue', 100, props.theme); anchorHoverColor = props.theme.palette.white; anchorActiveColor = props.theme.palette.white; focusColor = 'dangerHue'; break; case 'warning': - borderColor = getColor('warningHue', 400, props.theme); - backgroundColor = getColor('warningHue', 300, props.theme); - foregroundColor = getColor('warningHue', 800, props.theme); - anchorHoverColor = getColor('warningHue', 900, props.theme); - anchorActiveColor = getColor('warningHue', 1000, props.theme); + borderColor = getColorV8('warningHue', 400, props.theme); + backgroundColor = getColorV8('warningHue', 300, props.theme); + foregroundColor = getColorV8('warningHue', 800, props.theme); + anchorHoverColor = getColorV8('warningHue', 900, props.theme); + anchorActiveColor = getColorV8('warningHue', 1000, props.theme); focusColor = 'warningHue'; break; case 'info': - borderColor = getColor('primaryHue', 300, props.theme); - backgroundColor = getColor('primaryHue', 200, props.theme); - foregroundColor = getColor('primaryHue', 700, props.theme); - anchorHoverColor = getColor('primaryHue', 800, props.theme); - anchorActiveColor = getColor('primaryHue', 900, props.theme); + borderColor = getColorV8('primaryHue', 300, props.theme); + backgroundColor = getColorV8('primaryHue', 200, props.theme); + foregroundColor = getColorV8('primaryHue', 700, props.theme); + anchorHoverColor = getColorV8('primaryHue', 800, props.theme); + anchorActiveColor = getColorV8('primaryHue', 900, props.theme); focusColor = 'primaryHue'; break; } diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx index 60ddef9a763..64e96e447af 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { TYPE } from '../../types'; import { StyledGlobalAlertButton } from './StyledGlobalAlertButton'; @@ -28,10 +28,10 @@ describe('StyledGlobalAlertButton', () => { expect(getByRole('button')).toHaveStyleRule( 'background-color', { - success: getColor('successHue', 800, DEFAULT_THEME), - warning: getColor('warningHue', 800, DEFAULT_THEME), - error: getColor('dangerHue', 800, DEFAULT_THEME), - info: getColor('primaryHue', 600, DEFAULT_THEME) + success: getColorV8('successHue', 800, DEFAULT_THEME), + warning: getColorV8('warningHue', 800, DEFAULT_THEME), + error: getColorV8('dangerHue', 800, DEFAULT_THEME), + info: getColorV8('primaryHue', 600, DEFAULT_THEME) }[type] ); }); diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts index b35e68a1281..a15210b4ad9 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertButton.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { - getColor, + getColorV8, DEFAULT_THEME, retrieveComponentStyles, focusStyles @@ -36,23 +36,23 @@ function colorStyles(props: ThemeProps & IStyledGlobalAlertButtonP switch (props.alertType) { case 'success': - backgroundColor = getColor('successHue', 800, props.theme); - hoverBackgroundColor = getColor('successHue', 900, props.theme); - activeBackgroundColor = getColor('successHue', 1000, props.theme); + backgroundColor = getColorV8('successHue', 800, props.theme); + hoverBackgroundColor = getColorV8('successHue', 900, props.theme); + activeBackgroundColor = getColorV8('successHue', 1000, props.theme); focusColor = 'successHue'; break; case 'error': - backgroundColor = getColor('dangerHue', 800, props.theme); - hoverBackgroundColor = getColor('dangerHue', 900, props.theme); - activeBackgroundColor = getColor('dangerHue', 1000, props.theme); + backgroundColor = getColorV8('dangerHue', 800, props.theme); + hoverBackgroundColor = getColorV8('dangerHue', 900, props.theme); + activeBackgroundColor = getColorV8('dangerHue', 1000, props.theme); focusColor = 'dangerHue'; break; case 'warning': - backgroundColor = getColor('warningHue', 800, props.theme); - hoverBackgroundColor = getColor('warningHue', 900, props.theme); - activeBackgroundColor = getColor('warningHue', 1000, props.theme); + backgroundColor = getColorV8('warningHue', 800, props.theme); + hoverBackgroundColor = getColorV8('warningHue', 900, props.theme); + activeBackgroundColor = getColorV8('warningHue', 1000, props.theme); focusColor = 'warningHue'; break; diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.spec.tsx b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.spec.tsx index 073d8b57c8b..4aaf3e6634c 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.spec.tsx +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import XStrokeIcon from '@zendeskgarden/svg-icons/src/16/x-stroke.svg'; import { TYPE } from '../../types'; @@ -24,10 +24,10 @@ describe('StyledGlobalAlertClose', () => { expect(getByRole('button')).toHaveStyleRule( 'background-color', { - success: getColor(DEFAULT_THEME.colors.successHue, 100, DEFAULT_THEME, 0.08), - warning: getColor(DEFAULT_THEME.colors.warningHue, 800, DEFAULT_THEME, 0.08), - error: getColor(DEFAULT_THEME.colors.dangerHue, 100, DEFAULT_THEME, 0.08), - info: getColor(DEFAULT_THEME.colors.primaryHue, 700, DEFAULT_THEME, 0.08) + success: getColorV8(DEFAULT_THEME.colors.successHue, 100, DEFAULT_THEME, 0.08), + warning: getColorV8(DEFAULT_THEME.colors.warningHue, 800, DEFAULT_THEME, 0.08), + error: getColorV8(DEFAULT_THEME.colors.dangerHue, 100, DEFAULT_THEME, 0.08), + info: getColorV8(DEFAULT_THEME.colors.primaryHue, 700, DEFAULT_THEME, 0.08) }[type] as string, { modifier: '&:hover' } ); diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts index 811d86edc4c..28190520fd7 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertClose.ts @@ -7,7 +7,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { - getColor, + getColorV8, DEFAULT_THEME, retrieveComponentStyles, focusStyles @@ -31,34 +31,34 @@ export const colorStyles = (props: ThemeProps & IStyledGlobalAlert switch (props.alertType) { case 'success': - hoverBackgroundColor = getColor('successHue', 100, props.theme, 0.08); + hoverBackgroundColor = getColorV8('successHue', 100, props.theme, 0.08); hoverForegroundColor = props.theme.palette.white; - activeBackgroundColor = getColor('successHue', 100, props.theme, 0.2); + activeBackgroundColor = getColorV8('successHue', 100, props.theme, 0.2); activeForegroundColor = props.theme.palette.white; focusColor = 'successHue'; break; case 'error': - hoverBackgroundColor = getColor('dangerHue', 100, props.theme, 0.08); + hoverBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.08); hoverForegroundColor = props.theme.palette.white; - activeBackgroundColor = getColor('dangerHue', 100, props.theme, 0.2); + activeBackgroundColor = getColorV8('dangerHue', 100, props.theme, 0.2); activeForegroundColor = props.theme.palette.white; focusColor = 'dangerHue'; break; case 'warning': - hoverBackgroundColor = getColor('warningHue', 800, props.theme, 0.08); - hoverForegroundColor = getColor('warningHue', 900, props.theme); - activeBackgroundColor = getColor('warningHue', 800, props.theme, 0.2); - activeForegroundColor = getColor('warningHue', 1000, props.theme); + hoverBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.08); + hoverForegroundColor = getColorV8('warningHue', 900, props.theme); + activeBackgroundColor = getColorV8('warningHue', 800, props.theme, 0.2); + activeForegroundColor = getColorV8('warningHue', 1000, props.theme); focusColor = 'warningHue'; break; case 'info': - hoverBackgroundColor = getColor('primaryHue', 700, props.theme, 0.08); - hoverForegroundColor = getColor('primaryHue', 800, props.theme); - activeBackgroundColor = getColor('primaryHue', 700, props.theme, 0.2); - activeForegroundColor = getColor('primaryHue', 900, props.theme); + hoverBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.08); + hoverForegroundColor = getColorV8('primaryHue', 800, props.theme); + activeBackgroundColor = getColorV8('primaryHue', 700, props.theme, 0.2); + activeForegroundColor = getColorV8('primaryHue', 900, props.theme); focusColor = 'primaryHue'; break; } diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.spec.tsx b/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.spec.tsx index 8224bb7cf2c..f2a614537f8 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.spec.tsx +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { TYPE } from '../../types'; @@ -51,9 +51,9 @@ describe('StyledGlobalAlertTitle', () => { 'color', { success: DEFAULT_THEME.palette.white as string, - warning: getColor('warningHue', 900, DEFAULT_THEME), + warning: getColorV8('warningHue', 900, DEFAULT_THEME), error: DEFAULT_THEME.palette.white as string, - info: getColor('primaryHue', 800, DEFAULT_THEME) + info: getColorV8('primaryHue', 800, DEFAULT_THEME) }[type] ); }); diff --git a/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts b/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts index 4b8fc0c38b8..f58f35e04db 100644 --- a/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts +++ b/packages/notifications/src/styled/global-alert/StyledGlobalAlertTitle.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming'; import { IGlobalAlertProps, IGlobalAlertTitleProps } from '../../types'; const COMPONENT_ID = 'notifications.global-alert.title'; @@ -26,11 +26,11 @@ const colorStyles = (props: ThemeProps & IStyledGlobalAlertTitlePr break; case 'warning': - color = getColor('warningHue', 900, props.theme); + color = getColorV8('warningHue', 900, props.theme); break; case 'info': - color = getColor('primaryHue', 800, props.theme); + color = getColorV8('primaryHue', 800, props.theme); break; } diff --git a/packages/pagination/src/styled/Pagination/StyledPageBase.ts b/packages/pagination/src/styled/Pagination/StyledPageBase.ts index 06d16c16f61..f08e67fda90 100644 --- a/packages/pagination/src/styled/Pagination/StyledPageBase.ts +++ b/packages/pagination/src/styled/Pagination/StyledPageBase.ts @@ -10,22 +10,22 @@ import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight, - getColor, + getColorV8, focusStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'pagination.page'; const colorStyles = (props: ThemeProps) => { - const defaultColor = getColor('neutralHue', 600, props.theme); - const hoverForegroundColor = getColor('neutralHue', 700, props.theme); - const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08); - const activeForegroundColor = getColor('neutralHue', 800, props.theme); - const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2); + const defaultColor = getColorV8('neutralHue', 600, props.theme); + const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme); + const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08); + const activeForegroundColor = getColorV8('neutralHue', 800, props.theme); + const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2); const currentForegroundColor = activeForegroundColor; const currentBackgroundColor = hoverBackgroundColor; - const currentHoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.16); - const currentActiveBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28); + const currentHoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.16); + const currentActiveBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28); return css` color: ${defaultColor}; @@ -63,7 +63,7 @@ const colorStyles = (props: ThemeProps) => { :disabled, [aria-disabled='true'] { background-color: transparent; - color: ${getColor('grey', 300, props.theme)}; + color: ${getColorV8('grey', 300, props.theme)}; } `; }; diff --git a/packages/pagination/src/styled/Pagination/StyledPagination.ts b/packages/pagination/src/styled/Pagination/StyledPagination.ts index 0e513e11305..e37fc9d5ef2 100644 --- a/packages/pagination/src/styled/Pagination/StyledPagination.ts +++ b/packages/pagination/src/styled/Pagination/StyledPagination.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'pagination.pagination_view'; @@ -24,7 +24,7 @@ export const StyledPagination = styled.ul.attrs({ margin: 0; /* [1] */ padding: 0; /* [1] */ white-space: nowrap; /* [2] */ - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; :focus { outline: none; diff --git a/packages/tables/src/elements/Row.spec.tsx b/packages/tables/src/elements/Row.spec.tsx index 62dc5e2a126..84fa0f43158 100644 --- a/packages/tables/src/elements/Row.spec.tsx +++ b/packages/tables/src/elements/Row.spec.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { css } from 'styled-components'; import userEvent from '@testing-library/user-event'; import { render } from 'garden-test-utils'; -import { getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { Table } from './Table'; import { Body } from './Body'; @@ -58,7 +58,7 @@ describe('Row', () => { expect(row).toHaveStyleRule( 'box-shadow', - `inset 3px 0 0 0 ${getColor('primaryHue', 600, DEFAULT_THEME)}`, + `inset 3px 0 0 0 ${getColorV8('primaryHue', 600, DEFAULT_THEME)}`, { /* prettier-ignore */ /* stylelint-disable */ @@ -82,7 +82,7 @@ describe('Row', () => { expect(row).not.toHaveStyleRule( 'box-shadow', - `inset 3px 0 0 0 ${getColor('primaryHue', 600, DEFAULT_THEME)}`, + `inset 3px 0 0 0 ${getColorV8('primaryHue', 600, DEFAULT_THEME)}`, { /* prettier-ignore */ /* stylelint-disable */ @@ -107,7 +107,7 @@ describe('Row', () => { expect(row).not.toHaveStyleRule( 'box-shadow', - `inset 3px 0 0 0 ${getColor('primaryHue', 600, DEFAULT_THEME)}`, + `inset 3px 0 0 0 ${getColorV8('primaryHue', 600, DEFAULT_THEME)}`, { /* prettier-ignore */ modifier: css`${StyledCell}:first-of-type` as any @@ -126,7 +126,7 @@ describe('Row', () => { expect(getByTestId('row')).toHaveStyleRule( 'background-color', - getColor('neutralHue', 100, DEFAULT_THEME) + getColorV8('neutralHue', 100, DEFAULT_THEME) ); }); @@ -141,7 +141,7 @@ describe('Row', () => { expect(getByTestId('row')).toHaveStyleRule( 'background-color', - getColor('primaryHue', 600, DEFAULT_THEME, 0.08) + getColorV8('primaryHue', 600, DEFAULT_THEME, 0.08) ); }); @@ -157,7 +157,7 @@ describe('Row', () => { expect(getByTestId('row')).toHaveStyleRule( 'background-color', - getColor('primaryHue', 600, DEFAULT_THEME, 0.28) + getColorV8('primaryHue', 600, DEFAULT_THEME, 0.28) ); }); @@ -172,7 +172,7 @@ describe('Row', () => { expect(getByTestId('row')).toHaveStyleRule( 'background-color', - getColor('primaryHue', 600, DEFAULT_THEME, 0.2) + getColorV8('primaryHue', 600, DEFAULT_THEME, 0.2) ); }); }); diff --git a/packages/tables/src/styled/StyledGroupRow.ts b/packages/tables/src/styled/StyledGroupRow.ts index 25e8eb09f39..07ace91d955 100644 --- a/packages/tables/src/styled/StyledGroupRow.ts +++ b/packages/tables/src/styled/StyledGroupRow.ts @@ -7,7 +7,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { StyledBaseRow, IStyledRowProps } from './StyledRow'; import { StyledCell } from './StyledCell'; import { getLineHeight } from './StyledTable'; @@ -33,7 +33,7 @@ export const StyledGroupRow = styled(StyledBaseRow).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - background-color: ${props => getColor('neutralHue', 100, props.theme)}; + background-color: ${props => getColorV8('neutralHue', 100, props.theme)}; ${props => sizeStyles(props)} ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/tables/src/styled/StyledHead.ts b/packages/tables/src/styled/StyledHead.ts index 22d41e368b6..b1af1900fe7 100644 --- a/packages/tables/src/styled/StyledHead.ts +++ b/packages/tables/src/styled/StyledHead.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { StyledHeaderRow } from './StyledHeaderRow'; const COMPONENT_ID = 'tables.head'; @@ -20,7 +20,7 @@ interface IStyledHeadProps { * 2. Replace header row border with a box-shadow that maintains position */ const stickyStyles = (props: ThemeProps) => { - const borderColor = getColor('neutralHue', 300, props.theme); + const borderColor = getColorV8('neutralHue', 300, props.theme); return css` position: sticky; diff --git a/packages/tables/src/styled/StyledHeaderRow.ts b/packages/tables/src/styled/StyledHeaderRow.ts index 3bb43ed5a85..dec9c93dfcc 100644 --- a/packages/tables/src/styled/StyledHeaderRow.ts +++ b/packages/tables/src/styled/StyledHeaderRow.ts @@ -7,7 +7,7 @@ import styled, { ThemeProps, DefaultTheme } from 'styled-components'; import { math } from 'polished'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; import { StyledBaseRow, IStyledRowProps } from './StyledRow'; import { StyledOverflowButton } from './StyledOverflowButton'; @@ -27,7 +27,7 @@ export const StyledHeaderRow = styled(StyledBaseRow).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - border-bottom-color: ${props => getColor('neutralHue', 300, props.theme)}; + border-bottom-color: ${props => getColorV8('neutralHue', 300, props.theme)}; height: ${getHeaderRowHeight}; vertical-align: bottom; font-weight: ${props => props.theme.fontWeights.semibold}; diff --git a/packages/tables/src/styled/StyledOverflowButton.ts b/packages/tables/src/styled/StyledOverflowButton.ts index 889c9766633..ac44641afc4 100644 --- a/packages/tables/src/styled/StyledOverflowButton.ts +++ b/packages/tables/src/styled/StyledOverflowButton.ts @@ -10,7 +10,7 @@ import { math } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, focusStyles } from '@zendeskgarden/react-theming'; import { ITableProps } from '../types'; @@ -28,10 +28,10 @@ interface IStyledOverflowButtonProps { const OVERFLOW_BUTTON_SIZE = '2em'; const colorStyles = (props: IStyledOverflowButtonProps & ThemeProps) => { - const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08); - const hoverForegroundColor = getColor('neutralHue', 700, props.theme); - const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2); - const activeForegroundColor = getColor('neutralHue', 800, props.theme); + const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08); + const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme); + const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2); + const activeForegroundColor = getColorV8('neutralHue', 800, props.theme); let foregroundColor; if (props.isHovered) { @@ -39,7 +39,7 @@ const colorStyles = (props: IStyledOverflowButtonProps & ThemeProps` display: table-row; transition: background-color 0.1s ease-in-out; border-bottom: ${props => - `${props.theme.borders.sm} ${getColor('neutralHue', 200, props.theme)}`}; - background-color: ${props => props.isStriped && getColor('neutralHue', 100, props.theme)}; + `${props.theme.borders.sm} ${getColorV8('neutralHue', 200, props.theme)}`}; + background-color: ${props => props.isStriped && getColorV8('neutralHue', 100, props.theme)}; vertical-align: top; box-sizing: border-box; `; @@ -40,12 +40,12 @@ StyledBaseRow.defaultProps = { const colorStyles = (props: IStyledRowProps & ThemeProps) => { const boxShadow = `inset ${props.theme.rtl ? '-' : ''}${ props.theme.shadowWidths.md - } 0 0 0 ${getColor('primaryHue', 600, props.theme)}`; - const hoveredBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08); - const hoveredBorderColor = getColor('primaryHue', 200, props.theme); - const selectedBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2); - const selectedBorderColor = getColor('primaryHue', 300, props.theme); - const hoveredSelectedBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28); + } 0 0 0 ${getColorV8('primaryHue', 600, props.theme)}`; + const hoveredBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08); + const hoveredBorderColor = getColorV8('primaryHue', 200, props.theme); + const selectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2); + const selectedBorderColor = getColorV8('primaryHue', 300, props.theme); + const hoveredSelectedBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28); let backgroundColor = undefined; let borderColor = undefined; let hoverBorderBottomColor = undefined; diff --git a/packages/tables/src/styled/StyledSortableButton.ts b/packages/tables/src/styled/StyledSortableButton.ts index c902a4c1a19..4db7f850a5a 100644 --- a/packages/tables/src/styled/StyledSortableButton.ts +++ b/packages/tables/src/styled/StyledSortableButton.ts @@ -10,7 +10,7 @@ import { math } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColor, + getColorV8, focusStyles, SELECTOR_FOCUS_VISIBLE } from '@zendeskgarden/react-theming'; @@ -91,18 +91,18 @@ export const StyledSortableButton = styled.button.attrs props.sort !== undefined && 1}; color: ${props => { if (props.sort === 'asc') { - return getColor('neutralHue', 600, props.theme); + return getColorV8('neutralHue', 600, props.theme); } else if (props.sort === 'desc') { - return getColor('neutralHue', 400, props.theme); + return getColorV8('neutralHue', 400, props.theme); } return undefined; }}; fill: ${props => { if (props.sort === 'asc') { - return getColor('neutralHue', 400, props.theme); + return getColorV8('neutralHue', 400, props.theme); } else if (props.sort === 'desc') { - return getColor('neutralHue', 600, props.theme); + return getColorV8('neutralHue', 600, props.theme); } return undefined; @@ -112,15 +112,15 @@ export const StyledSortableButton = styled.button.attrs getColor('primaryHue', 600, props.theme)}; + color: ${props => getColorV8('primaryHue', 600, props.theme)}; ${props => props.sort === undefined && ` ${StyledSortableFillIconWrapper} { opacity: 1; - color: ${getColor('primaryHue', 600, props.theme)}; - fill: ${getColor('primaryHue', 600, props.theme)}; + color: ${getColorV8('primaryHue', 600, props.theme)}; + fill: ${getColorV8('primaryHue', 600, props.theme)}; } ${StyledSortableStrokeIconWrapper} { @@ -132,8 +132,8 @@ export const StyledSortableButton = styled.button.attrs) => { - const selectedColor = getColor('primaryHue', 600, theme); + const selectedColor = getColorV8('primaryHue', 600, theme); return css` border-color: ${isSelected && 'currentcolor !important'}; /* [1] */ @@ -50,7 +50,7 @@ const colorStyles = ({ theme, isSelected }: IStyledTabProps & ThemeProps getColor('neutralHue', 400, props.theme)}; + color: ${props => getColorV8('neutralHue', 400, props.theme)}; } `; }; diff --git a/packages/tabs/src/styled/StyledTabList.ts b/packages/tabs/src/styled/StyledTabList.ts index 4ad95f93af2..69f7f79031a 100644 --- a/packages/tabs/src/styled/StyledTabList.ts +++ b/packages/tabs/src/styled/StyledTabList.ts @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { retrieveComponentStyles, getColor, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'tabs.tablist'; @@ -21,11 +21,11 @@ export const StyledTabList = styled.div.attrs({ margin-top: 0; /* [1] */ margin-bottom: ${props => props.theme.space.base * 5}px; border-bottom: ${props => props.theme.borderWidths.sm} ${props => props.theme.borderStyles.solid} - ${props => getColor('neutralHue', 300, props.theme)}; + ${props => getColorV8('neutralHue', 300, props.theme)}; padding: 0; /* [1] */ line-height: ${props => props.theme.space.base * 5}px; white-space: nowrap; - color: ${props => getColor('neutralHue', 600, props.theme)}; + color: ${props => getColorV8('neutralHue', 600, props.theme)}; font-size: ${props => props.theme.fontSizes.md}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/tags/src/styled/StyledTag.spec.tsx b/packages/tags/src/styled/StyledTag.spec.tsx index 5be00af6ce4..c5e94aad550 100644 --- a/packages/tags/src/styled/StyledTag.spec.tsx +++ b/packages/tags/src/styled/StyledTag.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render, renderRtl } from 'garden-test-utils'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { StyledTag } from './StyledTag'; describe('StyledTag', () => { @@ -84,14 +84,14 @@ describe('StyledTag', () => { describe('hue', () => { it('renders using a default neutral hue', () => { const { container } = render(); - const color = getColor('neutralHue', 200); + const color = getColorV8('neutralHue', 200); expect(container.firstChild).toHaveStyleRule('background-color', color); }); it('renders using a custom hue', () => { const { container } = render(); - const color = getColor('azure', 600); + const color = getColorV8('azure', 600); expect(container.firstChild).toHaveStyleRule('background-color', color); }); diff --git a/packages/tags/src/styled/StyledTag.ts b/packages/tags/src/styled/StyledTag.ts index 3d9524474fa..1d2b0664974 100644 --- a/packages/tags/src/styled/StyledTag.ts +++ b/packages/tags/src/styled/StyledTag.ts @@ -9,7 +9,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { math, readableColor } from 'polished'; import { DEFAULT_THEME, - getColor, + getColorV8, retrieveComponentStyles, getLineHeight, SELECTOR_FOCUS_VISIBLE, @@ -29,10 +29,10 @@ const colorStyles = (props: ITagProps & ThemeProps) => { if (props.hue) { const shade = props.hue === 'yellow' ? 400 : 600; - backgroundColor = getColor(props.hue, shade, props.theme); + backgroundColor = getColorV8(props.hue, shade, props.theme); if (props.hue === 'yellow' || props.hue === 'lemon') { - foregroundColor = getColor('yellow', 800, props.theme); + foregroundColor = getColorV8('yellow', 800, props.theme); } else { foregroundColor = readableColor( backgroundColor!, @@ -41,9 +41,9 @@ const colorStyles = (props: ITagProps & ThemeProps) => { ); } } else { - backgroundColor = getColor('neutralHue', 200, props.theme); - foregroundColor = getColor('neutralHue', 700, props.theme); - closeColor = getColor('neutralHue', 600, props.theme); + backgroundColor = getColorV8('neutralHue', 200, props.theme); + foregroundColor = getColorV8('neutralHue', 700, props.theme); + closeColor = getColorV8('neutralHue', 600, props.theme); } return css` diff --git a/packages/theming/demo/stories/ArrowStylesStory.tsx b/packages/theming/demo/stories/ArrowStylesStory.tsx index 4b54bfb1b41..55d6fff9245 100644 --- a/packages/theming/demo/stories/ArrowStylesStory.tsx +++ b/packages/theming/demo/stories/ArrowStylesStory.tsx @@ -10,7 +10,7 @@ import styled from 'styled-components'; import { Story } from '@storybook/react'; import { arrowStyles, - getColor, + getColorV8, DEFAULT_THEME, ARROW_POSITION as ArrowPosition } from '@zendeskgarden/react-theming'; @@ -25,11 +25,11 @@ interface IArgs { } const StyledDiv = styled.div>` - border: ${props => props.hasBorder && `${DEFAULT_THEME.borders.sm} ${getColor('primaryHue')}`}; + border: ${props => props.hasBorder && `${DEFAULT_THEME.borders.sm} ${getColorV8('primaryHue')}`}; box-shadow: ${props => props.hasBoxShadow && - DEFAULT_THEME.shadows.lg('8px', '12px', getColor('chromeHue', 600, DEFAULT_THEME, 0.15)!)}; - background-color: ${getColor('primaryHue', 200)}; + DEFAULT_THEME.shadows.lg('8px', '12px', getColorV8('chromeHue', 600, DEFAULT_THEME, 0.15)!)}; + background-color: ${getColorV8('primaryHue', 200)}; padding: ${p => p.theme.space.xxl}; ${props => diff --git a/packages/theming/demo/stories/GetColorStory.tsx b/packages/theming/demo/stories/GetColorStory.tsx index fa03e596ca1..4c2304df097 100644 --- a/packages/theming/demo/stories/GetColorStory.tsx +++ b/packages/theming/demo/stories/GetColorStory.tsx @@ -8,7 +8,7 @@ import React from 'react'; import styled from 'styled-components'; import { Story } from '@storybook/react'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; interface IArgs { hue: string; @@ -18,7 +18,7 @@ interface IArgs { const StyledDiv = styled.div` background-color: ${props => - getColor( + getColorV8( props.hue, props.shade, DEFAULT_THEME, diff --git a/packages/theming/src/index.ts b/packages/theming/src/index.ts index 6277d319f1e..9f27b05e383 100644 --- a/packages/theming/src/index.ts +++ b/packages/theming/src/index.ts @@ -16,7 +16,7 @@ export { } from './utils/retrieveComponentStyles'; export { default as withTheme } from './utils/withTheme'; export { default as getDocument } from './utils/getDocument'; -export { getColor } from './utils/getColor'; +export { getColorV8 as getColor, getColorV8 } from './utils/getColorV8'; export { getFocusBoxShadow } from './utils/getFocusBoxShadow'; export { default as getLineHeight } from './utils/getLineHeight'; export { default as mediaQuery } from './utils/mediaQuery'; diff --git a/packages/theming/src/utils/focusStyles.spec.tsx b/packages/theming/src/utils/focusStyles.spec.tsx index 0b76a3fcc64..98197a149e7 100644 --- a/packages/theming/src/utils/focusStyles.spec.tsx +++ b/packages/theming/src/utils/focusStyles.spec.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; import styled, { ThemeProps, DefaultTheme, CSSObject } from 'styled-components'; import { focusStyles } from './focusStyles'; -import { Hue } from './getColor'; +import { Hue } from './getColorV8'; import DEFAULT_THEME from '../elements/theme'; import PALETTE from '../elements/palette'; diff --git a/packages/theming/src/utils/getColor.spec.ts b/packages/theming/src/utils/getColorV8.spec.ts similarity index 79% rename from packages/theming/src/utils/getColor.spec.ts rename to packages/theming/src/utils/getColorV8.spec.ts index 4de11ecbe48..32ffa6cd8f5 100644 --- a/packages/theming/src/utils/getColor.spec.ts +++ b/packages/theming/src/utils/getColorV8.spec.ts @@ -5,24 +5,24 @@ * found at http://www.apache.org/licenses/LICENSE-2.0. */ -import { getColor } from './getColor'; +import { getColorV8 } from './getColorV8'; import PALETTE from '../elements/palette'; import DEFAULT_THEME from '../elements/theme'; import { darken, lighten, rgba } from 'polished'; const DEFAULT_SHADE = 600; -describe('getColor', () => { +describe('getColorV8', () => { describe('by hue', () => { it('gets the hue specified by string', () => { - const color = getColor('red'); + const color = getColorV8('red'); const expected = PALETTE.red[DEFAULT_SHADE]; expect(color).toBe(expected); }); it('gets the hue specified by object', () => { - const color = getColor(PALETTE.green); + const color = getColorV8(PALETTE.green); const expected = PALETTE.green[DEFAULT_SHADE]; expect(color).toBe(expected); @@ -30,63 +30,63 @@ describe('getColor', () => { it('falls back when the hue is off palette', () => { const expected = 'orchid'; - const color = getColor(expected); + const color = getColorV8(expected); expect(color).toBe(expected); }); describe('by `color` key', () => { it('gets the default background color', () => { - const color = getColor('background'); + const color = getColorV8('background'); const expected = DEFAULT_THEME.colors.background; expect(color).toBe(expected); }); it('gets the default foreground color', () => { - const color = getColor('foreground'); + const color = getColorV8('foreground'); const expected = DEFAULT_THEME.colors.foreground; expect(color).toBe(expected); }); it('gets the default primary color', () => { - const color = getColor('primaryHue'); + const color = getColorV8('primaryHue'); const expected = (PALETTE as any)[DEFAULT_THEME.colors.primaryHue][DEFAULT_SHADE]; expect(color).toBe(expected); }); it('gets the default danger color', () => { - const color = getColor('dangerHue'); + const color = getColorV8('dangerHue'); const expected = (PALETTE as any)[DEFAULT_THEME.colors.dangerHue][DEFAULT_SHADE]; expect(color).toBe(expected); }); it('gets the default warning color', () => { - const color = getColor('warningHue'); + const color = getColorV8('warningHue'); const expected = (PALETTE as any)[DEFAULT_THEME.colors.warningHue][DEFAULT_SHADE]; expect(color).toBe(expected); }); it('gets the default success color', () => { - const color = getColor('successHue'); + const color = getColorV8('successHue'); const expected = (PALETTE as any)[DEFAULT_THEME.colors.successHue][DEFAULT_SHADE]; expect(color).toBe(expected); }); it('gets the default neutral color', () => { - const color = getColor('neutralHue'); + const color = getColorV8('neutralHue'); const expected = (PALETTE as any)[DEFAULT_THEME.colors.neutralHue][DEFAULT_SHADE]; expect(color).toBe(expected); }); it('gets the default chrome color', () => { - const color = getColor('chromeHue'); + const color = getColorV8('chromeHue'); const expected = (PALETTE as any)[DEFAULT_THEME.colors.chromeHue][DEFAULT_SHADE]; expect(color).toBe(expected); @@ -96,14 +96,14 @@ describe('getColor', () => { describe('by shade', () => { it('gets the specified shade of hue', () => { - const color = getColor('red', 100); + const color = getColorV8('red', 100); const expected = PALETTE.red[100]; expect(color).toBe(expected); }); it('darkens the color if shade is greater than what exists within the hue', () => { - const color = getColor('blue', 900); + const color = getColorV8('blue', 900); const expected = darken(0.05, PALETTE.blue[800]); expect(color).toBe(expected); @@ -111,14 +111,14 @@ describe('getColor', () => { it('darkens a non-hue color if shade is greater than the default', () => { const hex = '#fd5a1e'; - const color = getColor(hex, DEFAULT_SHADE + 100); + const color = getColorV8(hex, DEFAULT_SHADE + 100); const expected = darken(0.05, hex); expect(color).toBe(expected); }); it('lightens the color if shade is lesser than what what exists within the hue', () => { - const color = getColor('blue', 0); + const color = getColorV8('blue', 0); const expected = lighten(0.05, PALETTE.blue[100]); expect(color).toBe(expected); @@ -126,14 +126,14 @@ describe('getColor', () => { it('lightens a non-hue color if shade is greater than the default', () => { const hex = '#fd5a1e'; - const color = getColor(hex, DEFAULT_SHADE - 100); + const color = getColorV8(hex, DEFAULT_SHADE - 100); const expected = lighten(0.05, hex); expect(color).toBe(expected); }); it('is undefined if shade is invalid', () => { - const color = getColor('red', NaN); + const color = getColorV8('red', NaN); expect(color).toBeUndefined(); }); @@ -158,13 +158,13 @@ describe('getColor', () => { it('falls back when hue is off palette', () => { const expected = 'blue'; - const color = getColor(expected, undefined, theme); + const color = getColorV8(expected, undefined, theme); expect(color).toBe(expected); }); it('gets the specified color from the theme', () => { - const color = getColor('test', 400, theme); + const color = getColorV8('test', 400, theme); const expected = theme.palette.test[400]; expect(color).toBe(expected); @@ -178,7 +178,7 @@ describe('getColor', () => { (PALETTE as any)[DEFAULT_THEME.colors.primaryHue][DEFAULT_SHADE], transparency ); - const color = getColor('primaryHue', undefined, undefined, transparency); + const color = getColorV8('primaryHue', undefined, undefined, transparency); expect(color).toBe(expected); }); diff --git a/packages/theming/src/utils/getColor.ts b/packages/theming/src/utils/getColorV8.ts similarity index 98% rename from packages/theming/src/utils/getColor.ts rename to packages/theming/src/utils/getColorV8.ts index afd88b833b1..07812911dc3 100644 --- a/packages/theming/src/utils/getColor.ts +++ b/packages/theming/src/utils/getColorV8.ts @@ -39,7 +39,7 @@ const adjust = (color: string, expected: number, actual: number) => { * @param {Object} theme Context `theme` object. * @param {Number} [transparency] An alpha-channel value between 0 and 1. */ -export const getColor = memoize( +export const getColorV8 = memoize( (hue: Hue, shade: number = DEFAULT_SHADE, theme?: DefaultTheme, transparency?: number) => { let retVal; diff --git a/packages/theming/src/utils/getFocusBoxShadow.spec.ts b/packages/theming/src/utils/getFocusBoxShadow.spec.ts index 5ca29351324..e1b0461b5f3 100644 --- a/packages/theming/src/utils/getFocusBoxShadow.spec.ts +++ b/packages/theming/src/utils/getFocusBoxShadow.spec.ts @@ -8,7 +8,7 @@ import { getFocusBoxShadow } from './getFocusBoxShadow'; import DEFAULT_THEME from '../elements/theme'; import PALETTE from '../elements/palette'; -import { getColor } from './getColor'; +import { getColorV8 } from './getColorV8'; describe('getFocusBoxShadow', () => { it('defaults as expected', () => { @@ -41,7 +41,7 @@ describe('getFocusBoxShadow', () => { const boxShadow = getFocusBoxShadow({ theme: DEFAULT_THEME, hue, shade }); expect(boxShadow).toContain( - `${DEFAULT_THEME.shadowWidths.md} ${getColor(hue, shade, DEFAULT_THEME)}` + `${DEFAULT_THEME.shadowWidths.md} ${getColorV8(hue, shade, DEFAULT_THEME)}` ); }); @@ -55,7 +55,7 @@ describe('getFocusBoxShadow', () => { }); expect(boxShadow).toContain( - `${DEFAULT_THEME.shadowWidths.xs} ${getColor(spacerHue, spacerShade, DEFAULT_THEME)}` + `${DEFAULT_THEME.shadowWidths.xs} ${getColorV8(spacerHue, spacerShade, DEFAULT_THEME)}` ); }); diff --git a/packages/theming/src/utils/getFocusBoxShadow.ts b/packages/theming/src/utils/getFocusBoxShadow.ts index f6a31dfd24e..5462726a4bc 100644 --- a/packages/theming/src/utils/getFocusBoxShadow.ts +++ b/packages/theming/src/utils/getFocusBoxShadow.ts @@ -7,7 +7,7 @@ import DEFAULT_THEME from '../elements/theme'; import { IGardenTheme } from '../types'; -import { DEFAULT_SHADE, Hue, getColor } from './getColor'; +import { DEFAULT_SHADE, Hue, getColorV8 } from './getColorV8'; export type FocusBoxShadowParameters = { boxShadow?: string; @@ -49,14 +49,14 @@ export const getFocusBoxShadow = ({ spacerWidth = 'xs', theme = DEFAULT_THEME }: FocusBoxShadowParameters) => { - const color = getColor(hue, shade, theme); + const color = getColorV8(hue, shade, theme); const shadow = theme.shadows[shadowWidth](color!); if (spacerWidth === null) { return `${inset ? 'inset' : ''} ${shadow}`; } - const spacerColor = getColor(spacerHue, spacerShade, theme); + const spacerColor = getColorV8(spacerHue, spacerShade, theme); const retVal = ` ${inset ? 'inset' : ''} ${theme.shadows[spacerWidth](spacerColor!)}, diff --git a/packages/theming/src/utils/menuStyles.ts b/packages/theming/src/utils/menuStyles.ts index 829ae8d74f3..57e95e1a7a1 100644 --- a/packages/theming/src/utils/menuStyles.ts +++ b/packages/theming/src/utils/menuStyles.ts @@ -6,7 +6,7 @@ */ import { css, DefaultTheme, keyframes } from 'styled-components'; -import { getColor } from './getColor'; +import { getColorV8 } from './getColorV8'; import DEFAULT_THEME from '../elements/theme'; import { MenuPosition } from '../types'; @@ -112,12 +112,12 @@ export default function menuStyles(position: MenuPosition, options: MenuOptions position: relative; /* [2] */ margin: 0; /* [3] */ box-sizing: border-box; - border: ${theme.borders.sm} ${getColor('neutralHue', 300, theme)}; + border: ${theme.borders.sm} ${getColorV8('neutralHue', 300, theme)}; border-radius: ${theme.borderRadii.md}; box-shadow: ${theme.shadows.lg( `${theme.space.base * 5}px`, `${theme.space.base * 7.5}px`, - getColor('chromeHue', 600, theme, 0.15)! + getColorV8('chromeHue', 600, theme, 0.15)! )}; background-color: ${theme.colors.background}; cursor: default; /* [4] */ diff --git a/packages/tooltips/src/elements/Tooltip.spec.tsx b/packages/tooltips/src/elements/Tooltip.spec.tsx index 0ed8c1763dd..5d85714c85b 100644 --- a/packages/tooltips/src/elements/Tooltip.spec.tsx +++ b/packages/tooltips/src/elements/Tooltip.spec.tsx @@ -8,7 +8,7 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; import { render, act, renderRtl } from 'garden-test-utils'; -import { DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; import { Tooltip } from './Tooltip'; import { ITooltipProps } from '../types'; @@ -109,7 +109,7 @@ describe('Tooltip', () => { expect(getByTestId('tooltip')).toHaveStyleRule( 'color', - getColor('neutralHue', 700, DEFAULT_THEME) + getColorV8('neutralHue', 700, DEFAULT_THEME) ); }); diff --git a/packages/tooltips/src/styled/StyledTooltip.ts b/packages/tooltips/src/styled/StyledTooltip.ts index a5b4a68ce21..1b1fb525afb 100644 --- a/packages/tooltips/src/styled/StyledTooltip.ts +++ b/packages/tooltips/src/styled/StyledTooltip.ts @@ -9,7 +9,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { arrowStyles, retrieveComponentStyles, - getColor, + getColorV8, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming'; @@ -121,9 +121,9 @@ const colorStyles = ({ theme, type }: IStyledTooltipProps & ThemeProps (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.shadowWidths.sm} solid; - border-color: ${props => getColor('neutralHue', 400, props.theme)}; + border-color: ${props => getColorV8('neutralHue', 400, props.theme)}; padding: 0; padding-${props => (props.theme.rtl ? 'right' : 'left')}: ${props => props.theme.space.base * 4}px; diff --git a/packages/typography/src/styled/StyledCode.spec.tsx b/packages/typography/src/styled/StyledCode.spec.tsx index 80da22bce53..7dc5cfae358 100644 --- a/packages/typography/src/styled/StyledCode.spec.tsx +++ b/packages/typography/src/styled/StyledCode.spec.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from 'garden-test-utils'; -import { getColor } from '@zendeskgarden/react-theming'; +import { getColorV8 } from '@zendeskgarden/react-theming'; import { StyledCode } from './StyledCode'; describe('StyledCode', () => { @@ -62,14 +62,14 @@ describe('StyledCode', () => { describe('hue', () => { it('renders using a default neutral hue', () => { const { container } = render(); - const color = getColor('neutralHue', 200); + const color = getColorV8('neutralHue', 200); expect(container.firstChild).toHaveStyleRule('background-color', color); }); it('renders using a custom hue', () => { const { container } = render(); - const color = getColor('azure', 200); + const color = getColorV8('azure', 200); expect(container.firstChild).toHaveStyleRule('background-color', color); }); diff --git a/packages/typography/src/styled/StyledCode.ts b/packages/typography/src/styled/StyledCode.ts index 5120fa49597..83a99417da9 100644 --- a/packages/typography/src/styled/StyledCode.ts +++ b/packages/typography/src/styled/StyledCode.ts @@ -6,7 +6,7 @@ */ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; -import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming'; import { StyledFont, IStyledFontProps } from './StyledFont'; import { ICodeProps } from '../types'; @@ -14,9 +14,9 @@ const COMPONENT_ID = 'typography.code'; const colorStyles = (props: IStyledCodeProps & ThemeProps) => { 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: ${backgroundColor}; diff --git a/packages/typography/src/styled/StyledCodeBlock.ts b/packages/typography/src/styled/StyledCodeBlock.ts index 21b03c5daf1..fd8f50dd841 100644 --- a/packages/typography/src/styled/StyledCodeBlock.ts +++ b/packages/typography/src/styled/StyledCodeBlock.ts @@ -6,15 +6,15 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { DEFAULT_THEME, getColor, retrieveComponentStyles } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, getColorV8, retrieveComponentStyles } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'typography.codeblock'; const colorStyles = (props: IStyledCodeBlockProps & ThemeProps) => { - const backgroundColor = getColor('neutralHue', props.isLight ? 100 : 1000, props.theme); + const backgroundColor = getColorV8('neutralHue', props.isLight ? 100 : 1000, props.theme); const foregroundColor = props.isLight ? props.theme.colors.foreground - : getColor('neutralHue', 300, props.theme); + : getColorV8('neutralHue', 300, props.theme); return css` background-color: ${backgroundColor}; diff --git a/packages/typography/src/styled/StyledCodeBlockLine.ts b/packages/typography/src/styled/StyledCodeBlockLine.ts index b7be7f412fc..bd3da3c744e 100644 --- a/packages/typography/src/styled/StyledCodeBlockLine.ts +++ b/packages/typography/src/styled/StyledCodeBlockLine.ts @@ -7,7 +7,7 @@ import styled, { css, ThemeProps, DefaultTheme } from 'styled-components'; import { Language } from 'prism-react-renderer'; -import { DEFAULT_THEME, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, retrieveComponentStyles, getColorV8 } from '@zendeskgarden/react-theming'; import { Diff, Size } from '../types'; import { StyledFont, THEME_SIZES } from './StyledFont'; @@ -37,11 +37,11 @@ const colorStyles = (props: IStyledCodeBlockLineProps & ThemeProps 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` @@ -50,7 +50,7 @@ const colorStyles = (props: IStyledCodeBlockLineProps & ThemeProps }; const lineNumberStyles = (props: IStyledCodeBlockLineProps & ThemeProps) => { - 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') { diff --git a/packages/typography/src/styled/StyledFont.tsx b/packages/typography/src/styled/StyledFont.tsx index 00983c08de4..edd8e068b2d 100644 --- a/packages/typography/src/styled/StyledFont.tsx +++ b/packages/typography/src/styled/StyledFont.tsx @@ -7,7 +7,7 @@ import styled, { css, DefaultTheme, ThemeProps } from 'styled-components'; import { hideVisually, math } from 'polished'; -import { DEFAULT_THEME, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME, retrieveComponentStyles, getColorV8 } from '@zendeskgarden/react-theming'; import { SIZE } from '../types'; const COMPONENT_ID = 'typography.font'; @@ -65,7 +65,7 @@ const fontStyles = (props: IStyledFontProps & ThemeProps) => { 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`