@popsure/dirty-swan 0.63.0 → 0.63.1

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

@@ -38,7 +38,7 @@
 
   &[disabled] {
     cursor: default;
-    opacity: 0.5;
+    opacity: 0.3;
     cursor: not-allowed;
   }
 
@@ -47,38 +47,13 @@
     padding: 0;
   }
 
-  &--primary {
-    @extend .p-btn;
-    background-color: $ds-primary-500;
-    color: white;
-
-    &:hover {
-      background-color: $ds-primary-700;
-
-      @include p-size-mobile {
-        background-color: $ds-primary-500;
-      }
-    }
-
-    &[disabled] {
-      background-color: $ds-primary-300;
-      opacity: 1;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
-    }
-  }
-
   &--secondary {
     @extend .p-btn;
     background-color: transparent;
-    color: $ds-primary-500;
+    color: $ds-neutral-900;
 
     &:hover {
-      background-color: $ds-primary-100;
+      background-color: $ds-neutral-200;
 
       @include p-size-mobile {
         background-color: transparent;
@@ -86,113 +61,145 @@
     }
 
     &[disabled] {
-      color: $ds-primary-700;
+      color: $ds-neutral-900;
 
       &:hover {
         background-color: transparent;
       }
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+      box-shadow: 0 0 0 2px $ds-neutral-900;
     }
 
     &-grey {
       @extend .p-btn--secondary;
-      background-color: $ds-primary-50;
+      background-color: $ds-neutral-200;
+
+      &:hover {
+        background-color: $ds-neutral-300;
+      }
+
+      &:focus {
+        background-color: $ds-neutral-400;
+      }
+
+      &:focus-visible {
+        background-color: $ds-purple-100;
+      }
+        background-color: $ds-neutral-200;
+
+      &[disabled]:hover {
+        background-color: $ds-neutral-200;
+      }
+
     }
 
     &-white {
       @extend .p-btn--secondary;
       background-color: $ds-white;
+
+      &:hover {
+        background-color: $ds-neutral-200;
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 2px $ds-neutral-500;
+      }
     }
 
     &-inverted {
       @extend .p-btn--secondary;
       color: $ds-white;
 
-      &:hover, &:focus {
-        background-color: $ds-primary-700;
+      &:hover {
+        background-color: $ds-neutral-700;
       }
-    }
-  }
-
-  &--danger {
-    @extend .p-btn;
-    background-color: $ds-red-500;
-    color: white;
 
-    &:hover {
-      background-color: $ds-red-700;
+      &:focus {
+        background-color: $ds-neutral-600;
+      }
 
-      @include p-size-mobile {
-        background-color: $ds-red-500;
+      &:focus-visible {
+        background-color: transparent;
+        box-shadow: 0 0 0 2px $ds-white;
       }
     }
 
-    &[disabled] {
-      background-color: $ds-red-300;
-      opacity: 1;
-    }
+    &-black {
+      @extend .p-btn--secondary;
+      background-color: $ds-neutral-900;
+      color: white;
 
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+      &:hover {
+        background-color: $ds-neutral-800;
+      }
+
+      &[disabled] {
+        color: $ds-white;
+        background-color: rgba($ds-neutral-900, 50%);
+
+        &:hover {
+        background-color: rgba($ds-neutral-900, 50%);
+        }
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 2px $ds-neutral-500;
+      }
     }
   }
 
-  &--success {
+  &--danger {
     @extend .p-btn;
-    background-color: $ds-green-500;
+    background-color: $ds-red-500;
     color: white;
 
     &:hover {
-      background-color: $ds-green-700;
+      background-color: $ds-red-700;
 
       @include p-size-mobile {
-        background-color: $ds-green-500;
+        background-color: $ds-red-500;
       }
     }
 
     &[disabled] {
-      background-color: $ds-green-300;
+      background-color: $ds-red-500;
+      color: $ds-red-300;
       opacity: 1;
     }
 
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+      box-shadow: 0 0 0 2px $ds-red-700;
     }
   }
 
   &--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 {
@@ -203,8 +210,8 @@
       background-color: transparent;
 
       &:hover {
-        background-color: $ds-primary-700;
-        border-color: $ds-primary-700;
+        background-color: transparent;
+        border-color: $ds-white;
       }
 
       &[disabled] {
@@ -214,37 +221,66 @@
 
       &:focus {
         outline: none;
-        box-shadow: 0 0 0 1px white,
-          0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+        box-shadow: 0 0 0 1px $ds-white;
       }
     }
 
     &-grey {
       @extend .p-btn;
 
-      color: $ds-grey-500;
+      color: $ds-neutral-900;
       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;
+        border-color: $ds-neutral-600;
       }
 
       &[disabled] {
-        color: $ds-grey-500;
-        border-color: $ds-grey-400;
-        opacity: 0.5;
+        border-color: $ds-neutral-400;
+        opacity: 0.7;
       }
 
       &:focus {
-        color: $ds-grey-600;
-        border-color: $ds-grey-600;
+        border-color: $ds-neutral-900;
+        box-shadow: 0 0 0 1px $ds-neutral-900;
+        color: $ds-neutral-900;
+        outline: 0;
       }
     }
   }
 
+  &--text-black {
+    @extend .p-btn;
+
+    color: $ds-purple-900;
+    background-color: transparent;
+    border: 1px solid transparent;
+
+    &:hover {
+      border-color: $ds-neutral-400;
+    }
+
+    &:focus {
+      border-color: $ds-neutral-500;
+    }
+
+    &:focus-visible {
+      background-color: transparent;
+      border: 1px solid $ds-neutral-900;
+      box-shadow: 0 0 0 1px $ds-neutral-900;
+      outline: 0;
+    }
+
+    &[disabled] {
+      opacity: 0.5;
+      background-color: transparent;
+      border: none;
+    }
+
+  }
+
   &--loading {
     color: transparent;
     cursor: default;
@@ -271,14 +307,20 @@
       animation: spinner-rotate 0.9s infinite;
     }
 
-    &.p-btn--secondary,
+
+    &:focus-visible {
+      box-shadow: none;
+      border-color: transparent;
+    }
+
+    &.p-btn--secondary:not(.p-btn--secondary-black),
     &.p-btn--secondary-grey,
+    &.p-btn--text-black,
     &.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-neutral-900, $alpha: 0.5);
+        border-left-color: $ds-neutral-900;
       }
     }
   }
-
 }

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

@@ -1,10 +1,11 @@
 @use '../../public/colors' as *;
+@use '../../public/shadows' as *;
 
 .ds-card {
   background-color: white;
   border-radius: 8px;
-  border: 2px solid transparent;
-  box-shadow: 0px 2px 28px rgba(97, 96, 162, 0.1);
+  border: 1px solid transparent;
+  box-shadow: $bs-xs;
 
   transition: border-color 0.3s;
 
@@ -12,12 +13,13 @@
     cursor: pointer;
     @extend .ds-card;
     &:hover {
-      border: 2px solid $ds-primary-300;
+      border: 1px solid $ds-neutral-900;
     }
 
-    &:focus {
-      outline: 3px solid $ds-primary-500;
-      border: 2px solid transparent;
+    &:focus-visible {
+      border: 1px solid $ds-neutral-900;
+      box-shadow: 0 0 0 1px $ds-neutral-900;
+      outline: none;
     }
   }
 

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

@@ -14,35 +14,41 @@
   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;
+  transition: box-shadow 0.3s, border-color 0.3s;
 
   &::placeholder {
-    color: $ds-grey-500;
+    color: $ds-neutral-600;
+  }
+
+  &:hover {
+    outline: none;
+    border: 1px solid $ds-neutral-600;
   }
 
   &:disabled {
-    background-color: $ds-grey-300;
+    cursor: not-allowed;
+    background-color: $ds-neutral-300;
     border: none;
   }
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px $ds-primary-500;
+    border: 1px solid $ds-neutral-900;
+    box-shadow: 0 0 0 1px $ds-neutral-900;
   }
 
-  &--error {
+  &--error,
+  &--error:hover, 
+  &--error:focus {
     @extend .p-input;
     border: 1px solid $ds-red-500;
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px $ds-red-500;
-    }
+    outline: none;
+    box-shadow: 0 0 0 1px $ds-red-500;
   }
 
   input {
@@ -68,6 +74,8 @@
 
 .p-radio {
   & + label {
+    color: $ds-neutral-900;
+
     &::before {
       content: '';
 
@@ -81,7 +89,7 @@
       height: 16px;
       min-height: 16px;
 
-      border: 1px solid $ds-grey-400;
+      border: 1px solid $ds-neutral-500;
       border-radius: 50%;
 
       background-color: white;
@@ -98,13 +106,23 @@
 .p-radio--no-icon + label::before {
   display: none !important;
 }
+
 .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-neutral-900;
+    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-neutral-900)}"/></svg>');
   }
 }
 
+.p-radio:focus-visible + label {
+  border: 1px solid $ds-neutral-900;
+  outline: 1px solid $ds-neutral-900;
+
+   &:before {
+    border: 1px solid $ds-neutral-900;
+   }
+}
+
 .p-radio:disabled {
   + .p-label {
     cursor: not-allowed;
@@ -112,12 +130,14 @@
   }
 
   + .p-label--bordered:hover {
-    border-color: $ds-grey-400;
+    border-color: $ds-neutral-700;
   }
 }
 
 .p-checkbox {
   & + label {
+    color: $ds-neutral-900;
+
     &::before {
       content: '';
 
@@ -131,7 +151,7 @@
       height: 16px;
       min-height: 16px;
 
-      border: 1px solid $ds-grey-400;
+      border: 1px solid $ds-neutral-500;
       border-radius: 4px;
 
       background-color: white;
@@ -141,12 +161,12 @@
   }
 }
 
-.p-checkbox:focus,
-.p-radio:focus {
+.p-checkbox:active,
+.p-radio:active {
   & + label {
     &::before {
       outline: none;
-      box-shadow: 0 0 0 2px rgba($color: $ds-primary-500, $alpha: 0.5);
+      box-shadow: 0 0 0 1px $ds-neutral-900;
     }
   }
 }
@@ -156,13 +176,16 @@
     background-image: url('./assets/checkmark.svg');
     background-repeat: no-repeat;
     background-position: center;
-
-    background-color: $ds-primary-500;
-
-    border-color: $ds-primary-500;
+    background-color: $ds-neutral-900;
+    border: 1px solid transparent;
   }
 }
 
+.p-checkbox:focus-visible + label {
+  border: 1px solid $ds-neutral-900;
+  outline: 1px solid $ds-neutral-900;
+}
+
 .p-checkbox--no-icon + label::before {
   display: none !important;
 }
@@ -175,7 +198,7 @@
 
   min-height: 48px;
   line-height: 24px;
-  color: $ds-grey-900;
+  color: $ds-neutral-700;
 
   &--bordered {
     align-items: center;
@@ -183,11 +206,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-neutral-600;
     }
 
     transition: 0.3s border-color, 0.3s background-color;
@@ -196,8 +219,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-neutral-900;
+  background-color: $ds-neutral-50;
 }
 
 .p-label-container {
@@ -221,13 +244,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;
@@ -239,17 +262,18 @@ 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-neutral-900;
   }
 
   &:invalid {
-    color: $ds-grey-500;
+    color: $ds-neutral-900;
   }
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px $ds-primary-500;
+    box-shadow: 0 0 0 1px $ds-neutral-900;
+    border-color: $ds-neutral-900;
   }
 
   & option {

package/dist/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/dist/lib/scss/private/components/_spinner.scss

@@ -13,12 +13,12 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    border: 2px solid $ds-primary-500;
+    border: 2px solid $ds-neutral-900;
     border-radius: 16px;
   }
 
   &::before {
-    opacity: 0.5;
+    opacity: 0.2;
     transform: rotate(90deg);
   }