fix: bump pdt (#895)

* fix: bump pdt

* fix build

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",

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<BadgeProps> = ({
   className = '',
   message = '',

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"
       >

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;
 

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)

src/components/MediaModal/MediaModal.tsx

@@ -115,7 +115,7 @@ export const MediaModal: React.FC<MediaModalProps> = forwardRef<
         onClick={onDismiss}
         cursor="pointer"
         color="grey-300"
-        background="transparent-500"
+        background="transparent"
         borderWidth="0"
         padding="xs"
         hover={{

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'));
     });

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',

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"

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 {

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

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':

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"