@popsure/dirty-swan 0.58.7 → 0.59.0-alpha

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

@@ -38,20 +38,20 @@ export const RenderFdExample = () => {
         <div key={value}>
           <p className="p-p fw-bold">.fd-{value}</p>
           <div
-            className={`d-flex bg-grey-500 w100 fd-${value} p16 ${style.container}`}
+            className={`d-flex bg-neutral-600 w100 fd-${value} p16 ${style.container}`}
           >
             <div
-              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+              className={`bg-neutral-50 p16 m8 d-flex ai-center jc-center ${style.item}`}
             >
               1
             </div>
             <div
-              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+              className={`bg-neutral-50 p16 m8 d-flex ai-center jc-center ${style.item}`}
             >
               2
             </div>
             <div
-              className={`bg-grey-100 p16 m8 d-flex ai-center jc-center ${style.item}`}
+              className={`bg-neutral-50 p16 m8 d-flex ai-center jc-center ${style.item}`}
             >
               3
             </div>
@@ -82,16 +82,16 @@ export const RenderAiExample = () => {
         <div key={value}>
           <p className="p-p fw-bold">.ai-{value}</p>
           <div
-            className={`d-flex bg-grey-500 w100 ai-${value} p16 ${style.container} ${style['ai-container']}`}
+            className={`d-flex bg-neutral-600 w100 ai-${value} p16 ${style.container} ${style['ai-container']}`}
           >
-            <div className={`bg-grey-100 p16  m8 ${style.item}`}>Item</div>
+            <div className={`bg-neutral-50 p16  m8 ${style.item}`}>Item</div>
             <div
-              className={`bg-grey-100 p16 m8 d-flex ai-center ${style.item} ${style['ai-item-2']}`}
+              className={`bg-neutral-50 p16 m8 d-flex ai-center ${style.item} ${style['ai-item-2']}`}
             >
               Item
             </div>
             <div
-              className={`bg-grey-100 p16 m8 ${style.item} ${
+              className={`bg-neutral-50 p16 m8 ${style.item} ${
                 style[['ai-item-3']]
               }`}
             >
@@ -125,11 +125,11 @@ export const RenderJcExample = () => {
         <div key={value}>
           <p className="p-p fw-bold">.jc-{value}</p>
           <div
-            className={`d-flex bg-grey-500 w100 jc-${value} p16 ${style.container}`}
+            className={`d-flex bg-neutral-600 w100 jc-${value} p16 ${style.container}`}
           >
-            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
-            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
-            <div className={`bg-grey-100 p16 m8 ${style.item}`}>Item</div>
+            <div className={`bg-neutral-50 p16 m8 ${style.item}`}>Item</div>
+            <div className={`bg-neutral-50 p16 m8 ${style.item}`}>Item</div>
+            <div className={`bg-neutral-50 p16 m8 ${style.item}`}>Item</div>
           </div>
         </div>
       ))}

package/src/lib/scss/private/base/style.module.scss

@@ -7,7 +7,7 @@
     text-align: center;
     border-radius: 8px;
     color: white;
-    background-color: colors.$ds-primary-500;
+    background-color: colors.$ds-purple-600;
 
     margin-top: 4px;
   }
@@ -29,13 +29,13 @@
     & > *:first-child {
       border-top-left-radius: 8px;
       border-bottom-left-radius: 8px;
-      background-color: colors.$ds-primary-500;
+      background-color: colors.$ds-purple-600;
     }
 
     & > *:nth-child(2) {
       border-top-right-radius: 8px;
       border-bottom-right-radius: 8px;
-      background-color: colors.$ds-grey-400;
+      background-color: colors.$ds-neutral-400;
       width: 100%;
     }
   }

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

@@ -6,7 +6,7 @@
   padding: 0 16px;
 
   font-size: 12px;
-  color: $ds-grey-900;
+  color: $ds-neutral-900;
   text-align: center;
 
   height: 18px;
@@ -26,7 +26,7 @@
 
   &--inactive {
     @extend .p-badge;
-    background-color: $ds-grey-400;
+    background-color: $ds-neutral-400;
   }
 
   &--danger {
@@ -41,6 +41,6 @@
 
   &--default {
     @extend .p-badge;
-    background-color: $ds-purple-100;
+    background-color: $ds-purple-300;
   }
 }

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