@popsure/dirty-swan 0.59.0-alpha → 0.59.0-beta-2

package/dist/lib/scss/index.scss

@@ -2,6 +2,7 @@
 
 @forward 'private/base';
 @forward 'private/components';
+@forward 'private/borders';
 
 @import 'public/colors';
 

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

@@ -4,66 +4,31 @@
 @use '../../public/font' as *;
 
 @font-face {
-  font-family: 'Merriweather';
+  font-family: 'Mona Sans';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 400;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZVcf6hPvhPUWH.woff2)
-    format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
+  src: url(https://github.githubassets.com/static/fonts/Mona-Sans-Medium.woff2) format('woff2');
+  font-feature-settings: "ss05" on;
 }
 
 @font-face {
-  font-family: 'Merriweather';
+  font-family: 'Mona Sans';
   font-style: normal;
-  font-weight: 700;
+  font-weight: 600;
   font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZXMf6hPvhPUWH.woff2)
-    format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-@font-face {
-  font-family: 'Merriweather';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZV8f6hPvhPUWH.woff2)
-    format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-family: 'Merriweather';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZVsf6hPvhPUWH.woff2)
-    format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: 'Merriweather';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6hPvhPQ.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
+  src: url(https://github.githubassets.com/static/fonts/Mona-Sans-SemiBold.woff2) format('woff2');
+  font-feature-settings: "ss05" on;
 }
 
 body {
   font-family: $font-family;
+  -webkit-font-smoothing: antialiased;
 }
 
 .p--serif {
-  font-family: 'Merriweather', serif;
+  font-family: 'Mona Sans', sans-serif;
+  font-feature-settings: "ss05" on;
 }
 
 .p-h1,
@@ -87,8 +52,8 @@ body {
 
   &--xl {
     @extend .p-h1;
-    font-size: 48px;
-    line-height: 58px;
+    font-size: 44px;
+    line-height: 56px;
 
     @include p-size-mobile {
       font-size: 32px;
@@ -136,8 +101,9 @@ body {
 
   &--small {
     @extend .p-p;
-    font-size: 12px;
+    font-size: 13px;
     line-height: 18px;
+    letter-spacing: 0.4px;
   }
 }
 
@@ -146,15 +112,18 @@ body {
 }
 
 .p-a {
-  color: $ds-purple-600;
-  text-decoration: none;
+  color: $ds-neutral-900;
+  text-decoration: underline;
+  text-underline-offset: 5px;
+  font-weight: $p-font-weight-bold;
 
   &:hover,
   &:focus {
-    color: $ds-purple-700;
+    color: $ds-neutral-700;
   }
 
   &:focus-visible {
+    color: $ds-neutral-900;
     outline: 2px solid $ds-neutral-900;
     border-radius: 2px;
     outline-offset: 2px;

package/dist/lib/scss/private/borders/_index.scss

@@ -0,0 +1 @@
+@import 'default';

package/dist/lib/scss/private/borders/default.scss

@@ -0,0 +1,61 @@
+@use '../../public/colors' as *;
+
+// Border tokens
+// Strong borders
+$border-strong-default: 1px solid $ds-neutral-400;
+$border-strong-hover: 1px solid $ds-neutral-600;
+$border-strong-active: 1px solid $ds-neutral-900;
+
+// Medium borders  
+$border-medium-default: 1px solid $ds-neutral-300;
+$border-medium-hover: 1px solid $ds-neutral-500;
+$border-medium-active: 1px solid $ds-neutral-800;
+
+// Soft borders
+$border-soft-default: 1px solid $ds-neutral-200;
+$border-soft-hover: 1px solid $ds-neutral-400;
+$border-soft-active: 1px solid $ds-neutral-600;
+
+// Focus border
+$border-focus: 2px solid $ds-neutral-900;
+
+// CSS Classes for border tokens
+.border-strong-default {
+  border: $border-strong-default;
+}
+
+.border-strong-hover {
+  border: $border-strong-hover;
+}
+
+.border-strong-active {
+  border: $border-strong-active;
+}
+
+.border-medium-default {
+  border: $border-medium-default;
+}
+
+.border-medium-hover {
+  border: $border-medium-hover;
+}
+
+.border-medium-active {
+  border: $border-medium-active;
+}
+
+.border-soft-default {
+  border: $border-soft-default;
+}
+
+.border-soft-hover {
+  border: $border-soft-hover;
+}
+
+.border-soft-active {
+  border: $border-soft-active;
+}
+
+.border-focus {
+  border: $border-focus;
+}

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

@@ -49,36 +49,35 @@
 
   &--primary {
     @extend .p-btn;
-    background-color: $ds-purple-600;
+    background-color: $ds-neutral-200;
     color: white;
 
     &:hover {
-      background-color: $ds-purple-700;
+      background-color: $ds-neutral-300;
 
       @include p-size-mobile {
-        background-color: $ds-purple-600;
+        background-color: $ds-neutral-300;
       }
     }
 
     &[disabled] {
-      background-color: $ds-purple-500;
+      background-color: $ds-neutral-200;
       opacity: 1;
     }
 
-    &:focus {
+    &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
+      box-shadow: 0 0 0 2px $ds-neutral-400;
     }
   }
 
   &--secondary {
     @extend .p-btn;
     background-color: transparent;
-    color: $ds-purple-600;
+    color: $ds-neutral-900;
 
     &:hover {
-      background-color: $ds-purple-300;
+      background-color: $ds-neutral-200;
 
       @include p-size-mobile {
         background-color: transparent;
@@ -86,36 +85,69 @@
     }
 
     &[disabled] {
-      color: $ds-purple-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-purple-600, $alpha: 0.5);
+      box-shadow: 0 0 0 2px $ds-neutral-900;
     }
 
     &-grey {
       @extend .p-btn--secondary;
-      background-color: $ds-purple-100;
+      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,
+      &:hover {
+        background-color: $ds-neutral-700;
+      }
+
       &:focus {
-        background-color: $ds-purple-700;
+        background-color: $ds-neutral-600;
+      }
+
+      &:focus-visible {
+        background-color: transparent;
+        box-shadow: 0 0 0 2px $ds-white;
       }
     }
 
@@ -129,17 +161,16 @@
       }
 
       &[disabled] {
-        background-color: $ds-neutral-900;
-        color: white;
+        color: $ds-white;
+        background-color: rgba($ds-neutral-900, 50%);
 
         &:hover {
-          background-color: $ds-neutral-900;
+        background-color: rgba($ds-neutral-900, 50%);
         }
       }
 
-      &:focus {
-        box-shadow: 0 0 0 1px white,
-          0 0 0 3px rgba($color: $ds-purple-900, $alpha: 0.5);
+      &:focus-visible {
+        box-shadow: 0 0 0 2px $ds-neutral-500;
       }
     }
   }
@@ -158,39 +189,14 @@
     }
 
     &[disabled] {
-      background-color: $ds-red-300;
-      opacity: 1;
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 1px white,
-        0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
-    }
-  }
-
-  &--success {
-    @extend .p-btn;
-    background-color: $ds-green-500;
-    color: white;
-
-    &:hover {
-      background-color: $ds-green-700;
-
-      @include p-size-mobile {
-        background-color: $ds-green-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-purple-600, $alpha: 0.5);
+      box-shadow: 0 0 0 2px $ds-red-700;
     }
   }
 
@@ -228,8 +234,8 @@
       background-color: transparent;
 
       &:hover {
-        background-color: $ds-purple-700;
-        border-color: $ds-purple-700;
+        background-color: transparent;
+        border-color: $ds-white;
       }
 
       &[disabled] {
@@ -239,37 +245,66 @@
 
       &:focus {
         outline: none;
-        box-shadow: 0 0 0 1px white,
-          0 0 0 3px rgba($color: $ds-purple-600, $alpha: 0.5);
+        box-shadow: 0 0 0 1px $ds-white;
       }
     }
 
     &-grey {
       @extend .p-btn;
 
-      color: $ds-neutral-600;
+      color: $ds-neutral-900;
       background-color: transparent;
 
       border: 1px solid $ds-neutral-400;
 
       &:hover {
-        color: $ds-neutral-700;
-        border-color: $ds-neutral-600;
+        border-color: $ds-neutral-900;
       }
 
       &[disabled] {
-        color: $ds-neutral-600;
         border-color: $ds-neutral-400;
-        opacity: 0.5;
+        opacity: 0.7;
       }
 
       &:focus {
-        color: $ds-neutral-700;
-        border-color: $ds-neutral-700;
+        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 {
+      background-color: rgba($color: $ds-neutral-900, $alpha: 0.04)
+    }
+
+    &:focus {
+      background-color: rgba($color: $ds-neutral-900, $alpha: 0.08)
+    }
+
+    &: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;
@@ -296,12 +331,19 @@
       animation: spinner-rotate 0.9s infinite;
     }
 
+
+    &: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-purple-600, $alpha: 0.5);
-        border-left-color: $ds-purple-600;
+        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);
+  box-shadow: $bs-xs;
 
   transition: border-color 0.3s;
 

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

@@ -19,30 +19,36 @@
 
   color: $ds-neutral-900;
 
-  transition: box-shadow 0.3s;
+  transition: box-shadow 0.3s, border-color 0.3s;
 
   &::placeholder {
     color: $ds-neutral-600;
   }
 
+  &:hover {
+    outline: none;
+    border: 1px solid $ds-neutral-900;
+  }
+
   &:disabled {
+    cursor: not-allowed;
     background-color: $ds-neutral-300;
     border: none;
   }
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px $ds-purple-600;
+    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 {
@@ -101,13 +107,14 @@
 
 .p-radio:checked {
   & + label::before {
-    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>');
+    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 {
-  outline: 1px solid $ds-purple-600;
+  border: 1px solid $ds-neutral-900;
+  outline: 1px solid $ds-neutral-900;
 }
 
 .p-radio:disabled {
@@ -117,7 +124,7 @@
   }
 
   + .p-label--bordered:hover {
-    border-color: $ds-neutral-400;
+    border-color: $ds-neutral-700;
   }
 }
 
@@ -136,7 +143,7 @@
       height: 16px;
       min-height: 16px;
 
-      border: 1px solid $ds-neutral-400;
+      border: 1px solid $ds-neutral-900;
       border-radius: 4px;
 
       background-color: white;
@@ -151,7 +158,7 @@
   & + label {
     &::before {
       outline: none;
-      box-shadow: 0 0 0 2px rgba($color: $ds-purple-600, $alpha: 0.5);
+      box-shadow: 0 0 0 1px $ds-neutral-900;
     }
   }
 }
@@ -161,15 +168,13 @@
     background-image: url('./assets/checkmark.svg');
     background-repeat: no-repeat;
     background-position: center;
-
-    background-color: $ds-purple-600;
-
-    border-color: $ds-purple-600;
+    background-color: $ds-neutral-900;
   }
 }
 
 .p-checkbox:focus-visible + label {
-  outline: 1px solid $ds-purple-600;
+  border: 1px solid $ds-neutral-900;
+  outline: 1px solid $ds-neutral-900;
 }
 
 .p-checkbox--no-icon + label::before {
@@ -184,7 +189,7 @@
 
   min-height: 48px;
   line-height: 24px;
-  color: $ds-neutral-900;
+  color: $ds-neutral-700;
 
   &--bordered {
     align-items: center;
@@ -196,7 +201,7 @@
     background-color: white;
 
     &:hover {
-      border-color: $ds-purple-600;
+      border-color: $ds-neutral-600;
     }
 
     transition: 0.3s border-color, 0.3s background-color;
@@ -205,8 +210,8 @@
 
 input:checked[type='radio'] + .p-label--bordered,
 input:checked[type='checkbox'] + .p-label--bordered {
-  border-color: $ds-purple-600;
-  background-color: $ds-purple-300;
+  border-color: $ds-neutral-900;
+  background-color: $ds-neutral-50;
 }
 
 .p-label-container {
@@ -249,16 +254,17 @@ input:checked[type='checkbox'] + .p-label--bordered {
 
   &:hover {
     color: $ds-neutral-800 !important;
-    border-color: $ds-purple-600;
+    border-color: $ds-neutral-900;
   }
 
   &:invalid {
-    color: $ds-neutral-600;
+    color: $ds-neutral-900;
   }
 
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 2px $ds-purple-600;
+    box-shadow: 0 0 0 1px $ds-neutral-900;
+    border-color: $ds-neutral-900;
   }
 
   & option {

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

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