From 352e0476f68cb7607c0997b7ea90ca878eab0188 Mon Sep 17 00:00:00 2001 From: Nathan Young <1447339+nathanyoung@users.noreply.github.com> Date: Fri, 14 Jun 2024 10:32:41 -0600 Subject: [PATCH] fix: bump pdt (#895) * fix: bump pdt * fix build --- package.json | 2 +- src/components/Badge/Badge.tsx | 11 ----------- src/components/Box/Box.Overview.stories.mdx | 2 +- src/components/Box/Box.VisualTests.stories.tsx | 2 +- .../CheckboxInput/components/Checkbox.module.scss | 2 +- src/components/MediaModal/MediaModal.tsx | 2 +- src/components/Popover/Popover.test.tsx | 2 +- src/components/Popover/Popover.tsx | 2 +- src/components/Toast/ToastNotification.tsx | 2 +- src/components/Toggle/Toggle.module.scss | 2 +- src/docs/Foundation.DesignTokens.stories.mdx | 2 +- src/docs/Theming.stories.mdx | 2 +- yarn.lock | 8 ++++---- 13 files changed, 15 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 4301af561..347cb9a54 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@palmetto/dialog": "^0.16.4", - "@palmetto/palmetto-design-tokens": "1.4.0", + "@palmetto/palmetto-design-tokens": "1.4.1", "@popperjs/core": "^2.5.3", "classnames": "^2.2.6", "cleave.js": "^1.6.0", diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 25f312151..4b1cbdd3f 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -45,17 +45,6 @@ export interface BadgeProps { [x: string]: any; // eslint-disable-line } -export const BADGE_COLOR_MAP: { [key in BadgeVariant]: BadgeColorAttributes } = { - info: { font: 'dark-500', background: 'info-100' }, - primary: { font: 'dark-500', background: 'primary-100' }, - success: { font: 'dark-500', background: 'success-100' }, - secondary: { font: 'dark-500', background: 'secondary-100' }, - warning: { font: 'dark-500', background: 'warning-100' }, - tertiary: { font: 'dark-500', background: 'tertiary-100' }, - danger: { font: 'dark-500', background: 'danger-100' }, - default: { font: 'dark-500', background: 'grey-100' }, -}; - export const Badge: FC = ({ className = '', message = '', diff --git a/src/components/Box/Box.Overview.stories.mdx b/src/components/Box/Box.Overview.stories.mdx index a43699131..d9a4a6739 100644 --- a/src/components/Box/Box.Overview.stories.mdx +++ b/src/components/Box/Box.Overview.stories.mdx @@ -1693,7 +1693,7 @@ Currently our library supports hover states for: justifyContent="center" hover={{ background: 'primary-600', - color: 'white-500', + color: 'white', }} cursor="pointer" > diff --git a/src/components/Box/Box.VisualTests.stories.tsx b/src/components/Box/Box.VisualTests.stories.tsx index efa5416d4..a9b3f9f9f 100644 --- a/src/components/Box/Box.VisualTests.stories.tsx +++ b/src/components/Box/Box.VisualTests.stories.tsx @@ -324,7 +324,7 @@ ResponsiveShadow.args = { hd: '2xl', }, padding: 'sm', - background: 'white-500', + background: 'white', }; ResponsiveShadow.parameters = RESPONSIVE_STORY; diff --git a/src/components/CheckboxInput/components/Checkbox.module.scss b/src/components/CheckboxInput/components/Checkbox.module.scss index 8d4613016..4c0b67552 100644 --- a/src/components/CheckboxInput/components/Checkbox.module.scss +++ b/src/components/CheckboxInput/components/Checkbox.module.scss @@ -76,7 +76,7 @@ $lg-dimension: 36px; input:checked + div, input:indeterminate + div { - background: var(--color-brand-white-500); + background: var(--color-background-white); color: var( --form-control-checkbox-color-checked, var(--color-text-primary) diff --git a/src/components/MediaModal/MediaModal.tsx b/src/components/MediaModal/MediaModal.tsx index e1a5193dd..3fd39236e 100644 --- a/src/components/MediaModal/MediaModal.tsx +++ b/src/components/MediaModal/MediaModal.tsx @@ -115,7 +115,7 @@ export const MediaModal: React.FC = forwardRef< onClick={onDismiss} cursor="pointer" color="grey-300" - background="transparent-500" + background="transparent" borderWidth="0" padding="xs" hover={{ diff --git a/src/components/Popover/Popover.test.tsx b/src/components/Popover/Popover.test.tsx index 974a905a6..11ff05e9e 100644 --- a/src/components/Popover/Popover.test.tsx +++ b/src/components/Popover/Popover.test.tsx @@ -24,7 +24,7 @@ describe('Popover', () => { expect(popoverContainer).toBeInTheDocument(); expect(popoverContainer).toHaveAttribute('role', 'dialog'); expect(popoverContainer).toHaveAttribute('aria-hidden', 'false'); - expect(popoverContainer).toHaveClass('background-color-white-500'); + expect(popoverContainer).toHaveClass('background-color-white'); expect(popoverContainer).toHaveClass('p-sm'); await waitFor(() => expect(popoverContainer).toHaveAttribute('data-popper-placement', 'right')); }); diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx index f15cdef5f..45302d967 100644 --- a/src/components/Popover/Popover.tsx +++ b/src/components/Popover/Popover.tsx @@ -95,7 +95,7 @@ export type PopoverProps = { }) const contentContainerDefaults: BoxProps = { - background: 'white-500', + background: 'white', padding: 'sm', radius: 'sm', shadow: 'md', diff --git a/src/components/Toast/ToastNotification.tsx b/src/components/Toast/ToastNotification.tsx index f7dc38bcb..703ffca94 100644 --- a/src/components/Toast/ToastNotification.tsx +++ b/src/components/Toast/ToastNotification.tsx @@ -106,7 +106,7 @@ const renderDismissIcon = ( margin="0 0 0 sm" padding="0 0 0 sm" cursor="pointer" - background="transparent-500" + background="transparent" height="100" onClick={onDismiss} aria-label="dismiss notification" diff --git a/src/components/Toggle/Toggle.module.scss b/src/components/Toggle/Toggle.module.scss index 531bdeaeb..9f054fc78 100644 --- a/src/components/Toggle/Toggle.module.scss +++ b/src/components/Toggle/Toggle.module.scss @@ -169,7 +169,7 @@ transition: transform 0.25s ease; border-radius: 50%; box-shadow: 0 0 2px rgb(0 0 0 / 45%); - background-color: var(--color-brand-white-500); + background-color: var(--color-background-white); } .toggle-track { diff --git a/src/docs/Foundation.DesignTokens.stories.mdx b/src/docs/Foundation.DesignTokens.stories.mdx index c0736ab34..d847d9656 100644 --- a/src/docs/Foundation.DesignTokens.stories.mdx +++ b/src/docs/Foundation.DesignTokens.stories.mdx @@ -34,7 +34,7 @@ Alias tokens relate to a specific context or abstraction. Aliases help communica ```css --color-brand-primary-500: #008433; /* alias */ ---form-control-background-color: --color-brand-white-500; /* common */ +--form-control-background-color: --color-background-white; /* common */ ``` ### Component Specific Tokens diff --git a/src/docs/Theming.stories.mdx b/src/docs/Theming.stories.mdx index 1100a7883..b6421cf04 100644 --- a/src/docs/Theming.stories.mdx +++ b/src/docs/Theming.stories.mdx @@ -203,7 +203,7 @@ Here is an example where all three token types are used to create a customized a 'var(--color-brand-primary-600)', '--color-background-button-primary-active': 'var(--color-brand-primary-700)', - '--color-background-button-secondary': 'var(--color-brand-white-500)', + '--color-background-button-secondary': 'var(--color-background-white)', '--color-background-button-secondary-hover': 'var(--color-brand-primary-50)', '--color-background-button-secondary-active': diff --git a/yarn.lock b/yarn.lock index 5aa2c614a..03bb9ef7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3532,10 +3532,10 @@ react-remove-scroll "^2.4.3" tslib "^2.3.0" -"@palmetto/palmetto-design-tokens@1.4.0": - version "1.4.0" - resolved "https://registry.yarnpkg.com/@palmetto/palmetto-design-tokens/-/palmetto-design-tokens-1.4.0.tgz#6fdbf3d7b54d7533c6a4ccd7d2f9f1477f706dfc" - integrity sha512-ewb0eFIdLT6fcNUaG1NNDuoJmBy3T1RYmBv9Dd2x4fuMr1gHuBGpH4mfA5MFYhiQBpddLNQm+kcm0aSnTh/YoA== +"@palmetto/palmetto-design-tokens@1.4.1": + version "1.4.1" + resolved "https://registry.yarnpkg.com/@palmetto/palmetto-design-tokens/-/palmetto-design-tokens-1.4.1.tgz#d4d5048b87bed32adc7ba8f4de05e2a6f7dcd78e" + integrity sha512-w5cMbzJHMvFz6v4LUtLxuKAESmCvdf4OyT5S7HS7eaiCYmorR9cMERyGj0NRMareHclgtaPrB/oyIw6hSLIKTA== "@pmmmwh/react-refresh-webpack-plugin@^0.5.3": version "0.5.10"