@popsure/dirty-swan 0.58.7 → 0.59.0-alpha

package/src/lib/components/logo/logo.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LogoColor } from './LogoColor';
+import { LogoWhite } from './LogoWhite';
+import { LogoBlack } from './LogoBlack';
+import { LogoOrangeBox } from './LogoOrangeBox';
+import { LogoInvertedColor } from './LogoInvertedColor';
+import { LogoInverted } from './LogoInverted';
+import { LogoPositiveColor } from './LogoPositiveColor';
+import { LogoPositiveBlack } from './LogoPositiveBlack';
+
+export default {
+  title: 'JSX/Logo',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export const StandardLogos = () => (
+  <div className='d-flex gap24 ai-center fd-wrap'>
+    <div className='bg-neutral-200 br8 p16 ta-center'>
+      <LogoColor width={100} />
+      <p className='p-p mt16'>LogoColor</p>
+    </div>
+    <div className='bg-neutral-200 br8 p16 ta-center'>
+      <LogoBlack width={100} />
+      <p className='p-p mt16'>LogoBlack</p>
+    </div>
+    <div className='bg-neutral-900 br8 p16 ta-center'>
+      <LogoWhite width={100} />
+      <p className='p-p tc-white mt16'>LogoWhite</p>
+    </div>
+    <div className='bg-neutral-200 br8 p16 ta-center'>
+      <LogoOrangeBox width={100} />
+      <p className='p-p mt16'>LogoOrangeBox</p>
+    </div>
+  </div>
+);
+
+export const HorizontalLogos = () => (
+  <div className='d-flex gap24 ai-center fd-wrap'>
+    <div className='ta-center br8 p16 bg-neutral-200'>
+      <LogoPositiveColor width={150} />
+      <p className='p-p mt16'>LogoPositiveColor</p>
+    </div>
+    <div className='ta-center br8 p16 bg-neutral-200'>
+      <LogoPositiveBlack width={150} />
+      <p className='p-p mt16'>LogoPositiveBlack</p>
+    </div>
+    <div className='ta-center br8 p16 bg-neutral-900'>
+      <LogoInvertedColor width={150} />
+      <p className='p-p mt16 tc-white'>LogoInvertedColor</p>
+    </div>
+    <div className='ta-center br8 p16 bg-neutral-900'>
+      <LogoInverted width={150} />
+      <p className='p-p mt16 tc-white'>LogoInverted</p>
+    </div>
+  </div>
+);
+
+export const Sizes = () => (
+  <div className='d-flex gap24 ai-center fd-wrap'>
+    <div className='ta-center'>
+      <LogoColor width={64} />
+      <p className='p-p'>64px</p>
+    </div>
+    <div className='ta-center'>
+      <LogoColor width={128} />
+      <p className='p-p'>128px</p>
+    </div>
+    <div className='ta-center'>
+      <LogoColor width={256} />
+      <p className='p-p'>256px</p>
+    </div>
+  </div>
+);

package/src/lib/components/modal/genericModal/index.tsx

@@ -110,7 +110,7 @@ const InnerModal = ({
                   hideLabel
                   leftIcon={
                     <XIcon
-                      color="grey-700"
+                      color="neutral-800"
                       className={classNames?.closeButtonIcon}
                     />
                   }

package/src/lib/components/modal/genericModal/style.module.scss

@@ -58,8 +58,8 @@
   background:
     linear-gradient($ds-white 30%, $ds-white),
     linear-gradient($ds-white, $ds-white 70%),
-    linear-gradient($ds-grey-300 30%, $ds-grey-300),
-    linear-gradient($ds-grey-300, $ds-grey-300 70%);
+    linear-gradient($ds-neutral-300 30%, $ds-neutral-300),
+    linear-gradient($ds-neutral-300, $ds-neutral-300 70%);
   background-repeat: no-repeat;
   background-size: 100% 1px;
   background-attachment: local, local, scroll, scroll;
@@ -68,5 +68,5 @@
 .footer {
   position: sticky;
   bottom: 0;
-  border-top: 1px solid $ds-grey-300;
+  border-top: 1px solid $ds-neutral-300;
 }

package/src/lib/components/multiDropzone/UploadFileCell/index.tsx

@@ -35,8 +35,8 @@ const UploadFileCell: React.FC<Props> = ({
   const hasError = uploadStatus === 'ERROR';
 
   const mapFileIconColor: { [k in UploadStatus]: Color } = {
-    UPLOADING: 'purple-500',
-    COMPLETE: 'grey-500',
+    UPLOADING: 'purple-600',
+    COMPLETE: 'neutral-600',
     ERROR: 'red-500',
   };
 
@@ -104,7 +104,7 @@ const UploadFileCell: React.FC<Props> = ({
                 variant="filledWhite"
                 className={classnames('mr16', styles.button)}
                 leftIcon={
-                  <EyeVisionIcon noMargin color={'grey-500'} size={24} />
+                  <EyeVisionIcon noMargin color={'neutral-600'} size={24} />
                 }
               >
                 Preview file
@@ -119,7 +119,7 @@ const UploadFileCell: React.FC<Props> = ({
                 className={styles.button}
                 leftIcon={
                   <Trash2Icon
-                    color={hasError ? 'red-500' : 'grey-500'}
+                    color={hasError ? 'red-500' : 'neutral-600'}
                     size={24}
                     noMargin
                   />

package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss

@@ -8,7 +8,7 @@
   min-height: 64px;
   padding: 8px 16px;
 
-  border: 1px solid $ds-grey-400;
+  border: 1px solid $ds-neutral-400;
   border-radius: 8px;
   background-color: white;
 
@@ -43,13 +43,13 @@
 }
 
 .progress-bar {
-  background-color: $ds-grey-200;
+  background-color: $ds-neutral-100;
   border-radius: 10px;
   height: 4px;
 }
 
 .progress-bar-filler {
-  background-color: $ds-primary-500;
+  background-color: $ds-purple-600;
   border-radius: 10px;
   height: 4px;
   position: absolute;
@@ -75,7 +75,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid $ds-grey-900;
+    outline: 2px solid $ds-neutral-900;
     border-radius: 2px;
     outline-offset: 2px;
   }

package/src/lib/components/multiDropzone/index.tsx

@@ -123,7 +123,7 @@ const MultiDropzone = ({
         <UploadCloudIcon
           className={isCondensed ? styles.img : ''}
           size={isCondensed ? 24 : 64}
-          color={'purple-500'}
+          color={'purple-600'}
         />
         <div
           className={`p-h4 mt8 d-block c-pointer ${
@@ -135,7 +135,7 @@ const MultiDropzone = ({
               'Please wait while uploading file...'
             : instructionsText}
         </div>
-        <div className="p-p--small tc-grey-500">
+        <div className="p-p--small tc-neutral-600">
           {textOverrides?.supportsText || placeholder}
         </div>
       </div>

package/src/lib/components/multiDropzone/style.module.scss

@@ -6,20 +6,20 @@
 }
 
 .dropzoneContainer {
-  border: 1px dashed var(--ds-primary-500);
+  border: 1px dashed var(--ds-purple-600);
   padding: 32px 0;
   background-color: white;
 
   transition: all 0.6s ease-in-out;
 
   &:focus-visible {
-    outline: 2px solid $ds-grey-900;
+    outline: 2px solid $ds-neutral-900;
     border-radius: 2px;
     outline-offset: 2px;
   }
 
   &:hover {
-    background-color: var(--ds-primary-100);
+    background-color: var(--ds-purple-300);
     transition: 0.5s ease;
   }
 }

package/src/lib/components/segmentedControl/index.tsx

@@ -63,7 +63,7 @@ const SegmentedControl = ({
                 {typeof value === 'string' ? (
                   <div
                     className={`p-h4 ta-center ${
-                      selectedIndex === index ? '' : 'tc-primary-500'
+                      selectedIndex === index ? '' : 'tc-purple-600'
                     }`}
                   >
                     {value}
@@ -72,7 +72,7 @@ const SegmentedControl = ({
                   <>
                     <div
                       className={`p-h4 ta-center ${
-                        selectedIndex === index ? '' : 'tc-primary-500'
+                        selectedIndex === index ? '' : 'tc-purple-600'
                       }`}
                     >
                       {value.title}
@@ -80,8 +80,8 @@ const SegmentedControl = ({
                     <div
                       className={`p-p--small ta-center ${
                         selectedIndex === index
-                          ? 'tc-grey-500'
-                          : 'tc-primary-500'
+                          ? 'tc-neutral-600'
+                          : 'tc-purple-600'
                       }`}
                     >
                       {value.subtitle}

package/src/lib/components/segmentedControl/style.module.scss

@@ -22,7 +22,7 @@
   padding-right: 16px;
 
   &:focus {
-    outline-color: var(--ds-primary-500);
+    outline-color: var(--ds-purple-600);
     outline-offset: 2px;
   }
 }

package/src/lib/components/signaturePad/style.module.scss

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  background-color: var(--ds-grey-200);
+  background-color: var(--ds-neutral-100);
   border-radius: 8px;
   height: 272px;
 }
@@ -19,7 +19,7 @@
   left: 72px;
   bottom: 32px;
 
-  background-color: var(--ds-grey-400);
+  background-color: var(--ds-neutral-400);
 
   border-radius: 1px;
 }
@@ -31,7 +31,7 @@
   right: 16px;
   bottom: 32px;
 
-  color: var(--ds-primary-500);
+  color: var(--ds-purple-600);
   cursor: pointer;
 
   border: none;
@@ -42,7 +42,7 @@
   background-color: transparent;
 
   &:hover {
-    color: var(--ds-primary-700);
+    color: var(--ds-purple-700);
   }
 
   &:before {
@@ -65,7 +65,7 @@
   }
 
   &[disabled] {
-    color: var(--ds-grey-500);
+    color: var(--ds-neutral-600);
   }
 }
 
@@ -86,5 +86,5 @@
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
 
-  background-color: var(--ds-grey-500);
+  background-color: var(--ds-neutral-600);
 }

package/src/lib/components/table/Table.tsx

@@ -180,7 +180,7 @@ const Table = ({
           classNames={{
             buttonWrapper: 'm8 mt32',
             title: 'd-flex gap8 ai-center jc-center fw-bold',
-            wrapper: 'bg-grey-200',
+            wrapper: 'bg-neutral-100',
           }}
           title={
             <>

package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.module.scss

@@ -20,7 +20,7 @@
   display: flex;
   line-height: 38px;
   text-decoration: underline;
-  text-decoration-color: $ds-primary-500;
+  text-decoration-color: $ds-purple-600;
   text-decoration-thickness: 4px;
   text-underline-offset: 8px;
 }

package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx

@@ -101,7 +101,7 @@ export const BaseCell = ({
                 <SelectedIcon
                   aria-hidden="true"
                   key={value}
-                  color={value <= rating?.value ? 'primary-500' : 'grey-400'}
+                  color={value <= rating?.value ? 'purple-600' : 'neutral-400'}
                   className={styles.icon}
                   size={rating?.type === 'zap' ? 16 : 14}
                 />
@@ -117,7 +117,7 @@ export const BaseCell = ({
                   data-testid="table-cell-boolean-yes"
                   size={24}
                   aria-hidden
-                  color="primary-500"
+                  color="purple-600"
                 />
               ) : (
                 <XIcon
@@ -125,7 +125,7 @@ export const BaseCell = ({
                   data-testid="table-cell-boolean-no"
                   size={24}
                   aria-hidden
-                  color="grey-400"
+                  color="neutral-400"
                 />
               )}
             </span>
@@ -145,7 +145,7 @@ export const BaseCell = ({
 
             {text && fontVariant === 'PRICE' && (
               <div
-                className="p-h1 p--serif tc-primary-500"
+                className="p-h1 p--serif tc-purple-600"
                 data-testid="table-cell-content"
               >
                 {text}
@@ -183,7 +183,7 @@ export const BaseCell = ({
           <div
             className={classNames(
               styles.description,
-              'd-flex p-p--small tc-grey-500',
+              'd-flex p-p--small tc-neutral-600',
               alignClassName
             )}
           >

package/src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.module.scss

@@ -1,9 +1,9 @@
 @use "../../../../../../scss/public/colors" as *;
 
-$defaultColor: $ds-purple-100;
-$oneOrTwoColor: $ds-grey-500;
+$defaultColor: $ds-purple-300;
+$oneOrTwoColor: $ds-neutral-600;
 $threeOrFourColor: $ds-blue-300;
-$allFilledColor: $ds-purple-500;
+$allFilledColor: $ds-purple-600;
 
 .progressBar {
   margin-bottom: 4px;

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.module.scss

@@ -2,20 +2,20 @@
 @use "../../../../../scss/public/colors" as *;
 
 .buttonCell {
-  color: $ds-grey-900;
-  border: 1px solid $ds-grey-400;
+  color: $ds-neutral-900;
+  border: 1px solid $ds-neutral-400;
 
   transition: all 0.3s ease-in-out;
 
   &:disabled {
     border: none;
-    background-color: $ds-grey-200;
-    color: $ds-grey-900;
+    background-color: $ds-neutral-100;
+    color: $ds-neutral-900;
     opacity: 1;
     cursor: default;
 
     &:hover {
-      background-color: $ds-grey-200;
+      background-color: $ds-neutral-100;
     }
   }
 
@@ -34,6 +34,6 @@
 
 .selected {
   transition: all 0.3 ease-in-out;
-  border: 2px solid $ds-purple-500;
-  background-color: $ds-purple-50;
+  border: 2px solid $ds-purple-600;
+  background-color: $ds-purple-100;
 }

package/src/lib/components/table/components/TableCell/ButtonCell/ButtonCell.tsx

@@ -48,7 +48,7 @@ export const ButtonCell = ({
         disabled={disabled}
       >
         {buttonCaption}
-        {price && <span className="p-p tc-purple-500">{price}</span>}
+        {price && <span className="p-p tc-purple-600">{price}</span>}
       </Button>
     </div>
   );

package/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx

@@ -48,7 +48,7 @@ export const CTACell = ({
         {renderedIcon}
         <p className="p-h3">
           {title}
-          {price && <span className="tc-purple-500"> {price}</span>}
+          {price && <span className="tc-purple-600"> {price}</span>}
         </p>
       </div>
 

package/src/lib/components/table/components/TableCell/TableCell.module.scss

@@ -34,7 +34,7 @@
     bottom: 0;
     right: 0;
     width: 1px;
-    background-color: $ds-grey-200;
+    background-color: $ds-neutral-100;
   }
 }
 

package/src/lib/components/table/components/TableContents/TableContents.tsx

@@ -84,8 +84,8 @@ const TableContents = ({
                     aria-expanded={isExpanded ? 'true' : 'false'}
                     aria-hidden
                     classNames={{
-                      wrapper: 'bg-purple-50 pl16',
-                      icon: classNames(styles.cardIcon, 'tc-grey-900'),
+                      wrapper: 'bg-purple-100 pl16',
+                      icon: classNames(styles.cardIcon, 'tc-neutral-900'),
                     }}
                     dropShadow={false}
                     icon={renderedIcon}

package/src/lib/components/toast/index.stories.tsx

@@ -103,7 +103,7 @@ export const ToastStory = ({
         <div>
           Show a toast using the following code:
         </div>
-        <pre className='bg-grey-300 br4 d-inline-flex p8 mt8'>
+        <pre className='bg-neutral-300 br4 d-inline-flex p8 mt8'>
           {"() => toast(title, { description, type, action })"}
         </pre>
       </div>

package/src/lib/components/toast/index.tsx

@@ -60,7 +60,7 @@ const Toast = ({
       <h4 className='p-h4'>{title}</h4>
       
       {description && (
-        <p className='p-p p-p--small mt8 tc-grey-600'>{description}</p>
+        <p className='p-p p-p--small mt8 tc-neutral-700'>{description}</p>
       )}
 
       {action && (

package/src/lib/components/toast/style.module.scss

@@ -43,11 +43,11 @@
 
 .closeButton {
   background-color: transparent;
-  color: $ds-grey-400;
+  color: $ds-neutral-400;
   min-width: 24px;
 
   &:hover {
-    color: $ds-grey-600;
+    color: $ds-neutral-700;
   }
 }
 
@@ -71,10 +71,10 @@
   }
 
   &--success {
-    color: $ds-spearmint-700;
+    color: $ds-green-700;
 
     &:hover {
-      color: $ds-spearmint-900;
+      color: $ds-green-900;
     }
   }
 

package/src/lib/index.tsx

@@ -53,6 +53,14 @@ import { useEscapeKey } from './hooks/useEscapeKey';
 import { useFocusWithin } from './hooks/useFocusWithin';
 import { useMediaQuery } from './hooks/useMediaQuery';
 import { useOnClickOutside } from './hooks/useOnClickOutside';
+import { LogoColor } from './components/logo/LogoColor';
+import { LogoWhite } from './components/logo/LogoWhite';
+import { LogoBlack } from './components/logo/LogoBlack';
+import { LogoOrangeBox } from './components/logo/LogoOrangeBox';
+import { LogoInvertedColor } from './components/logo/LogoInvertedColor';
+import { LogoInverted } from './components/logo/LogoInverted';
+import { LogoPositiveColor } from './components/logo/LogoPositiveColor';
+import { LogoPositiveBlack } from './components/logo/LogoPositiveBlack';
 
 export * from './components/icon';
 
@@ -100,6 +108,14 @@ export {
   useFocusWithin,
   useOnClickOutside,
   useMediaQuery,
+  LogoColor,
+  LogoWhite,
+  LogoBlack,
+  LogoOrangeBox,
+  LogoInvertedColor,
+  LogoInverted,
+  LogoPositiveColor,
+  LogoPositiveBlack,
 };
 
 export type {

package/src/lib/models/styles.ts

@@ -3,53 +3,34 @@ export type Color = 'transparent' | 'blue-100'
 | 'blue-500'
 | 'blue-700'
 | 'blue-900'
-| 'purple-25'
 | 'purple-50'
 | 'purple-100'
+| 'purple-200'
 | 'purple-300'
+| 'purple-400'
 | 'purple-500'
+| 'purple-600'
 | 'purple-700'
+| 'purple-800'
 | 'purple-900'
-| 'primary-25'
-| 'primary-50'
-| 'primary-100'
-| 'primary-300'
-| 'primary-500'
-| 'primary-700'
-| 'primary-900'
 | 'red-100'
 | 'red-300'
 | 'red-500'
 | 'red-700'
 | 'red-900'
-| 'grey-100'
-| 'grey-200'
-| 'grey-300'
-| 'grey-400'
-| 'grey-500'
-| 'grey-600'
-| 'grey-700'
-| 'grey-900'
+| 'neutral-50'
+| 'neutral-100'
+| 'neutral-300'
+| 'neutral-400'
+| 'neutral-600'
+| 'neutral-700'
+| 'neutral-800'
+| 'neutral-900'
 | 'green-100'
 | 'green-300'
 | 'green-500'
 | 'green-700'
 | 'green-900'
-| 'glacier-100'
-| 'glacier-300'
-| 'glacier-500'
-| 'glacier-700'
-| 'glacier-900'
-| 'spearmint-100'
-| 'spearmint-300'
-| 'spearmint-500'
-| 'spearmint-700'
-| 'spearmint-900'
-| 'pink-100'
-| 'pink-300'
-| 'pink-500'
-| 'pink-700'
-| 'pink-900'
 | 'yellow-100'
 | 'yellow-300'
 | 'yellow-500'

package/src/lib/scss/index.scss

@@ -20,5 +20,5 @@ html {
 }
 
 body {
-  background-color: $ds-grey-200;
+  background-color: $ds-neutral-100;
 }

package/src/lib/scss/private/base/_typography.scss

@@ -71,7 +71,7 @@ body {
 .p-h3,
 .p-h4,
 .p-p {
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 }
 
 .p-h1 {
@@ -146,16 +146,16 @@ body {
 }
 
 .p-a {
-  color: $ds-primary-500;
+  color: $ds-purple-600;
   text-decoration: none;
 
   &:hover,
   &:focus {
-    color: $ds-primary-700;
+    color: $ds-purple-700;
   }
 
   &:focus-visible {
-    outline: 2px solid $ds-grey-900;
+    outline: 2px solid $ds-neutral-900;
     border-radius: 2px;
     outline-offset: 2px;
   }

package/src/lib/scss/private/base/border_radius.mdx

@@ -30,11 +30,11 @@ export const BorderRadiusExample = () => {
       {values.map((value) =>
         value === '-pill' ? (
           <div
-            className={`d-flex ai-center jc-center bg-primary-100 br${value} ${styles.rectangle}`}
+            className={`d-flex ai-center jc-center bg-purple-300 br${value} ${styles.rectangle}`}
           >{`br${value}`}</div>
         ) : (
           <div
-            className={`d-flex ai-center jc-center bg-primary-100 br${value} ${styles.square}`}
+            className={`d-flex ai-center jc-center bg-purple-300 br${value} ${styles.square}`}
           >{`br${value}`}</div>
         )
       )}