@licklist/design 0.78.31 → 0.78.33

package/src/v2/styles/components/Button.scss

@@ -8,7 +8,7 @@
   align-self: flex-start;
   text-align: center;
   align-items: center;
-  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
   font-weight: 600;
   line-height: 20px;
   min-height: 44px;
@@ -79,6 +79,28 @@
     }
   }
 
+  // Secondary - Soft
+  &--secondary-soft {
+    background: var(--surface-action-soft, #EFE6FD);
+    color: var(--label-action, #6200EE);
+
+    &:hover {
+      background: var(--surface-tertiary, #F0F0F5);
+    }
+  }
+
+
+  // Tertiary - Soft
+  &--tertiary-soft {
+    background: #FFFFFF;
+    color: var(--label-primary, #121E52);
+    border: 1px solid var(--border-primary, #E8E9EF);
+
+    &:hover {
+      background: var(--surface-tertiary, #F0F0F5);
+    }
+  }
+
   // Destructive - Soft
   &--destructive-soft {
     border-radius: var(--radius-reg, 8px);
@@ -138,8 +160,18 @@
   }
 
   /* Button text styling */
+  &__spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    flex-shrink: 0;
+  }
+
   &__text {
-    font-family: 'Geist', sans-serif;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
     font-size: 15px;
     font-style: normal;
     font-weight: 600;

package/src/v2/styles/form/NewInput.scss

@@ -16,25 +16,17 @@
       font-weight: 600;
       line-height: 20px;
       color: var(--label-primary, #121E52);
-
+      display: block;
     }
 
     &__label-optional {
       font-family: var(--font-family-sans, 'Geist', sans-serif);
-        font-size: var(--text-xs-size, 11px);
-        font-weight: 400;
-        line-height: var(--text-xs-line, 14px);
-        color: var(--labels-main-label-secondary, #626a90);
-        text-align: right;
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 20px;
+        color: var(--label-primary, #121E52);
     }
 
-    &__label-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--spacing-reg, 16px);
-        width: 100%;
-    }
 
   &__input {
     @include typography('text.regular');
@@ -96,10 +88,30 @@
         align-items: center;
         gap: var(--spacing-sm, 8px);
         background-color: var(--surfaces-main-background-secondary, #f8f8fa);
-        border: 2px solid var(--borders-main-border-primary, #e8e9ef);
+        border: 2px solid var(--border-primary, #e8e9ef);
         border-radius: var(--radius-md, 4px);
-        padding: 5px;
-        min-height: 40px;
+        padding: 8px 10px;
+        min-height: 52px;
+        width: 70%;
+        transition: all 0.2s ease;
+
+        &:focus-within {
+            border-color: var(--border-selected, #6200EE);
+        }
+
+        .icon {
+            width: 24px;
+            height: 24px;
+            flex-shrink: 0;
+            order: -1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &--right .icon {
+            order: 1;
+        }
 
         input {
             flex: 1;
@@ -121,12 +133,18 @@
             &::placeholder {
                 color: var(--labels-main-label-secondary, #626a90);
             }
-        }
 
-        .icon {
-            width: 22px;
-            height: 22px;
-            flex-shrink: 0;
+            // Hide native date picker icons
+            &[type="date"]::-webkit-calendar-picker-indicator {
+                display: none;
+                -webkit-appearance: none;
+            }
+
+            &[type="date"]::-webkit-inner-spin-button,
+            &[type="date"]::-webkit-outer-spin-button {
+                -webkit-appearance: none;
+                margin: 0;
+            }
         }
     }
 
@@ -199,4 +217,10 @@
         opacity: var(--opacity-50, 0.5);
         pointer-events: none;
     }
+
+    &.dob-input {
+      .new-form-input__label {
+        color: var(--label-secondary, #626A90);
+      }
+    }
 }

package/src/v2/styles/index.scss

@@ -3,3 +3,4 @@
 @import './tokens/status';
 @import './tokens/typography';
 @import './form/Layout';
+@import './common';