diff --git a/package-lock.json b/package-lock.json index d8a6c6dedc6..358c6a1cd2e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32986,6 +32986,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", @@ -33025,6 +33067,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", @@ -33040,12 +33088,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", @@ -33501,6 +33571,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", @@ -36882,6 +36968,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", @@ -39390,6 +39482,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", @@ -55265,6 +55363,7 @@ "@dnd-kit/sortable": "8.0.0", "@dnd-kit/utilities": "3.2.2", "@zendeskgarden/react-theming": "^9.0.0-next.10", + "@zendeskgarden/react-typography": "^9.0.0-next.10", "@zendeskgarden/svg-icons": "7.0.0" }, "peerDependencies": { diff --git a/packages/drag-drop/demo/~patterns/stories/components.tsx b/packages/drag-drop/demo/~patterns/stories/components.tsx index d449268a326..859f78bca6a 100644 --- a/packages/drag-drop/demo/~patterns/stories/components.tsx +++ b/packages/drag-drop/demo/~patterns/stories/components.tsx @@ -19,6 +19,7 @@ import { Draggable, DraggableList, Dropzone } from '@zendeskgarden/react-drag-dr import { animateLayoutChanges } from './utils'; import type { IDraggableItemProps, IDropIndicatorProps, ISortableColumnProps } from './types'; +import { LG, MD } from '@zendeskgarden/react-typography'; export const DraggableItem = forwardRef((props, ref) => { const { isOverlay, data, tabIndex, ...restProps } = props; @@ -225,9 +226,7 @@ export const DraggablesColumn = ({ }: ISortableColumnProps) => { return (
-

- Produce -

+ Produce {items.length > 0 && ( {items.map(item => ( @@ -242,7 +241,7 @@ export const DraggablesColumn = ({ ))} )} - {items.length === 0 && You picked every fruit!} + {items.length === 0 && No more produce!}
); }; @@ -252,9 +251,7 @@ export const DroppablesColumn = (props: ISortableColumnProps) => { return (
-

- Favorites -

+ Favorites
); diff --git a/packages/drag-drop/package.json b/packages/drag-drop/package.json index 9e5e4896b19..b73a42dafc4 100644 --- a/packages/drag-drop/package.json +++ b/packages/drag-drop/package.json @@ -35,6 +35,7 @@ "@dnd-kit/sortable": "8.0.0", "@dnd-kit/utilities": "3.2.2", "@zendeskgarden/react-theming": "^9.0.0-next.10", + "@zendeskgarden/react-typography": "^9.0.0-next.10", "@zendeskgarden/svg-icons": "7.0.0" }, "keywords": [ diff --git a/packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx b/packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx index 4b446ad041b..f2e5ae0a8d8 100644 --- a/packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx +++ b/packages/drag-drop/src/elements/dropzone/Dropzone.spec.tsx @@ -6,10 +6,9 @@ */ import React from 'react'; -import { rgba } from 'polished'; import { render, renderRtl } from 'garden-test-utils'; import { Dropzone } from './Dropzone'; -import { DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming'; +import { DEFAULT_THEME } from '@zendeskgarden/react-theming'; describe('Dropzone', () => { it('passes ref to underlying DOM element', () => { @@ -154,91 +153,4 @@ describe('Dropzone', () => { expect(queryByText('message')!.nodeName).toBe('P'); }); }); - - const STATES = ['default', 'danger', 'disabled']; - 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: ${getColorV8('neutralHue', 200, DEFAULT_THEME)}; - color: ${getColorV8('neutralHue', 400, DEFAULT_THEME)}; - border-color: ${getColorV8('neutralHue', 300, DEFAULT_THEME)}; - ` - }, - default: { - base: ` - background-color: transparent; - color: ${neutralColor}; - border-color: ${neutralColor}; - `, - active: ` - background-color: ${primaryBgColor}; - color: ${primaryColor}; - border-color: ${primaryColor}; - `, - highlight: ` - background-color: ${primaryBgColor}; - color: ${primaryDarkColor}; - border-color: ${primaryColor}; - border-width: 2px; - border-style: solid; - ` - }, - danger: { - base: ` - background-color: transparent; - color: ${dangerColor}; - border-color: ${dangerColor}; - `, - active: ` - background-color: ${dangerBgColor}; - color: ${dangerColor}; - border-color: ${dangerColor}; - `, - highlight: ` - background-color: ${dangerBgColor}; - color: ${dangerDarkColor}; - border-color: ${dangerColor}; - border-width: 2px; - border-style: solid; - ` - } - }; - - describe.each(STATES)(`%s state`, state => { - it('applies correct base styling', () => { - const { container } = render( - - ); - - expect(container.firstChild).toHaveStyle(StateMap[state].base); - }); - - if (StateMap[state].active) { - it('applies correct active styling', () => { - const { container } = render( - - ); - - expect(container.firstChild).toHaveStyle(StateMap[state].active); - }); - } - - if (StateMap[state].highlight) { - it('applies correct highlight styling', () => { - const { container } = render( - - ); - - expect(container.firstChild).toHaveStyle(StateMap[state].highlight); - }); - } - }); }); diff --git a/packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts b/packages/drag-drop/src/styled/draggable-list/StyledDropIndicator.ts index ee18542721b..8f15b9451e4 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, getColorV8 } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'draggable_list.drop_indicator'; @@ -16,15 +16,14 @@ export interface IStyledDropIndicatorProps extends ThemeProps { const colorStyles = (props: IStyledDropIndicatorProps) => { const { theme } = props; - const backgroundColor = getColorV8('primaryHue', 600, theme); - const color = getColorV8('primaryHue', 600, theme); + const color = getColor({ variable: 'border.primaryEmphasis', theme }); return css` - box-shadow: ${`0 0 0 ${theme.borderWidths.sm} ${color}`}; + box-shadow: ${theme.shadows.xs(color)}; &::before, &::after { - background-color: ${backgroundColor}; + background-color: ${color}; } &:focus { diff --git a/packages/drag-drop/src/styled/draggable/StyledDraggable.spec.tsx b/packages/drag-drop/src/styled/draggable/StyledDraggable.spec.tsx index a83e3e47c0c..383e50ff671 100644 --- a/packages/drag-drop/src/styled/draggable/StyledDraggable.spec.tsx +++ b/packages/drag-drop/src/styled/draggable/StyledDraggable.spec.tsx @@ -6,16 +6,10 @@ */ import React from 'react'; -import userEvent from '@testing-library/user-event'; -import { DEFAULT_THEME, PALETTE, getColorV8 } from '@zendeskgarden/react-theming'; -import { render, fireEvent } from 'garden-test-utils'; -import { StyledDraggable, getDragShadow } from './StyledDraggable'; - -const GARDEN_FOCUS_VISIBLE = '&:focus-visible'; +import { render } from 'garden-test-utils'; +import { StyledDraggable } from './StyledDraggable'; describe('StyledDraggable', () => { - const user = userEvent.setup(); - it('renders the expected element', () => { const { container } = render(); @@ -47,86 +41,4 @@ describe('StyledDraggable', () => { expect(container.firstChild).toHaveStyle('cursor: default'); }); }); - - describe('states', () => { - it('applies correct styles when grabbed', () => { - const { container } = render(); - - expect(container.firstChild).toHaveStyle(`background-color: ${PALETTE.white}`); - expect(container.firstChild).toHaveStyle(`box-shadow: ${getDragShadow(DEFAULT_THEME)}`); - }); - - it('applies correct styles on hover', async () => { - // background (primaryHue, 600, 0.08) - const { queryByText } = render(draggable); - const draggable = queryByText('draggable') as HTMLElement; - - await user.hover(draggable); - - expect(draggable).toHaveStyleRule( - 'background-color', - getColorV8('primaryHue', 600, DEFAULT_THEME, 0.08), - { modifier: ':hover' } - ); - }); - - it('applies correct styles on hover when grabbed', async () => { - const { queryByText } = render(draggable); - const draggable = queryByText('draggable') as HTMLElement; - - await user.hover(draggable); - - expect(draggable).toHaveStyle(`background-color: ${PALETTE.white}`); - }); - - it('applies correct styles when focused', () => { - const { queryByText } = render(draggable); - const draggable = queryByText('draggable') as HTMLElement; - - fireEvent.focus(draggable); - - expect(draggable).toHaveStyleRule('box-shadow', '0 0 0 1px #fff, 0 0 0 3px #1f73b7', { - modifier: GARDEN_FOCUS_VISIBLE - }); - }); - - it('applies correct styles when focused and grabbed', () => { - // box-shadow (drag & focus) - const { queryByText } = render( - - draggable - - ); - const draggable = queryByText('draggable') as HTMLElement; - - fireEvent.focus(draggable); - - expect(draggable).toHaveStyleRule( - 'box-shadow', - '0 0 0 1px #fff, 0 0 0 3px #1f73b7,0 20px 28px 0 rgba(104,115,125,0.35)', - { modifier: GARDEN_FOCUS_VISIBLE } - ); - }); - - it('applies correct styles when disabled', () => { - const { container } = render(); - - expect(container.firstChild).toHaveStyle( - `background-color: ${getColorV8('neutralHue', 200, DEFAULT_THEME)}` - ); - expect(container.firstChild).toHaveStyleRule( - 'color', - getColorV8('neutralHue', 400, DEFAULT_THEME) - ); - }); - - it('applies correct styles as placeholder', () => { - const { container } = render(); - - expect(container.firstChild).toHaveStyle( - `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 05eefe89c83..ccca4c86bab 100644 --- a/packages/drag-drop/src/styled/draggable/StyledDraggable.ts +++ b/packages/drag-drop/src/styled/draggable/StyledDraggable.ts @@ -6,11 +6,10 @@ */ import styled, { ThemeProps, DefaultTheme, css } from 'styled-components'; -import { rgba } from 'polished'; import { retrieveComponentStyles, DEFAULT_THEME, - getColorV8, + getColor, IGardenTheme, getLineHeight, focusStyles @@ -29,10 +28,16 @@ export interface IStyledDraggableProps extends ThemeProps { } export function getDragShadow(theme: IGardenTheme) { - const { space, shadows } = theme; + const { space, shadows, opacity } = theme; const offsetY = `${space.base * 5}px`; const blurRadius = `${space.base * 7}px`; - const color = getColorV8('neutralHue', 600, theme, 0.35) as string; + const color = getColor({ + hue: 'neutralHue', + shade: 1200, + light: { transparency: opacity[200] }, + dark: { transparency: opacity[1000] }, + theme + }); return shadows.lg(offsetY, blurRadius, color); } @@ -40,10 +45,14 @@ export function getDragShadow(theme: IGardenTheme) { const colorStyles = (props: IStyledDraggableProps) => { const { isBare, isGrabbed, isDisabled, isPlaceholder, focusInset, theme } = props; - const baseColor = getColorV8('primaryHue', 600, theme); const dragShadow = getDragShadow(theme); - const baseBgColor = getColorV8('background', 600 /* default shade */, theme); - const disabledColor = getColorV8('neutralHue', 400, theme); + const baseBgColor = getColor({ variable: 'background.default', theme }); + const placeholderBgColor = getColor({ variable: 'background.disabled', theme }); + const disabledBgColor = getColor({ + variable: 'background.disabled', + theme + }); + const disabledColor = getColor({ variable: 'foreground.disabled', theme }); let color; let hoverBackgroundColor; @@ -52,14 +61,18 @@ const colorStyles = (props: IStyledDraggableProps) => { let backgroundColor = baseBgColor; if (isDisabled) { - backgroundColor = getColorV8('neutralHue', 200, theme)!; + backgroundColor = disabledBgColor; color = disabledColor; } else if (isPlaceholder) { - backgroundColor = getColorV8('neutralHue', 800, theme, 0.1)!; + backgroundColor = placeholderBgColor; } else { - color = getColorV8('foreground', 600 /* default shade */, theme); - borderColor = isBare ? 'transparent' : (getColorV8('neutralHue', 300, theme) as string); - hoverBackgroundColor = isGrabbed ? baseBgColor : rgba(baseColor as string, 0.08); + color = getColor({ variable: 'foreground.default', theme }); + borderColor = isBare ? 'transparent' : getColor({ variable: 'border.default', theme }); + hoverBackgroundColor = getColor({ + variable: isGrabbed ? 'background.raised' : 'background.primaryEmphasis', + ...(!isGrabbed && { transparency: theme.opacity[100], dark: { offset: -100 } }), + theme + }); boxShadow = dragShadow; } diff --git a/packages/drag-drop/src/styled/draggable/StyledGrip.ts b/packages/drag-drop/src/styled/draggable/StyledGrip.ts index 89f924b5632..75da33f4e86 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, getColorV8 } from '@zendeskgarden/react-theming'; +import { retrieveComponentStyles, DEFAULT_THEME, getColor } 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 => getColorV8('neutralHue', 600, p.theme)}; + color: ${p => getColor({ variable: 'foreground.subtle', theme: p.theme })}; ${sizeStyles} diff --git a/packages/drag-drop/src/styled/dropzone/StyledDropzone.ts b/packages/drag-drop/src/styled/dropzone/StyledDropzone.ts index 78f091ae66c..b1c8ff5798d 100644 --- a/packages/drag-drop/src/styled/dropzone/StyledDropzone.ts +++ b/packages/drag-drop/src/styled/dropzone/StyledDropzone.ts @@ -6,8 +6,8 @@ */ import styled, { DefaultTheme, ThemeProps, css } from 'styled-components'; -import { rgba, math } from 'polished'; -import { retrieveComponentStyles, getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming'; +import { math } from 'polished'; +import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'dropzone'; @@ -24,25 +24,40 @@ export interface IStyledDropzoneProps extends ThemeProps { const colorStyles = (props: IStyledDropzoneProps) => { const { isDanger, isDisabled, isActive, isHighlighted, theme } = props; - const hue = isDanger ? 'dangerHue' : 'primaryHue'; - const baseColor = getColorV8(hue, 600, theme); - const neutralColor = getColorV8('neutralHue', 600, theme); + const fgVariable = isDanger ? 'foreground.danger' : 'foreground.primary'; + const fgActive = getColor({ variable: fgVariable, theme }); + const borderActive = getColor({ + variable: isDanger ? `border.dangerEmphasis` : 'border.primaryEmphasis', + theme + }); let backgroundColor = 'transparent'; - let borderColor = neutralColor; - let color = neutralColor; + let borderColor = getColor({ variable: `border.emphasis`, theme }); + let color = getColor({ variable: `foreground.subtle`, theme }); if (isDisabled) { - backgroundColor = getColorV8('neutralHue', 200, theme) as string; - borderColor = getColorV8('neutralHue', 300, theme); - color = getColorV8('neutralHue', 400, theme); + backgroundColor = getColor({ variable: 'background.disabled', theme }); + borderColor = getColor({ variable: `border.disabled`, theme }); + color = getColor({ variable: 'foreground.disabled', theme }); } else if (isActive || isHighlighted) { - color = isHighlighted ? getColorV8(hue, 800, theme) : baseColor; - backgroundColor = rgba(baseColor as string, 0.08); - borderColor = baseColor; + color = isHighlighted + ? getColor({ + variable: fgVariable, + light: { offset: 200 }, + dark: { offset: -200 }, + theme + }) + : fgActive; + backgroundColor = getColor({ + variable: isDanger ? 'background.dangerEmphasis' : 'background.primaryEmphasis', + transparency: theme.opacity[100], + dark: { offset: -100 }, + theme + }); + borderColor = borderActive; } else if (isDanger) { - borderColor = baseColor; - color = baseColor; + borderColor = borderActive; + color = fgActive; } return css`