@licklist/design 0.78.5-dev.56 → 0.78.5-dev.57

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

@@ -1,12 +1,14 @@
 .nps-score {
     width: 100%;
     margin-top: 24px;
+    padding: 0 1rem;
+    box-sizing: border-box;
 
     &__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 +16,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 +36,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 +59,7 @@
     }
 
     &__label-icon {
-        color: var(--fills-main-fill-secondary, #626A90);
+        color: var(--fill-secondary);
         flex-shrink: 0;
     }
 
@@ -79,18 +81,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 +115,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 +129,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 +137,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 +177,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 +186,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 +220,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 +237,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 +251,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 +262,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 +275,7 @@
     }
 
     &__success-icon {
-        color: var(--fills-main-fill-success, #10B981);
+        color: var(--fill-status-success);
         margin-bottom: 16px;
     }
 
@@ -306,14 +283,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,5 +1,7 @@
 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 */
@@ -86,13 +88,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={onDismiss}
+                />
             </div>
         )
     }
@@ -192,13 +193,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);