@licklist/design 0.78.33 → 0.78.34

package/src/v2/components/Alert/Alert.scss

@@ -16,10 +16,6 @@
     background: var(--surfaces-status-background-success, #eef9ea);
     border-color: var(--borders-status-border-success, #c9ecbd);
 
-    .alert__icon {
-      background-image: url("./assets/success-icon.svg");
-    }
-
     .alert__dismiss svg path {
       stroke: var(--fills-status-fill-success, #2d6b18);
     }
@@ -29,10 +25,6 @@
     background: var(--surfaces-status-background-error, #fceceb);
     border-color: var(--borders-status-border-error, #f5c4c2);
 
-    .alert__icon {
-      background-image: url("./assets/error-icon.svg");
-    }
-
     .alert__dismiss svg path {
       stroke: var(--fills-status-fill-error, #cc3c35);
     }
@@ -42,10 +34,6 @@
     background: var(--surfaces-status-background-alert, #fcf6e7);
     border-color: var(--borders-status-border-alert, #f6e3b4);
 
-    .alert__icon {
-      background-image: url("./assets/alert-icon.svg");
-    }
-
     .alert__dismiss svg path {
       stroke: var(--fills-status-fill-alert, #fd7e14);
     }
@@ -55,10 +43,6 @@
     background: var(--surfaces-status-background-info, #e7f4fc);
     border-color: var(--borders-status-border-info, #b4dbf6);
 
-    .alert__icon {
-      background-image: url("./assets/info-icon.svg");
-    }
-
     .alert__dismiss svg path {
       stroke: var(--fills-status-fill-info, #0e8ce2);
     }
@@ -78,10 +62,15 @@
     flex-shrink: 0;
     width: 32px;
     height: 32px;
-    background-size: contain;
-    background-position: center;
-    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
   }
 
   &__details {

package/src/v2/components/Alert/Alert.tsx

@@ -3,6 +3,29 @@ import './Alert.scss';
 
 export type AlertVariant = 'success' | 'error' | 'alert' | 'info';
 
+const variantIcons: Record<AlertVariant, React.ReactNode> = {
+  success: (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM7.44629 10.6055L5.72168 8.80762L4.27832 10.1924L7.35254 13.3945L14.6729 6.74023L13.3271 5.25977L7.44629 10.6055Z" fill="var(--fills-status-fill-success, #2D6B18)"/>
+    </svg>
+  ),
+  error: (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 12.5C8.44772 12.5 8 12.9477 8 13.5C8 14.0523 8.44772 14.5 9 14.5C9.55228 14.5 10 14.0523 10 13.5C10 12.9477 9.55228 12.5 9 12.5ZM9 3.5C8.44772 3.5 8 3.94772 8 4.5V10.5C8 11.0523 8.44772 11.5 9 11.5C9.55228 11.5 10 11.0523 10 10.5V4.5C10 3.94772 9.55228 3.5 9 3.5Z" fill="var(--fills-status-fill-error, #CC3C35)"/>
+    </svg>
+  ),
+  alert: (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 12.5C8.44772 12.5 8 12.9477 8 13.5C8 14.0523 8.44772 14.5 9 14.5C9.55228 14.5 10 14.0523 10 13.5C10 12.9477 9.55228 12.5 9 12.5ZM9 3.5C8.44772 3.5 8 3.94772 8 4.5V10.5C8 11.0523 8.44772 11.5 9 11.5C9.55228 11.5 10 11.0523 10 10.5V4.5C10 3.94772 9.55228 3.5 9 3.5Z" fill="var(--fills-status-fill-alert, #FD7E14)"/>
+    </svg>
+  ),
+  info: (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 7.5C8.44772 7.5 8 7.94772 8 8.5V13.5C8 14.0523 8.44772 14.5 9 14.5C9.55228 14.5 10 14.0523 10 13.5V8.5C10 7.94772 9.55228 7.5 9 7.5ZM9 3.5C8.44772 3.5 8 3.94772 8 4.5C8 5.05228 8.44772 5.5 9 5.5C9.55228 5.5 10 5.05228 10 4.5C10 3.94772 9.55228 3.5 9 3.5Z" fill="var(--fills-status-fill-info, #0E8CE2)"/>
+    </svg>
+  ),
+};
+
 export interface AlertProps {
   variant: AlertVariant;
   title: string;
@@ -30,7 +53,7 @@ export const Alert: React.FC<AlertProps> = ({
     <div className={`alert alert--${variant} ${className || ''}`}>
       <div className="alert__content">
         <div className="alert__icon">
-          {/* Icon SVG will be handled by background images in SCSS */}
+          {variantIcons[variant]}
         </div>
         <div className="alert__details">
           <div className="alert__information">

package/src/v2/components/NPSScore/NPSScore.scss

@@ -1,12 +1,18 @@
 .nps-score {
     width: 100%;
     margin-top: 24px;
+    padding: 0 1rem;
+    box-sizing: border-box;
+
+    @media (max-width: 576px) {
+        padding: 0 16px;
+    }
 
     &__container {
-        background: var(--surfaces-main-surface-secondary, #F4F4F7);
+        background: var(--surface-secondary);
         border-radius: 16px;
         padding: 24px;
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
+        border: 1px solid var(--border-primary);
     }
 
     &__question {
@@ -14,7 +20,7 @@
         font-size: 18px;
         font-weight: 600;
         line-height: 24px;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin: 0 0 16px 0;
     }
 
@@ -34,7 +40,7 @@
             font-family: var(--font-family-sans);
             font-size: 14px;
             font-weight: 500;
-            color: var(--labels-main-label-secondary, #626A90);
+            color: var(--label-secondary);
         }
 
         &--desktop {
@@ -57,7 +63,7 @@
     }
 
     &__label-icon {
-        color: var(--fills-main-fill-secondary, #626A90);
+        color: var(--fill-secondary);
         flex-shrink: 0;
     }
 
@@ -79,18 +85,18 @@
         font-weight: 600;
         transition: all 0.2s ease;
         cursor: pointer;
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
-        color: var(--labels-main-label-primary, #121E52);
+        background: var(--surface-primary);
+        border: 1px solid var(--border-primary);
+        color: var(--label-primary);
 
         &:hover:not(&--selected) {
-            background: var(--surfaces-main-surface-primary-hover, #F8F8FA);
+            background: var(--surface-primary-hover);
         }
 
         &--selected {
-            background: var(--fills-main-fill-primary, #14215A);
+            background: var(--fill-primary);
             border-color: transparent;
-            color: #FFFFFF;
+            color: var(--label-primary-alt);
         }
     }
 
@@ -113,7 +119,7 @@
         font-family: var(--font-family-sans);
         font-size: 14px;
         font-weight: 500;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin-bottom: 8px;
     }
 
@@ -127,7 +133,7 @@
     &__optional {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
     }
 
     &__textarea {
@@ -135,39 +141,39 @@
         min-height: 100px;
         padding: 12px;
         border-radius: 8px;
-        border: 1px solid var(--borders-main-border-primary, #E8E9EF);
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 1px solid var(--border-primary);
+        background: var(--surface-primary);
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         resize: vertical;
         box-sizing: border-box;
 
         &::placeholder {
-            color: var(--labels-main-label-tertiary, #9CA3AF);
+            color: var(--label-secondary);
         }
 
         &:focus {
             outline: none;
-            border-color: var(--fills-main-fill-primary, #14215A);
+            border-color: var(--fill-primary);
         }
 
         &--error {
-            border-color: var(--fills-main-fill-danger, #DC2626);
+            border-color: var(--fill-danger);
         }
     }
 
     &__hint {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
         margin: 4px 0 0 0;
     }
 
     &__error {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--fills-main-fill-danger, #DC2626);
+        color: var(--fill-danger);
         margin: 4px 0 0 0;
     }
 
@@ -175,7 +181,7 @@
         font-family: var(--font-family-sans);
         font-size: 14px;
         font-weight: 500;
-        color: var(--labels-main-label-action, #2563EB);
+        color: var(--label-action);
         text-decoration: underline;
         background: none;
         border: none;
@@ -184,17 +190,18 @@
         transition: color 0.2s ease;
 
         &:hover {
-            color: var(--labels-main-label-action-hover, #1D4ED8);
+            color: var(--label-action);
         }
     }
 
     &__roles {
         display: grid;
         grid-template-columns: 1fr;
-        gap: 12px;
+        gap: 8px;
 
         @media (min-width: 640px) {
             grid-template-columns: repeat(2, 1fr);
+            gap: 4px;
         }
 
         @media (min-width: 1024px) {
@@ -217,8 +224,8 @@
         width: 20px;
         height: 20px;
         border-radius: 50%;
-        border: 2px solid var(--borders-main-border-primary, #E8E9EF);
-        background: var(--surfaces-main-surface-primary, #FFFFFF);
+        border: 2px solid var(--border-primary);
+        background: var(--surface-primary);
         margin: 0;
         cursor: pointer;
         flex-shrink: 0;
@@ -234,12 +241,12 @@
             width: 10px;
             height: 10px;
             border-radius: 50%;
-            background: var(--fills-main-fill-primary, #14215A);
+            background: var(--fill-primary);
             transition: transform 0.2s ease;
         }
 
         &:checked {
-            border-color: var(--fills-main-fill-primary, #14215A);
+            border-color: var(--fill-primary);
 
             &::before {
                 transform: translate(-50%, -50%) scale(1);
@@ -248,7 +255,7 @@
 
         &:focus {
             outline: none;
-            box-shadow: 0 0 0 2px var(--fills-main-fill-primary-opacity, rgba(20, 33, 90, 0.2));
+            box-shadow: 0 0 0 2px var(--border-action);
         }
     }
 
@@ -259,33 +266,7 @@
     &__role-label {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-primary, #121E52);
-    }
-
-    &__submit {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 12px 24px;
-        border-radius: 8px;
-        border: none;
-        background: var(--fills-main-fill-primary, #14215A);
-        color: #FFFFFF;
-        font-family: var(--font-family-sans);
-        font-size: 14px;
-        font-weight: 600;
-        cursor: pointer;
-        transition: background 0.2s ease;
-        width: fit-content;
-
-        &:hover:not(:disabled) {
-            background: var(--fills-main-fill-primary-hover, #1a2a6e);
-        }
-
-        &:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-        }
+        color: var(--label-primary);
     }
 
     &__success {
@@ -298,7 +279,7 @@
     }
 
     &__success-icon {
-        color: var(--fills-main-fill-success, #10B981);
+        color: var(--fill-status-success);
         margin-bottom: 16px;
     }
 
@@ -306,14 +287,14 @@
         font-family: var(--font-family-sans);
         font-size: 24px;
         font-weight: 600;
-        color: var(--labels-main-label-primary, #121E52);
+        color: var(--label-primary);
         margin: 0 0 8px 0;
     }
 
     &__success-message {
         font-family: var(--font-family-sans);
         font-size: 14px;
-        color: var(--labels-main-label-secondary, #626A90);
+        color: var(--label-secondary);
         margin: 0;
     }
 }

package/src/v2/components/NPSScore/NPSScore.tsx

@@ -1,13 +1,17 @@
 import React, { useState } from 'react'
 import './NPSScore.scss'
+import { Button } from '../Button'
+import { Alert } from '../Alert'
 
 export interface NPSScoreProps {
     /** User's first name for personalized greeting */
     firstName?: string
     /** Callback when NPS is submitted */
     onSubmit?: (data: NPSSubmitData) => void
-    /** Callback when dismissed */
+    /** Callback when dismissed without submitting */
     onDismiss?: () => void
+    /** Callback when success alert is dismissed after submission */
+    onSubmitDismiss?: () => void
 }
 
 export interface NPSSubmitData {
@@ -42,6 +46,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     firstName,
     onSubmit,
     onDismiss,
+    onSubmitDismiss,
 }) => {
     const [selectedScore, setSelectedScore] = useState<number | null>(null)
     const [reason, setReason] = useState('')
@@ -54,11 +59,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     const handleSubmit = async () => {
         if (!selectedScore) return
 
-        // Validate required fields - reason required for all scores
         const newErrors: { reason?: string; role?: string } = {}
-        if (!reason.trim()) {
-            newErrors.reason = 'Please provide a reason for your score'
-        }
         if (!role) {
             newErrors.role = 'Please select your role'
         }
@@ -86,13 +87,12 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
     if (isSubmitted) {
         return (
             <div className="nps-score">
-                <div className="nps-score__container">
-                    <div className="nps-score__success">
-                        <IconBigSmile size={48} className="nps-score__success-icon" />
-                        <h3 className="nps-score__success-title">Thank you!</h3>
-                        <p className="nps-score__success-message">Your feedback has been submitted successfully.</p>
-                    </div>
-                </div>
+                <Alert
+                    variant="success"
+                    title="Thank you!"
+                    message="Your feedback has been submitted successfully."
+                    onDismiss={onSubmitDismiss}
+                />
             </div>
         )
     }
@@ -142,7 +142,7 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
                         {/* Reason textarea - always visible */}
                         <div className="nps-score__field">
                             <label className="nps-score__field-label">
-                                Reason for this score?
+                                Reason for this score? (Optional)
                             </label>
                             <textarea
                                 value={reason}
@@ -192,13 +192,12 @@ export const NPSScore: React.FC<NPSScoreProps> = ({
                         </div>
 
                         {/* Submit button */}
-                        <button
+                        <Button
                             onClick={handleSubmit}
                             disabled={isSubmitting}
-                            className="nps-score__submit"
                         >
                             {isSubmitting ? 'Submitting...' : 'Submit'}
-                        </button>
+                        </Button>
                     </div>
                 )}
             </div>

package/src/v2/styles/tokens/_colors.scss

@@ -329,6 +329,7 @@
 
   /* Labels */
   --label-primary: var(--shade-light);
+  --label-primary-alt: var(--tone-lighter);
   --label-secondary: var(--tone-darkest);
   --label-secondary-hover: var(--shade-lighter);
   --label-white: var(--tone-lightest);
@@ -360,6 +361,8 @@
   --surface-status-disabled: var(--disabled-lighter);
 
   /* Surface Actions */
+  --surface-action: var(--actions-regular);
+  --surface-action-hover: var(--actions-dark);
   --surface-action-soft: var(--actions-lightest);
   --surface-action-soft-hover: var(--actions-lighter);
   --surface-action-soft-pressed: var(--actions-light);
@@ -419,6 +422,7 @@
 [data-theme="dark"] {
   /* Labels */
   --label-primary: var(--tone-lighter);
+  --label-primary-alt: var(--shade-light);
   --label-secondary: var(--tone-darker);
   --label-secondary-hover: var(--tone-lighter);
   --label-white: var(--tone-lightest);
@@ -450,6 +454,8 @@
   --surface-status-disabled: var(--disabled-darkest);
 
   /* Surface Actions */
+  --surface-action: var(--actions-regular);
+  --surface-action-hover: var(--actions-light);
   --surface-action-soft: var(--actions-darkest);
   --surface-action-soft-hover: var(--actions-darker);
   --surface-action-soft-pressed: var(--actions-dark);