@popsure/dirty-swan 0.58.7 → 0.59.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.58.7",
+  "version": "0.59.0-alpha",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/index.tsx

@@ -45,6 +45,14 @@ export {
   useFocusWithin,
   useMediaQuery,
   useOnClickOutside,
+  LogoColor,
+  LogoWhite,
+  LogoBlack,
+  LogoOrangeBox,
+  LogoInvertedColor,
+  LogoInverted,
+  LogoPositiveColor,
+  LogoPositiveBlack,
 } from './lib';
 
 export * from './lib/components/icon';

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

@@ -93,7 +93,7 @@ const Accordion = ({
                 icon: classnamesUtil(
                   classNames?.icon,
                   styles.icon,
-                  'tc-grey-700',
+                  'tc-neutral-800',
                 ),
                 buttonWrapper: classnamesUtil(
                   'py8 my8',
@@ -135,7 +135,7 @@ const Accordion = ({
               <div 
                 className={classnamesUtil(
                   classNames?.answer,
-                  'tc-grey-600 pr16 pb24', 
+                  'tc-neutral-700 pr16 pb24', 
                   { 
                     'pl16': !isDefaultVariant,
                     [styles?.answerIcon]: !isDefaultVariant && icon,

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

@@ -1,11 +1,11 @@
 @use "../../scss/public/colors" as *;
 
 .wrapperBordered {
-  border: 1px solid $ds-grey-300;
+  border: 1px solid $ds-neutral-300;
 }
 
 .container {
-  border-bottom: 1px solid $ds-grey-300;
+  border-bottom: 1px solid $ds-neutral-300;
 
   &Bordered:last-of-type {
     border-bottom: 0;
@@ -13,15 +13,15 @@
 }
 
 .question {
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 
   &:hover {
-    color: $ds-primary-500;
+    color: $ds-purple-600;
   }
 }
 
 .chevron {
-  color: $ds-grey-700;
+  color: $ds-neutral-800;
   transition: transform 0.3s ease-in-out;
 
   &Open {
@@ -41,7 +41,7 @@
 
 .buttonWrapper {
   background-color: transparent!important;
-  color: $ds-primary-500;
+  color: $ds-purple-600;
   outline-offset: -4px;
 
   &Default {
@@ -50,15 +50,15 @@
 
   &:hover,
   &:focus-visible {
-    background: $ds-primary-50;
+    background: $ds-purple-100;
 
     .icon {
-      color: $ds-primary-500!important;
+      color: $ds-purple-600!important;
     }
 
     .question,
     .chevron{
-      color: $ds-primary-500;
+      color: $ds-purple-600;
     }
   }
 
@@ -67,6 +67,6 @@
   }
 
   &:focus-visible {
-    outline: 2px solid $ds-primary-500!important;
+    outline: 2px solid $ds-purple-600!important;
   }
 }

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

@@ -246,7 +246,7 @@ const AutocompleteAddress = ({
   return (
     <>
       <div
-        className={classNames(`wmx8 bg-grey-500 ${styles['map-container']}`, {
+        className={classNames(`wmx8 bg-neutral-600 ${styles['map-container']}`, {
           [styles['map-container--hidden']]: place === null,
         })}
       >

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

@@ -57,7 +57,7 @@
   align-items: center;
 
   position: absolute !important;
-  background-color: rgba($ds-primary-500, 0.25);
+  background-color: rgba($ds-purple-600, 0.25);
 
   top: 0;
   left: 0;

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

@@ -23,12 +23,12 @@ export interface BadgeProps {
 const getVariantClassNames = (variant: Variant) => ({
   information: 'bg-blue-100',
   neutral: 'bg-white',
-  neutral200: 'bg-grey-200',
-  neutral300: 'bg-grey-300',
-  warning: 'bg-yellow-100',
+  neutral200: 'bg-neutral-100',
+  neutral300: 'bg-neutral-300',
+  warning: 'bg-yellow-200',
   error: 'bg-red-100',
   success: 'bg-green-100',
-  primary: 'bg-purple-100',
+  primary: 'bg-purple-300',
   primary900: 'bg-purple-900 tc-white',
 }[variant])
 

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

@@ -80,7 +80,7 @@ ButtonStory.storyName = "Button";
 export const ButtonVariants = ({ children, onClick }: ButtonProps) => (
   <div>
     <h3 className='p-h3 mb24'>Filled variants</h3>
-    <div className='d-flex gap16 p24 bg-grey-300 br8'>
+    <div className='d-flex gap16 p24 bg-neutral-300 br8'>
       {[ "filledColor", "filledGray", "filledWhite", "filledBlack"].map((variant) => (
           <div key={variant}>
             <h4 className='p-h4 mb16'>
@@ -95,9 +95,9 @@ export const ButtonVariants = ({ children, onClick }: ButtonProps) => (
     </div>
 
     <h3 className='p-h3 my24'>Text variants</h3>
-    <div className='d-flex gap16 p24 bg-grey-300 br8'>
+    <div className='d-flex gap16 p24 bg-neutral-300 br8'>
       {["textColor", "textWhite"].map((variant, index) => (
-        <div key={variant} className={variant === "textWhite" ? "bg-primary-500 px32 br8" : ""}>
+        <div key={variant} className={variant === "textWhite" ? "bg-purple-600 px32 br8" : ""}>
           <h4 className={`p-h4 mb16 ${variant === "textWhite" ? "tc-white" : ''}`}>
             {variant}
           </h4>
@@ -110,7 +110,7 @@ export const ButtonVariants = ({ children, onClick }: ButtonProps) => (
     </div>
 
     <h3 className='p-h3 my24'>Outline variants</h3>
-    <div className='d-flex gap16 p24 bg-primary-500 br8'>
+    <div className='d-flex gap16 p24 bg-purple-600 br8'>
       <div>
         <h4 className='p-h4 mb16 tc-white'>
           outlineWhite
@@ -123,7 +123,7 @@ export const ButtonVariants = ({ children, onClick }: ButtonProps) => (
     </div>
     
     <h3 className='p-h3 my24'>State variants</h3>
-    <div className='d-flex gap16 p24 bg-grey-300 br8'>
+    <div className='d-flex gap16 p24 bg-neutral-300 br8'>
       {["filledSuccess", "filledError"].map((variant) => (
           <div key={variant}>
             <h4 className='p-h4 mb16'>
@@ -152,7 +152,7 @@ export const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (
       </div>
     </div>
 
-    <div className='p24 bg-grey-200 br8'>
+    <div className='p24 bg-neutral-100 br8'>
       <h3 className='p-h3 mb16'>On grey</h3>
       <div className='d-flex gap16'>
         {[ "filledColor", "filledWhite", "textColor"].map((variant) => (
@@ -163,7 +163,7 @@ export const ButtonOnBackgrounds = ({ onClick }: ButtonProps) => (
       </div>
     </div>
 
-    <div className='p24 bg-primary-500 br8'>
+    <div className='p24 bg-purple-600 br8'>
       <h3 className='p-h3 mb16 tc-white'>On primary</h3>
       <div className='d-flex gap16'>
         {["filledWhite", "outlineWhite", "textWhite"].map((variant) => (
@@ -206,7 +206,7 @@ export const ButtonDisabled = ({ children, onClick }: ButtonProps) => (
 );
 
 export const ButtonAsOtherComponents = ({ children, as, onClick }: ButtonProps) => (
-  <div className='d-flex fd-column gap16 p24 bg-grey-200'>
+  <div className='d-flex fd-column gap16 p24 bg-neutral-100'>
     <h3 className='p-h3'>As an anchor:</h3>
       <Button as="a" href="https://feather-insurance.com" target="_blank">
         {children}

package/src/lib/components/cards/card/index.stories.tsx

@@ -3,7 +3,6 @@ import { illustrations } from '../../../util/images';
 import { Button } from '../../button';
 import { Badge } from '../../badge';
 import { CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';
-import { Link } from '../../link';
 
 const story = {
   title: 'JSX/Cards/Card',
@@ -99,7 +98,7 @@ export const CardStory = ({
   titleVariant,
   verticalAlignment,
 }: CardProps) => (
-  <div className='d-flex p24 bg-grey-200'>
+  <div className='d-flex p24 bg-neutral-100'>
     <Card
       as={as}
       classNames={classNames}
@@ -124,7 +123,7 @@ export const CardStory = ({
 CardStory.storyName = "Card";
 
 export const CardAsOtherComponents = () => (
-  <div className='d-flex fd-column gap16 p24 bg-grey-200'>
+  <div className='d-flex fd-column gap16 p24 bg-neutral-100'>
    
     <h3 className='p-h3'>As an anchor:</h3>
     <Card
@@ -150,7 +149,7 @@ export const CardAsOtherComponents = () => (
 );
 
 export const CardDensities = () => (
-  <div className='d-flex fd-column gap16 p24 bg-grey-200'>
+  <div className='d-flex fd-column gap16 p24 bg-neutral-100'>
     <Card
       title={'Card density: Compact'}
       density='compact'
@@ -167,7 +166,7 @@ export const CardDensities = () => (
 );
 
 export const CardsWithIcons = ({ title }: CardProps) => (
-  <div className='d-flex gap16 p24 bg-grey-200'>
+  <div className='d-flex gap16 p24 bg-neutral-100'>
     <Card
       icon={
         <img
@@ -189,7 +188,7 @@ export const CardWithOnClickAction = ({
   children,
   title,
 }: CardProps) => (
-  <div className='d-flex p24 bg-grey-200'>
+  <div className='d-flex p24 bg-neutral-100'>
     <Card
       icon={
         <img
@@ -212,14 +211,14 @@ export const CardOverridesStyles = ({
   label,
   title,
 }: CardProps) => (
-  <div className='d-flex p24 bg-grey-200'>
+  <div className='d-flex p24 bg-neutral-100'>
     <Card
       label={label}
       title={title}
       titleVariant={'medium'}
-      icon={<PlusCircleIcon color="grey-100" size={32} />}
+      icon={<PlusCircleIcon color="neutral-50" size={32} />}
       classNames={{ 
-        wrapper: 'bg-grey-700',
+        wrapper: 'bg-neutral-800',
         label: 'tc-white',
         title: 'tc-white'
       }}
@@ -230,7 +229,7 @@ export const CardOverridesStyles = ({
 );
 
 export const CardsWithinCardsAndComplexLayout = () => (
-  <div className='d-flex p24 bg-grey-200'>
+  <div className='d-flex p24 bg-neutral-100'>
     <Card
       label={(
         <Badge size='small' variant='success'>
@@ -254,14 +253,14 @@ export const CardsWithinCardsAndComplexLayout = () => (
       <div className='d-flex gap16 mt16'>
         <Card
           description="Lost keys"
-          classNames={{ wrapper: 'bg-grey-300' }}
-          icon={<CheckIcon color={'primary-500'} />}
+          classNames={{ wrapper: 'bg-neutral-300' }}
+          icon={<CheckIcon color={'purple-600'} />}
           density='compact'
         />
         <Card
           description="Broken glass"
-          classNames={{ wrapper: 'bg-grey-300' }}
-          icon={<XIcon color={'primary-500'} />}
+          classNames={{ wrapper: 'bg-neutral-300' }}
+          icon={<XIcon color={'purple-600'} />}
           density='compact'
         />
       </div>
@@ -269,14 +268,14 @@ export const CardsWithinCardsAndComplexLayout = () => (
       <div className='d-flex gap16 mt16'>
         <Card
           description="Damage to property"
-          classNames={{ wrapper: 'bg-grey-300' }}
-          icon={<CheckIcon color={'primary-500'} />}
+          classNames={{ wrapper: 'bg-neutral-300' }}
+          icon={<CheckIcon color={'purple-600'} />}
           density='compact'
         />
         <Card
           description="Drones"
-          classNames={{ wrapper: 'bg-grey-300' }}
-          icon={<XIcon color={'primary-500'} />}
+          classNames={{ wrapper: 'bg-neutral-300' }}
+          icon={<XIcon color={'purple-600'} />}
           density='compact'
         />
       </div>

package/src/lib/components/cards/card/index.tsx

@@ -117,7 +117,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
           )}
 
           <div className="d-flex jc-between w100">
-            <div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
+            <div className="d-flex jc-center gap8 fd-column tc-neutral-900 w100">
               {label && (
                 <h4 className={classNamesUtil('p-p--small', classNames?.label)}>
                   {label}

package/src/lib/components/cards/card/style.module.scss

@@ -2,20 +2,20 @@
 
 .button {
   background-color: transparent;
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
   outline: 1px solid transparent;
   transition: all 0.2s ease-in-out;
   text-decoration: none;
   border-radius: 8px;
 
   &:hover {
-    outline: 1px solid $ds-primary-500;
-    color: $ds-primary-500;
+    outline: 1px solid $ds-purple-600;
+    color: $ds-purple-600;
   }
 
   &:focus-visible {
-    outline: 2px solid $ds-primary-500;
-    color: $ds-primary-500;
+    outline: 2px solid $ds-purple-600;
+    color: $ds-purple-600;
   }
 }
 
@@ -25,7 +25,7 @@
 
 .icon {
   margin-right: 12px;
-  color: $ds-primary-500;
+  color: $ds-purple-600;
 
   &balanced {
     margin-right: 16px;
@@ -49,5 +49,5 @@
 }
 
 .description {
-  color: $ds-grey-600;
+  color: $ds-neutral-700;
 }

package/src/lib/components/cards/cardButton/index.tsx

@@ -29,7 +29,7 @@ export const CardButton = ({
           className,
           { [styles.containerDisabled]: disabled }
         ),
-        description: 'tc-primary-500 p-p',
+        description: 'tc-purple-600 p-p',
       }}
       density='compact'
       label={title}
@@ -37,7 +37,7 @@ export const CardButton = ({
       actionIcon={
         <ChevronRightIcon
           size={20}
-          color={'purple-500'}
+          color={'purple-600'}
           className={styles.chevronRight}
         />
       }

package/src/lib/components/cards/infoCard/index.stories.tsx

@@ -16,7 +16,7 @@ const story = {
       description: 'State that describe the interation with the card',
     },
     topIcon: {
-      description: 'Icon displayed on the top of the card, inside the purple circle',
+      description: 'Icon displayed on the top of the card, inside the circle',
     },
     rightIcon: {
       description: 'Icon displayed on the top right corner of the card',

package/src/lib/components/cards/infoCard/index.tsx

@@ -43,7 +43,7 @@ export const InfoCard = ({
         />
       )}
       <h3 className="p-h4 ta-center mt64">{title}</h3>
-      <div className="p-p mt16 tc-grey-600">{children}</div>
+      <div className="p-p mt16 tc-neutral-700">{children}</div>
     </div>
   </div>
 );

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

@@ -1,9 +1,9 @@
 @use '../../scss/public/colors' as *;
 
 .chip {
-  background: var(--ds-primary-100);
+  background: var(--ds-purple-300);
 
-  border: 2px solid var(--ds-primary-100);
+  border: 2px solid var(--ds-purple-300);
   border-radius: 8px;
 
   padding: 4px 8px;
@@ -20,7 +20,7 @@
 
 .chip:hover {
   transition: 0.2s ease-in;
-  border: 2px solid var(--ds-primary-500);
+  border: 2px solid var(--ds-purple-600);
 }
 
 .chip-image {
@@ -29,7 +29,7 @@
 }
 
 .chip-button-container {
-  color: $ds-purple-300;
+  color: $ds-purple-500;
   position: relative;
   width: 16px;
   height: 16px;
@@ -46,11 +46,11 @@
   cursor: pointer;
 
   &:hover {
-    color: $ds-purple-500;
+    color: $ds-purple-600;
   }
 
   &:focus-visible {
-    outline: 2px solid var(--ds-primary-500);
+    outline: 2px solid var(--ds-purple-600);
     border-radius: 2px;
   }
 }

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss

@@ -21,7 +21,7 @@
 
 .headerButton {
   border: none;
-  background: $ds-grey-100;
+  background: $ds-neutral-50;
   column-gap: 16px;
   cursor: pointer;
   font-family: inherit;
@@ -31,7 +31,7 @@
   transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
 
   &:hover {
-    background: $ds-primary-100;
+    background: $ds-purple-300;
   }
 }
 

package/src/lib/components/comparisonTable/components/Row/style.module.scss

@@ -37,7 +37,7 @@ $cell-min-width: var(--cellWidth, 211px); // 195 + 16px
     padding: 16px 8px 16px 16px;
   }
 
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 
   width: 50vw;
   max-width: calc(var(--tableWidth) / 2);
@@ -76,13 +76,13 @@ h4.cell {
 
 .title {
   position: relative;
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 
   display: none;
 
   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;
 
@@ -102,7 +102,7 @@ h4.cell {
   width: 50vw;
 
   @include p-size-tablet {
-    border-right: 1px solid $ds-grey-100;
+    border-right: 1px solid $ds-neutral-50;
     flex: 1 0 288px;
   }
 }

package/src/lib/components/comparisonTable/components/TableArrows/style.module.scss

@@ -30,26 +30,26 @@
   padding: 0;
 
   border-radius: 50%;
-  background-color: $ds-grey-200;
+  background-color: $ds-neutral-100;
 
   justify-content: center;
   align-items: center;
 
-  stroke: $ds-primary-100;
+  stroke: $ds-purple-300;
 
   &:hover,
   &:focus {
-    background-color: $ds-grey-200;
+    background-color: $ds-neutral-100;
     cursor: not-allowed;
   }
 }
 
 .active {
-  stroke: $ds-primary-500;
+  stroke: $ds-purple-600;
 
   &:hover,
   &:focus {
-    background-color: $ds-grey-200;
+    background-color: $ds-neutral-100;
     cursor: pointer;
   }
 }

package/src/lib/components/comparisonTable/components/TableInfoButton/style.module.scss

@@ -17,23 +17,23 @@
 
   &:hover,
   &:focus {
-    background-color: $ds-primary-50;
+    background-color: $ds-purple-100;
 
     svg {
       path {
-        fill: $ds-primary-300;
+        fill: $ds-purple-500;
       }
     }
   }
 
   svg {
     path {
-      fill: $ds-grey-400;
+      fill: $ds-neutral-400;
     }
     transition: all 0.3s ease;
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 2px $ds-primary-500;
+    box-shadow: 0 0 0 2px $ds-purple-600;
   }
 }

package/src/lib/components/comparisonTable/components/TableRating/style.module.scss

@@ -5,9 +5,9 @@
 }
 
 .filled {
-  fill: $ds-primary-500;
+  fill: $ds-purple-600;
 }
 
 .empty {
-  fill: $ds-grey-200;
+  fill: $ds-neutral-100;
 }

package/src/lib/components/comparisonTable/components/TableRowHeader/index.tsx

@@ -28,7 +28,7 @@ const TableRowHeader = ({
         </span>
         {onClickInfo && <TableInfoButton onClick={onClickInfo} />}
       </p>
-      {subtitle && <p className="p-p--small tc-grey-500">{subtitle}</p>}
+      {subtitle && <p className="p-p--small tc-neutral-600">{subtitle}</p>}
     </div>
   </div>
 );

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

@@ -62,7 +62,7 @@
 .group-title {
   width: 100%;
 
-  background-color: $ds-grey-100;
+  background-color: $ds-neutral-50;
   border-radius: 8px;
 
   & > h4 {
@@ -80,7 +80,7 @@
   left: 0;
 
   @include p-size-tablet {
-    border-right: 1px solid $ds-grey-100;
+    border-right: 1px solid $ds-neutral-50;
   }
 }
 
@@ -108,7 +108,7 @@
 
 .show-details-button {
   font-family: inherit;
-  background-color: $ds-grey-100;
+  background-color: $ds-neutral-50;
 
   border: none;
   border-radius: 8px;