@popsure/dirty-swan 0.58.6 → 0.59.0-alpha

package/src/lib/scss/private/components/_buttons.scss

@@ -49,36 +49,36 @@
 
   &--primary {
     @extend .p-btn;
-    background-color: $ds-primary-500;
+    background-color: $ds-purple-600;
     color: white;
 
     &:hover {
-      background-color: $ds-primary-700;
+      background-color: $ds-purple-700;
 
       @include p-size-mobile {
-        background-color: $ds-primary-500;
+        background-color: $ds-purple-600;
       }
     }
 
     &[disabled] {
-      background-color: $ds-primary-300;
+      background-color: $ds-purple-500;
       opacity: 1;
     }
 
     &:focus {
       outline: none;
       box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
     }
   }
 
   &--secondary {
     @extend .p-btn;
     background-color: transparent;
-    color: $ds-primary-500;
+    color: $ds-purple-600;
 
     &:hover {
-      background-color: $ds-primary-100;
+      background-color: $ds-purple-300;
 
       @include p-size-mobile {
         background-color: transparent;
@@ -86,7 +86,7 @@
     }
 
     &[disabled] {
-      color: $ds-primary-700;
+      color: $ds-purple-700;
 
       &:hover {
         background-color: transparent;
@@ -96,12 +96,12 @@
     &:focus {
       outline: none;
       box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
     }
 
     &-grey {
       @extend .p-btn--secondary;
-      background-color: $ds-primary-50;
+      background-color: $ds-purple-100;
     }
 
     &-white {
@@ -115,31 +115,31 @@
 
       &:hover,
       &:focus {
-        background-color: $ds-primary-700;
+        background-color: $ds-purple-700;
       }
     }
 
     &-black {
       @extend .p-btn--secondary;
-      background-color: $ds-grey-900;
+      background-color: $ds-neutral-900;
       color: white;
 
       &:hover {
-        background-color: $ds-grey-700;
+        background-color: $ds-neutral-800;
       }
 
       &[disabled] {
-        background-color: $ds-grey-900;
+        background-color: $ds-neutral-900;
         color: white;
 
         &:hover {
-          background-color: $ds-grey-900;
+          background-color: $ds-neutral-900;
         }
       }
 
       &:focus {
         box-shadow: 0 0 0 1px white,
-          0 0 0 3px rgba($color: $ds-primary-900, $alpha: 0.5);
+          0 0 0 3px rgba($color: $ds-purple-900, $alpha: 0.5);
       }
     }
   }
@@ -165,7 +165,7 @@
     &:focus {
       outline: none;
       box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
     }
   }
 
@@ -190,34 +190,34 @@
     &:focus {
       outline: none;
       box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
     }
   }
 
   &--outline {
     @extend .p-btn;
 
-    color: $ds-primary-500;
+    color: $ds-purple-600;
     background-color: transparent;
 
-    border: 1px solid $ds-primary-300;
+    border: 1px solid $ds-purple-500;
 
     &:hover {
-      color: $ds-primary-700;
-      border-color: $ds-primary-500;
+      color: $ds-purple-700;
+      border-color: $ds-purple-600;
     }
 
     &[disabled] {
-      color: $ds-primary-500;
-      border-color: $ds-primary-300;
+      color: $ds-purple-600;
+      border-color: $ds-purple-500;
       opacity: 0.5;
     }
 
     &:focus {
-      color: $ds-primary-700;
+      color: $ds-purple-700;
       outline: none;
       box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
     }
 
     &-white {
@@ -228,8 +228,8 @@
       background-color: transparent;
 
       &:hover {
-        background-color: $ds-primary-700;
-        border-color: $ds-primary-700;
+        background-color: $ds-purple-700;
+        border-color: $ds-purple-700;
       }
 
       &[disabled] {
@@ -240,32 +240,32 @@
       &:focus {
         outline: none;
         box-shadow: 0 0 0 1px white,
-          0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+          0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
       }
     }
 
     &-grey {
       @extend .p-btn;
 
-      color: $ds-grey-500;
+      color: $ds-neutral-600;
       background-color: transparent;
 
-      border: 1px solid $ds-grey-400;
+      border: 1px solid $ds-neutral-400;
 
       &:hover {
-        color: $ds-grey-600;
-        border-color: $ds-grey-500;
+        color: $ds-neutral-700;
+        border-color: $ds-neutral-600;
       }
 
       &[disabled] {
-        color: $ds-grey-500;
-        border-color: $ds-grey-400;
+        color: $ds-neutral-600;
+        border-color: $ds-neutral-400;
         opacity: 0.5;
       }
 
       &:focus {
-        color: $ds-grey-600;
-        border-color: $ds-grey-600;
+        color: $ds-neutral-700;
+        border-color: $ds-neutral-700;
       }
     }
   }
@@ -300,8 +300,8 @@
     &.p-btn--secondary-grey,
     &.p-btn--secondary-white {
       &::before {
-        border-color: rgba($color: $ds-primary-500, $alpha: 0.5);
-        border-left-color: $ds-primary-500;
+        border-color: rgba($color: $ds-purple-600, $alpha: 0.5);
+        border-left-color: $ds-purple-600;
       }
     }
   }

package/src/lib/scss/private/components/_cards.scss

@@ -12,11 +12,11 @@
     cursor: pointer;
     @extend .ds-card;
     &:hover {
-      border: 2px solid $ds-primary-300;
+      border: 2px solid $ds-purple-500;
     }
 
     &:focus {
-      outline: 3px solid $ds-primary-500;
+      outline: 3px solid $ds-purple-600;
       border: 2px solid transparent;
     }
   }

package/src/lib/scss/private/components/_input.scss

@@ -14,25 +14,25 @@
   width: 100%;
 
   border-radius: 8px;
-  border: 1px solid $ds-grey-400;
+  border: 1px solid $ds-neutral-400;
   background-color: white;
 
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 
   transition: box-shadow 0.3s;
 
   &::placeholder {
-    color: $ds-grey-500;
+    color: $ds-neutral-600;
   }
 
   &:disabled {
-    background-color: $ds-grey-300;
+    background-color: $ds-neutral-300;
     border: none;
   }
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px $ds-primary-500;
+    box-shadow: 0 0 0 2px $ds-purple-600;
   }
 
   &--error {
@@ -81,7 +81,7 @@
       height: 16px;
       min-height: 16px;
 
-      border: 1px solid $ds-grey-400;
+      border: 1px solid $ds-neutral-400;
       border-radius: 50%;
 
       background-color: white;
@@ -101,13 +101,13 @@
 
 .p-radio:checked {
   & + label::before {
-    border-color: $ds-primary-500;
-    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" stroke="white" stroke-width="4" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="50%" fill="#{util.url-encoded-color($ds-primary-500)}"/></svg>');
+    border-color: $ds-purple-600;
+    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" stroke="white" stroke-width="4" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="50%" fill="#{util.url-encoded-color($ds-purple-600)}"/></svg>');
   }
 }
 
 .p-radio:focus-visible + label {
-  outline: 1px solid $ds-primary-500;
+  outline: 1px solid $ds-purple-600;
 }
 
 .p-radio:disabled {
@@ -117,7 +117,7 @@
   }
 
   + .p-label--bordered:hover {
-    border-color: $ds-grey-400;
+    border-color: $ds-neutral-400;
   }
 }
 
@@ -136,7 +136,7 @@
       height: 16px;
       min-height: 16px;
 
-      border: 1px solid $ds-grey-400;
+      border: 1px solid $ds-neutral-400;
       border-radius: 4px;
 
       background-color: white;
@@ -151,7 +151,7 @@
   & + label {
     &::before {
       outline: none;
-      box-shadow: 0 0 0 2px rgba($color: $ds-primary-500, $alpha: 0.5);
+      box-shadow: 0 0 0 2px rgba($color: $ds-purple-600, $alpha: 0.5);
     }
   }
 }
@@ -162,14 +162,14 @@
     background-repeat: no-repeat;
     background-position: center;
 
-    background-color: $ds-primary-500;
+    background-color: $ds-purple-600;
 
-    border-color: $ds-primary-500;
+    border-color: $ds-purple-600;
   }
 }
 
 .p-checkbox:focus-visible + label {
-  outline: 1px solid $ds-primary-500;
+  outline: 1px solid $ds-purple-600;
 }
 
 .p-checkbox--no-icon + label::before {
@@ -184,7 +184,7 @@
 
   min-height: 48px;
   line-height: 24px;
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 
   &--bordered {
     align-items: center;
@@ -192,11 +192,11 @@
     padding: 12px 16px;
 
     border-radius: 8px;
-    border: 1px solid $ds-grey-400;
+    border: 1px solid $ds-neutral-400;
     background-color: white;
 
     &:hover {
-      border-color: $ds-primary-500;
+      border-color: $ds-purple-600;
     }
 
     transition: 0.3s border-color, 0.3s background-color;
@@ -205,8 +205,8 @@
 
 input:checked[type='radio'] + .p-label--bordered,
 input:checked[type='checkbox'] + .p-label--bordered {
-  border-color: $ds-primary-500;
-  background-color: $ds-primary-100;
+  border-color: $ds-purple-600;
+  background-color: $ds-purple-300;
 }
 
 .p-label-container {
@@ -230,13 +230,13 @@ input:checked[type='checkbox'] + .p-label--bordered {
   height: 48px;
 
   border-radius: 8px;
-  border: 1px solid $ds-grey-400;
+  border: 1px solid $ds-neutral-400;
   background-color: white;
 
   font-family: inherit;
   font-size: 16px;
   line-height: 24px;
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 
   padding-left: 16px;
   padding-right: 32px;
@@ -248,17 +248,17 @@ input:checked[type='checkbox'] + .p-label--bordered {
   transition: box-shadow 0.3s;
 
   &:hover {
-    color: $ds-grey-700 !important;
-    border-color: $ds-primary-500;
+    color: $ds-neutral-800 !important;
+    border-color: $ds-purple-600;
   }
 
   &:invalid {
-    color: $ds-grey-500;
+    color: $ds-neutral-600;
   }
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px $ds-primary-500;
+    box-shadow: 0 0 0 2px $ds-purple-600;
   }
 
   & option {

package/src/lib/scss/private/components/_notices.scss

@@ -7,16 +7,16 @@
 
   &--primary {
     @extend .p-notice;
-    background-color: $ds-purple-100;
-    border-color: $ds-purple-500;
-    color: $ds-grey-900;
+    background-color: $ds-purple-300;
+    border-color: $ds-purple-600;
+    color: $ds-neutral-900;
   }
 
   &--danger {
     @extend .p-notice;
     background-color: $ds-red-100;
     border-color: $ds-red-500;
-    color: $ds-grey-900;
+    color: $ds-neutral-900;
   }
 
   &--warning {

package/src/lib/scss/private/components/_spinner.scss

@@ -13,7 +13,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    border: 2px solid $ds-primary-500;
+    border: 2px solid $ds-purple-600;
     border-radius: 16px;
   }
 

package/src/lib/scss/public/colors/default.scss

@@ -1,70 +1,64 @@
 // TODO: Reference colors
-$ds-primary-25: #fcfcff !default;
-$ds-primary-50: #f7f7ff !default;
-$ds-primary-100: #ebebff !default;
-$ds-primary-300: #b1b0f5 !default;
-$ds-primary-500: #8e8cee !default;
-$ds-primary-700: #6160a2 !default;
-$ds-primary-900: #2e2e4c !default;
+$ds-purple-50: #F9F9FF;
+$ds-purple-100: #F6F6FE;
+$ds-purple-200: #EEEEFE;
+$ds-purple-300: #E8E7FE;
+$ds-purple-400: #D2CFFD;
+$ds-purple-500: #B8B4F3;
+$ds-purple-600: #8883D8;
+$ds-purple-700: #6A65AE;
+$ds-purple-800: #484676;
+$ds-purple-900: #32334B;
 
-$ds-purple-25: #fcfcff;
-$ds-purple-50: #f7f7ff;
-$ds-purple-100: #ebebff;
-$ds-purple-300: #b1b0f5;
-$ds-purple-500: #8e8cee;
-$ds-purple-700: #6160a2;
-$ds-purple-900: #2e2e4c;
+$ds-blue-100: #E5F0FF;
+$ds-blue-200: #DAE8FC;
+$ds-blue-300: #B0CDF3;
+$ds-blue-500: #8BB4EA;
+$ds-blue-700: #5F7BA0;
+$ds-blue-900: #2D394A;
 
-$ds-blue-100: #e5f0ff;
-$ds-blue-300: #b0cdf3;
-$ds-blue-500: #8bb4ea;
-$ds-blue-700: #5f7ba0;
-$ds-blue-900: #2d394a;
+$ds-red-100: #FEE6E6;
+$ds-red-200: #FED7D7;
+$ds-red-300: #FAA0A0;
+$ds-red-500: #E55454;
+$ds-red-700: #C64848;
+$ds-red-900: #4B2525;
 
-$ds-glacier-100: #e0f7fe;
-$ds-glacier-300: #aeddec;
-$ds-glacier-500: #8bcbdf;
-$ds-glacier-700: #5d8896;
-$ds-glacier-900: #2d4148;
+$ds-neutral-50: #f9f9fd;
+$ds-neutral-100: #f7f7fd;
+$ds-neutral-200: #f5f5fb;
+$ds-neutral-300: #e7e7ed;
+$ds-neutral-400: #d2d2d9;
+$ds-neutral-500: #b8b8c0;
+$ds-neutral-600: #919199;
+$ds-neutral-700: #696971;
+$ds-neutral-800: #3f3f47;
+$ds-neutral-900: #26262e;
 
-$ds-red-100: #fedede;
-$ds-red-300: #faa0a0;
-$ds-red-500: #e55454;
-$ds-red-700: #c64848;
-$ds-red-900: #4b2525;
+$ds-green-100: #E6FAF1;
+$ds-green-200: #D5F6E7;
+$ds-green-300: #AAEACC;
+$ds-green-500: #85DCB4;
+$ds-green-700: #599278;
+$ds-green-900: #2B4639;
 
-$ds-pink-100: #ffebf1;
-$ds-pink-300: #ffb1cb;
-$ds-pink-500: #f96092;
-$ds-pink-700: #c0305f;
-$ds-pink-900: #700024;
+$ds-yellow-100: #FEFAEC;
+$ds-yellow-200: #FCF3D1;
+$ds-yellow-300: #F6E7AC;
+$ds-yellow-500: #F0D26F;
+$ds-yellow-700: #C5A33E;
+$ds-yellow-900: #483D18;
 
-$ds-grey-100: #fafaff;
-$ds-grey-200: #f5f6fb;
-$ds-grey-300: #ededf2;
-$ds-grey-400: #d2d2d8;
-$ds-grey-500: #91919c;
-$ds-grey-600: #696970;
-$ds-grey-700: #4c4c53;
-$ds-grey-900: #26262e;
-
-$ds-green-100: #e4ffe6;
-$ds-green-300: #c4f5c8;
-$ds-green-500: #84de8a;
-$ds-green-700: #5b985f;
-$ds-green-900: #354a2d;
-
-$ds-spearmint-100: #e3fff2;
-$ds-spearmint-300: #aaeacc;
-$ds-spearmint-500: #85dcb4;
-$ds-spearmint-700: #599278;
-$ds-spearmint-900: #2b4639;
-
-$ds-yellow-100: #fff8e3;
-$ds-yellow-300: #fae3a5;
-$ds-yellow-500: #f7ce5c;
-$ds-yellow-700: #cc9e21;
-$ds-yellow-900: #4a3d10;
+$ds-orange-50: #FAF8F5;
+$ds-orange-100: #FCF7EF;
+$ds-orange-200: #FDF2E2;
+$ds-orange-300: #FEECD3;
+$ds-orange-400: #FCDAAB;
+$ds-orange-500: #FFD08F;
+$ds-orange-600: #F2B873;
+$ds-orange-700: #C6824E;
+$ds-orange-800: #7E4B2F;
+$ds-orange-900: #4C2D21;
 
 $ds-white: #fff;
 $ds-transparent: transparent;
@@ -73,60 +67,54 @@ $colors: (
   'white': #fff,
   'transparent': transparent,
   'blue-100': $ds-blue-100,
+  'blue-200': $ds-blue-200,
   'blue-300': $ds-blue-300,
   'blue-500': $ds-blue-500,
   'blue-700': $ds-blue-700,
   'blue-900': $ds-blue-900,
-  'purple-25': $ds-purple-25,
   'purple-50': $ds-purple-50,
   'purple-100': $ds-purple-100,
+  'purple-200': $ds-purple-200,
   'purple-300': $ds-purple-300,
+  'purple-400': $ds-purple-400,
   'purple-500': $ds-purple-500,
+  'purple-600': $ds-purple-600,
   'purple-700': $ds-purple-700,
+  'purple-800': $ds-purple-800,
   'purple-900': $ds-purple-900,
-  'primary-25': $ds-primary-25,
-  'primary-50': $ds-primary-50,
-  'primary-100': $ds-primary-100,
-  'primary-300': $ds-primary-300,
-  'primary-500': $ds-primary-500,
-  'primary-700': $ds-primary-700,
-  'primary-900': $ds-primary-900,
   'red-100': $ds-red-100,
+  'red-200': $ds-red-200,
   'red-300': $ds-red-300,
   'red-500': $ds-red-500,
   'red-700': $ds-red-700,
   'red-900': $ds-red-900,
-  'grey-100': $ds-grey-100,
-  'grey-200': $ds-grey-200,
-  'grey-300': $ds-grey-300,
-  'grey-400': $ds-grey-400,
-  'grey-500': $ds-grey-500,
-  'grey-600': $ds-grey-600,
-  'grey-700': $ds-grey-700,
-  'grey-900': $ds-grey-900,
+  'neutral-50': $ds-neutral-50,
+  'neutral-100': $ds-neutral-100,
+  'neutral-300': $ds-neutral-300,
+  'neutral-400': $ds-neutral-400,
+  'neutral-600': $ds-neutral-600,
+  'neutral-700': $ds-neutral-700,
+  'neutral-800': $ds-neutral-800,
+  'neutral-900': $ds-neutral-900,
   'green-100': $ds-green-100,
   'green-300': $ds-green-300,
   'green-500': $ds-green-500,
   'green-700': $ds-green-700,
   'green-900': $ds-green-900,
-  'glacier-100': $ds-glacier-100,
-  'glacier-300': $ds-glacier-300,
-  'glacier-500': $ds-glacier-500,
-  'glacier-700': $ds-glacier-700,
-  'glacier-900': $ds-glacier-900,
-  'spearmint-100': $ds-spearmint-100,
-  'spearmint-300': $ds-spearmint-300,
-  'spearmint-500': $ds-spearmint-500,
-  'spearmint-700': $ds-spearmint-700,
-  'spearmint-900': $ds-spearmint-900,
-  'pink-100': $ds-pink-100,
-  'pink-300': $ds-pink-300,
-  'pink-500': $ds-pink-500,
-  'pink-700': $ds-pink-700,
-  'pink-900': $ds-pink-900,
   'yellow-100': $ds-yellow-100,
+  'yellow-200': $ds-yellow-200,
   'yellow-300': $ds-yellow-300,
   'yellow-500': $ds-yellow-500,
   'yellow-700': $ds-yellow-700,
   'yellow-900': $ds-yellow-900,
+  'orange-50': $ds-orange-50,
+  'orange-100': $ds-orange-100,
+  'orange-200': $ds-orange-200,
+  'orange-300': $ds-orange-300,
+  'orange-400': $ds-orange-400,
+  'orange-500': $ds-orange-500,
+  'orange-600': $ds-orange-600,
+  'orange-700': $ds-orange-700,
+  'orange-800': $ds-orange-800,
+  'orange-900': $ds-orange-900,
 );

package/src/lib/scss/public/colors.mdx

@@ -17,7 +17,7 @@ To do so, `@import` or `@use` at the top for your `.scss` file.
 @import '@popsure/dirty-swan/dist/colors';
 
 .element {
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
 }
 ```