@licklist/design 0.78.5-dev.43 → 0.78.5-dev.46

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

@@ -9,19 +9,19 @@
   width: 100%;
 
     &__label {
-      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
-      font-size: 13px;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: 15px;
       font-style: normal;
-      font-weight: 500;
-      line-height: 16px; /* 123.077% */
+      font-weight: 600;
+      line-height: 20px;
       color: var(--label-primary, #121E52);
 
     }
 
     &__label-optional {
-      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
         font-size: var(--text-xs-size, 11px);
-        font-weight: var(--heading-h6-weight, 500);
+        font-weight: 400;
         line-height: var(--text-xs-line, 14px);
         color: var(--labels-main-label-secondary, #626a90);
         text-align: right;
@@ -36,9 +36,9 @@
     }
 
   &__input {
-    font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
-    font-size: var(--text-sm-size, 13px);
-    line-height: var(--text-sm-line, 16px);
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
+    font-size: var(--text-regular-size, 15px);
+    line-height: var(--text-regular-line, 20px);
     flex: 1 0 0;
     background-color: var(--surfaces-main-background-secondary);
     border: 2px solid var(--border-primary);
@@ -49,6 +49,10 @@
     width: 100%;
     transition: all 0.2s ease;
 
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
+
     &:focus {
       outline: none;
       border-color: var(--border-selected, #6200EE);
@@ -61,9 +65,9 @@
   }
 
     &__textarea {
-      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
-        font-size: var(--text-sm-size, 13px);
-        line-height: var(--text-sm-line, 16px);
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+        font-size: var(--text-regular-size, 15px);
+        line-height: var(--text-regular-line, 20px);
         color: var(--labels-main-label-primary, #121e52);
         background-color: var(--surfaces-main-background-secondary, #f8f8fa);
         border: 1px solid var(--borders-main-border-primary, #e8e9ef);
@@ -74,6 +78,10 @@
         resize: vertical;
         transition: all 0.2s ease;
 
+        @media (max-width: 768px) {
+          font-size: 16px;
+        }
+
         &:focus {
             outline: none;
             border-color: var(--border-selected, #6200EE);
@@ -98,10 +106,14 @@
             flex: 1;
             border: none;
             background: transparent;
-            font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
-            font-size: var(--text-sm-size, 13px);
-            line-height: var(--text-sm-line, 16px);
-            color: var(--labels-main-label-primary, #121e52);
+            font-family: var(--font-family-sans, 'Geist', sans-serif);
+            font-size: var(--text-regular-size, 15px);
+            line-height: var(--text-regular-line, 20px);
+            color: var(--label-primary);
+
+            @media (max-width: 768px) {
+              font-size: 16px;
+            }
 
             &:focus {
                 outline: none;
@@ -130,7 +142,7 @@
             border: 2px solid var(--borders-main-border-primary, #e8e9ef);
             border-radius: var(--radius-md, 4px);
             text-align: center;
-            font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+            font-family: var(--font-family-sans, 'Geist', sans-serif);
             font-size: var(--text-lg-size, 18px);
             font-weight: var(--heading-h3-weight, 600);
             color: var(--labels-main-label-primary, #121e52);
@@ -144,17 +156,17 @@
     }
 
     &__helper-text {
-      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
-      font-size: 13px;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: var(--text-regular-size, 15px);
       font-style: normal;
       font-weight: 400;
-      line-height: 16px;
+      line-height: var(--text-regular-line, 20px);
       margin-top: 2px;
       color: var(--label-secondary, #626A90);
     }
 
     &__error-text {
-      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
       font-size: 11px;
       font-style: normal;
       font-weight: 400;

package/dist/v2/styles/form/NewInput.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{color:var(--label-primary,#121e52);font-size:13px;font-style:normal;font-weight:500;line-height:16px}.new-form-input__label,.new-form-input__label-optional{font-family:var(--font-family-sans,\"Geist\",sans-serif),serif}.new-form-input__label-optional{color:var(--labels-main-label-secondary,#626a90);font-size:var(--text-xs-size,11px);font-weight:var(--heading-h6-weight,500);line-height:var(--text-xs-line,14px);text-align:right}.new-form-input__label-row{align-items:center;display:flex;gap:var(--spacing-reg,16px);justify-content:space-between;width:100%}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);flex:1 0 0;font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-size:var(--text-sm-size,13px);line-height:var(--text-sm-line,16px);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-size:var(--text-sm-size,13px);line-height:var(--text-sm-line,16px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:40px;padding:5px}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-size:var(--text-sm-size,13px);line-height:var(--text-sm-line,16px)}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon .icon{flex-shrink:0;height:22px;width:22px}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-size:13px;line-height:16px}.new-form-input__error-text,.new-form-input__helper-text{font-family:var(--font-family-sans,\"Geist\",sans-serif),serif;font-style:normal;font-weight:400;margin-top:2px}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-size:11px;line-height:14px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}";
+var css_248z = ".new-form-input{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.new-form-input__label{color:var(--label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px}.new-form-input__label-optional{color:var(--labels-main-label-secondary,#626a90);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);text-align:right}.new-form-input__label-row{align-items:center;display:flex;gap:var(--spacing-reg,16px);justify-content:space-between;width:100%}.new-form-input__input{background-color:var(--surfaces-main-background-secondary);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:var(--radius-md);flex:1 0 0;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:40px;padding:8px 10px;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__input{font-size:16px}}.new-form-input__input:focus{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__textarea{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:1px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px);min-height:120px;padding:8px 10px;resize:vertical;transition:all .2s ease;width:100%}@media (max-width:768px){.new-form-input__textarea{font-size:16px}}.new-form-input__textarea:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__textarea::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon{align-items:center;background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);display:flex;gap:var(--spacing-sm,8px);min-height:40px;padding:5px}.new-form-input__input-with-icon input{background:#0000;border:none;color:var(--label-primary);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}@media (max-width:768px){.new-form-input__input-with-icon input{font-size:16px}}.new-form-input__input-with-icon input:focus{outline:none}.new-form-input__input-with-icon input::placeholder{color:var(--labels-main-label-secondary,#626a90)}.new-form-input__input-with-icon .icon{flex-shrink:0;height:22px;width:22px}.new-form-input__verification-code{display:flex;gap:var(--spacing-sm,8px);height:62px}.new-form-input__verification-code .code-input{background-color:var(--surfaces-main-background-secondary,#f8f8fa);border:2px solid var(--borders-main-border-primary,#e8e9ef);border-radius:var(--radius-md,4px);color:var(--labels-main-label-primary,#121e52);flex:1;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:var(--text-lg-size,18px);font-weight:var(--heading-h3-weight,600);text-align:center;transition:all .2s ease}.new-form-input__verification-code .code-input:focus{border-color:var(--border-selected,#6200ee);outline:none}.new-form-input__helper-text{color:var(--label-secondary,#626a90);font-size:var(--text-regular-size,15px);line-height:var(--text-regular-line,20px)}.new-form-input__error-text,.new-form-input__helper-text{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-style:normal;font-weight:400;margin-top:2px}.new-form-input__error-text{color:var(--labels-status-label-error,#ef4444);font-size:11px;line-height:14px}.new-form-input--active .new-form-input__input{border-color:var(--border-selected,#6200ee)}.new-form-input--error .new-form-input__input{border-color:var(--borders-status-border-error,#ef4444)}.new-form-input--disabled{opacity:var(--opacity-50,.5);pointer-events:none}";
 styleInject(css_248z);
 
 export { css_248z as default };

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

@@ -387,7 +387,7 @@
   /* Borders */
   --border-primary: var(--tone-light);
   --border-secondary: var(--tone-regular);
-  --border-selected: var(--purple-regular);
+  --border-selected: var(--neutral-600);
   --border-action: var(--actions-regular);
   --border-status-error: var(--errors-lighter);
   --border-status-success: var(--success-lighter);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.5-dev.43",
+  "version": "0.78.5-dev.46",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.36.1-dev.10",
+    "@licklist/core": "0.36.1-dev.12",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.13",
     "clsx": "2.1.1",
@@ -64,7 +64,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.36.1-dev.10",
+    "@licklist/core": "0.36.1-dev.12",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.36.4-dev.13",
     "@mantine/core": "6.0.22",

package/src/index.ts

@@ -48,4 +48,5 @@ export * from './PageNotFound'
 export * from './UnderMaintenance'
 export * from './v2/dashboard-analytics'
 export * from './v2/navigation/DashboardLayout'
+export * from './v2/pages/Settings'
 export * from './v2/components'

package/src/v2/components/Checkbox/Checkbox.scss

@@ -55,7 +55,13 @@
     .checkbox__xmark {
       opacity: 1;
       visibility: visible;
-      transform: translateX(0); // X mark slides to right (natural position)
+      top: 50%;
+      position: absolute;
+      right: 4px;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .checkbox__checked-group {
@@ -70,13 +76,12 @@
     align-items: center;
     justify-content: flex-end; // Positions X mark to the right
     width: 58px;
-    height: auto;
+    height: 34px; // Set explicit height to help with vertical centering
     min-width: 58px;
     padding: 4px;
-    background: transparent;
+    background: var(--surface-secondary, #F8F8FA);
     border: 1px solid var(--border-primary, #E8E9EF);
     border-radius: var(--padding-xl, 32px);
-    transition: background 0.3s ease, border 0.3s ease;
     flex-shrink: 0;
   }
 
@@ -85,8 +90,6 @@
     height: 24px;
     opacity: 0; // Hidden by default (blank state)
     visibility: hidden;
-    transition: all 0.3s ease;
-    transform: translateX(-20px); // Start from left when hidden
 
     svg {
       width: 100%;
@@ -97,17 +100,24 @@
   &__checked-group {
     position: absolute;
     left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
     width: 24px;
     height: 24px;
     opacity: 0;
     visibility: hidden;
-    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &__circle {
     position: relative;
     width: 24px;
     height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     svg {
       width: 100%;
@@ -122,6 +132,9 @@
     transform: translate(-50%, -50%);
     width: 24px;
     height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     svg {
       width: 100%;
@@ -139,19 +152,19 @@
   &__label {
     font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
     color: var(--label-primary);
-    font-size: 13px;
+    font-size: 15px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 16px;
+    font-weight: 600;
+    line-height: 20px;
   }
 
   &__description {
     color: var(--label-secondary);
     font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
-    font-size: 13px;
+    font-size: var(--text-regular-size, 15px);
     font-style: normal;
     font-weight: 400;
-    line-height: 16px;
+    line-height: var(--text-regular-line, 20px);
   }
 
   &__error-text {
@@ -166,8 +179,10 @@
     border-color: var(--border-primary-hover, #d1d3de);
   }
 
-  // Pristine state - blank checkbox on load (no icons)
   &--pristine {
+    .checkbox__toggle {
+      background: var(--surface-secondary, #F8F8FA);
+    }
     .checkbox__xmark,
     .checkbox__checked-group {
       opacity: 0 !important;

package/src/v2/components/FormField/FormField.scss

@@ -9,9 +9,9 @@
 
   &__label {
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-sm-size, 13px);
-    font-weight: var(--heading-h5-weight, 500);
-    line-height: var(--text-sm-line, 16px);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 20px;
     color: var(--label-primary, #121e52);
     margin: 0;
     display: flex;
@@ -33,8 +33,8 @@
     padding: 8px 10px;
     height: 40px;
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-sm-size, 13px);
-    line-height: var(--text-sm-line, 16px);
+    font-size: var(--text-regular-size, 15px);
+    line-height: var(--text-regular-line, 20px);
     color: var(--label-primary, #121e52);
     background-color: var(--surface-secondary, #f8f8fa);
     border: 2px solid var(--border-primary, #e8e9ef);
@@ -57,10 +57,10 @@
     }
 
     &--error {
-      border-color: var(--label-status-error, #ef4444);
+      border-color: var(--borders-status-border-error, #ef4444);
 
       &:focus {
-        border-color: var(--label-status-error, #ef4444);
+        border-color: var(--borders-status-border-error, #ef4444);
       }
     }
 
@@ -73,8 +73,8 @@
   }
 
   &__help-text {
-    font-size: var(--text-xs-size, 11px);
-    line-height: var(--text-xs-line, 14px);
+    font-size: var(--text-regular-size, 15px);
+    line-height: var(--text-regular-line, 20px);
     color: var(--label-secondary, #626a90);
   }
 

package/src/v2/components/NewPageHeader/NewPageHeader.scss

@@ -6,6 +6,12 @@
     align-self: stretch;
     padding-left: 32px;
     padding-right: 32px;
+
+    @media (max-width: 768px) {
+        padding-left: 16px;
+        padding-right: 16px;
+        gap: 16px;
+    }
 }
 
 .new-page-header {
@@ -14,6 +20,12 @@
     align-items: center;
     align-self: stretch;
     width: 100%;
+    gap: 16px;
+
+    @media (max-width: 768px) {
+        gap: 8px;
+        padding-top: 16px;
+    }
 
     &__title {
         color: var(--label-primary);

package/src/v2/components/Select/Select.scss

@@ -69,7 +69,7 @@
 
   &--error {
     background-color: var(--surface-status-error);
-    border-color: var(--border-status-error);
+    border-color: var(--borders-status-border-error);
 
     &:hover:not(:disabled) {
       background-color: var(--errors-lighter);
@@ -77,7 +77,7 @@
     }
 
     &:focus {
-      border-color: var(--errors-dark);
+      border-color: var(--borders-status-border-error);
       background-color: var(--surface-status-error);
     }
   }
@@ -141,7 +141,7 @@
   height: 6px;
   stroke: var(--label-secondary);
   transition: all 0.2s ease-in-out;
-  
+
   .select:focus + & {
     transform: translateY(-50%) rotate(180deg);
   }
@@ -164,7 +164,7 @@
     opacity: 0.8;
     transform: scale(0.98);
     border-color: var(--cyan-700);
-    
+
     &:focus {
       transform: scale(0.98) translateY(-1px);
     }
@@ -185,4 +185,4 @@
 
 .select--filter-active {
   animation: filterPulse 0.6s ease-out;
-}
+}

package/src/v2/components/WYSIWYGEditor/Icons.tsx

@@ -53,12 +53,6 @@ export const NumberedListIcon = () => (
   </svg>
 );
 
-export const TaskListIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M9.00006 7.5V9.75H6.75006V7.5H9.00006ZM5.25006 6V11.25H10.5001V6H5.25006ZM12.7501 6H18.7501V7.5H12.7501V6ZM12.7501 11.25H18.7501V12.75H12.7501V11.25ZM12.7501 16.5H18.7501V18H12.7501V16.5ZM11.0304 15.1553L9.96973 14.0947L7.50006 16.5644L6.15538 15.2197L5.09473 16.2803L7.50006 18.6856L11.0304 15.1553Z" fill="#626A90"/>
-  </svg>
-);
-
 export const QuoteAltIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
     <path d="M6.43756 15.9909C5.66487 15.1706 5.25 14.25 5.25 12.7578C5.25 10.1332 7.09238 7.78029 9.77294 6.61743L10.4425 7.65064C7.94103 9.00409 7.45214 10.7595 7.25673 11.8665C7.65947 11.6583 8.18669 11.585 8.70353 11.6329C10.0568 11.7584 11.1234 12.8693 11.1234 14.25C11.1234 15.6998 9.94812 16.875 8.49837 16.875C7.69357 16.875 6.92397 16.5072 6.43756 15.9909ZM13.9375 15.9909C13.1649 15.1706 12.75 14.25 12.75 12.7578C12.75 10.1332 14.5924 7.78029 17.2729 6.61743L17.9425 7.65064C15.441 9.00409 14.9522 10.7595 14.7567 11.8665C15.1594 11.6583 15.6867 11.585 16.2035 11.6329C17.5568 11.7584 18.6234 12.8693 18.6234 14.25C18.6234 15.6998 17.4481 16.875 15.9984 16.875C15.1936 16.875 14.424 16.5072 13.9375 15.9909Z" fill="#626A90"/>
@@ -81,18 +75,7 @@ export const UndoIcon = () => (
 
 export const RedoIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M6.06131 6.69136C5.88684 6.85818 5.71976 7.03357 5.56136 7.21755C5.32407 7.49319 5.10569 7.78768 4.90881 8.09936C4.77746 8.30727 4.65565 8.52287 4.54421 8.7457C4.48837 8.85736 4.43524 8.9709 4.38469 9.08613C4.2839 9.31587 4.19401 9.5527 4.11539 9.796C4.07598 9.91797 4.03914 10.0416 4.00559 10.1668C3.93079 10.446 3.87328 10.7259 3.83158 11.0051C3.82934 11.0201 3.82751 11.0351 3.82536 11.05C3.81494 11.1228 3.80597 11.1955 3.79774 11.2682C3.79428 11.2986 3.79116 11.329 3.78807 11.3594C3.78326 11.4071 3.77883 11.4547 3.77495 11.5023C3.75889 11.6978 3.75077 11.8926 3.75009 12.0865C3.75003 12.1086 3.74996 12.1307 3.75009 12.1528C3.75089 12.3012 3.75571 12.449 3.76528 12.5961C3.7665 12.6146 3.76808 12.633 3.76943 12.6514C3.82014 13.3498 3.96775 14.0309 4.20377 14.6767L7.62813 11.1377L5.45502 10.5556C5.48179 10.4557 5.51129 10.3567 5.54272 10.2594C5.66865 9.8695 5.83151 9.50078 6.02609 9.15588C6.07459 9.06992 6.12494 8.9854 6.17732 8.90245C6.91264 7.73794 8.02285 6.87449 9.29715 6.43448C9.38818 6.40305 9.48005 6.37386 9.57268 6.34679C10.1284 6.18439 10.7114 6.10131 11.3052 6.10717C11.4042 6.10814 11.5034 6.11157 11.6028 6.11753C12.0008 6.14137 12.4022 6.2058 12.8023 6.31295C13.2945 6.44483 13.7566 6.63317 14.182 6.8709C14.2125 6.88794 14.2416 6.90723 14.2718 6.92476C14.7547 7.20595 15.1899 7.54933 15.5686 7.94261C15.6449 8.02185 15.7186 8.10326 15.7902 8.18637C15.9047 8.31912 16.0139 8.45605 16.1162 8.59793C16.1915 8.70249 16.2625 8.80995 16.3309 8.91903C17.1864 10.2824 17.4949 11.9837 17.0456 13.6609C16.327 16.3424 13.9009 18.1093 11.2507 18.108V19.6078C14.5636 19.6095 17.5967 17.4016 18.4951 14.0497C19.0819 11.8595 18.6347 9.6365 17.4544 7.89634L17.4558 7.89496C17.4301 7.85706 17.4028 7.81984 17.3764 7.78241C17.3604 7.75975 17.3443 7.73721 17.3281 7.71473C17.2772 7.64435 17.2253 7.57483 17.172 7.50619C17.1543 7.48339 17.1368 7.46044 17.1188 7.43783C17.0658 7.37103 17.0112 7.30536 16.9559 7.24034C16.9336 7.21424 16.9115 7.18811 16.8889 7.16231C16.8382 7.10446 16.7867 7.04739 16.7342 6.99105C16.7045 6.95913 16.6747 6.92719 16.6444 6.89576C16.4036 6.64603 16.1448 6.41195 15.869 6.19625C15.8379 6.17193 15.8052 6.14967 15.7737 6.12582C15.715 6.08143 15.657 6.03598 15.5969 5.99323C15.5586 5.96599 15.5191 5.94038 15.4802 5.91382C15.4213 5.87363 15.3622 5.83365 15.302 5.79505C15.2644 5.7709 15.2263 5.74744 15.1881 5.72393C15.1285 5.6872 15.0687 5.65066 15.0079 5.61551C14.959 5.58729 14.9097 5.55983 14.8601 5.53265C14.8028 5.50128 14.745 5.47076 14.6868 5.44081C14.6463 5.41998 14.6055 5.39949 14.5645 5.37935C14.4883 5.3419 14.4111 5.30595 14.3332 5.27093C14.3021 5.25697 14.2713 5.24238 14.24 5.22881C14.1572 5.19297 14.0732 5.15965 13.9886 5.12661C13.953 5.11267 13.9176 5.09792 13.8816 5.08449C13.8148 5.05956 13.7471 5.03652 13.6793 5.01337C13.6344 4.99807 13.5899 4.98161 13.5446 4.9671C13.4284 4.92988 13.3102 4.89544 13.1911 4.86352C12.691 4.72957 12.1893 4.6496 11.6919 4.61976C11.4431 4.60484 11.1954 4.60237 10.9496 4.61217C10.8266 4.61706 10.7042 4.62473 10.5822 4.63564C10.3388 4.65745 10.0974 4.69064 9.85925 4.73577C8.42886 5.00676 7.10753 5.69099 6.06131 6.69136Z" fill="#626A90"/>
+    <path d="M6.06131 6.69136C7.57508 5.61718 9.42169 5.01103 11.2847 5.00012C13.6826 4.98606 15.9892 5.92634 17.705 7.61633C19.4208 9.30632 20.4039 11.6033 20.4411 14.0084C20.4784 16.4135 19.5668 18.7239 17.9042 20.4371C16.2415 22.1504 13.9686 23.123 11.5794 23.1437C9.19013 23.1643 6.87707 22.2312 5.14341 20.5472L6.18225 19.4716C7.62779 20.8757 9.55655 21.6538 11.5488 21.6366C13.5411 21.6193 15.4363 20.8083 16.8227 19.3798C18.2091 17.9513 18.9692 16.0248 18.9381 14.0194C18.9071 12.014 18.0873 10.0987 16.6567 8.68961C15.2261 7.28052 13.3028 6.49646 11.3033 6.50818C9.75051 6.51728 8.21142 7.02243 6.94998 7.91782L10.25 11.25H5.25V6.25L6.06131 6.69136Z" fill="#626A90"/>
   </svg>
 );
 
-export const RedoAltIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M14.7783 5.1401C16.899 5.98783 18.6074 7.79081 19.244 10.1665C19.2815 10.3065 19.3136 10.4469 19.3428 10.587C19.3503 10.6234 19.3579 10.6598 19.3649 10.6961C19.3758 10.7532 19.3856 10.8103 19.3952 10.8674C19.3988 10.8883 19.4022 10.9093 19.4056 10.9302C19.4295 11.0794 19.4496 11.2283 19.4643 11.377C19.4663 11.397 19.4673 11.4171 19.4691 11.4371C19.571 12.5575 19.4176 13.6601 19.0465 14.6757L15.6222 11.1367L17.7946 10.5539C17.741 10.3542 17.6779 10.1596 17.6061 9.97039C17.57 9.87555 17.5318 9.7821 17.4914 9.69003C17.0879 8.77009 16.4702 7.99017 15.7147 7.39538C15.4122 7.15727 15.0875 6.94923 14.7459 6.77321C14.2774 6.53178 13.7765 6.35274 13.2564 6.24081C12.3559 6.04711 11.3975 6.05715 10.4466 6.31194C10.2147 6.37407 9.9903 6.45035 9.77265 6.53705C9.61715 6.59899 9.46465 6.66505 9.31689 6.73869C8.29847 7.24626 7.46969 8.02427 6.8945 8.95668C6.05731 10.3136 5.75827 11.9985 6.20328 13.6599C6.92179 16.3414 9.34799 18.1081 11.9982 18.1069L11.9989 19.6061C8.68576 19.608 5.65276 17.4002 4.75454 14.048C4.16791 11.8578 4.61554 9.63526 5.79586 7.89533L5.79448 7.89395C5.81581 7.86251 5.83827 7.83185 5.86008 7.80073C5.8864 7.76317 5.91317 7.72595 5.94018 7.68886C5.97698 7.63833 6.01398 7.58795 6.05205 7.53833C6.08438 7.49618 6.11687 7.45413 6.15011 7.41265C6.19423 7.35758 6.24044 7.30422 6.28614 7.25037C6.31108 7.22099 6.33532 7.191 6.36072 7.16198C6.41092 7.10463 6.46271 7.04867 6.51471 6.9928C6.54488 6.96039 6.5744 6.92734 6.60517 6.89544C6.84601 6.64568 7.10482 6.41165 7.38064 6.19593C7.41173 6.17161 7.44441 6.14934 7.47593 6.12549C7.53489 6.08087 7.59366 6.03587 7.65409 5.99291C7.69049 5.96703 7.72765 5.94221 7.76457 5.91695C7.82724 5.87408 7.89031 5.83165 7.95447 5.79058C7.9885 5.76881 8.02292 5.74762 8.05736 5.72636C8.11894 5.68835 8.18092 5.65082 8.2438 5.6145C8.28971 5.58798 8.33601 5.56206 8.3826 5.53647C8.44512 5.50212 8.50807 5.46832 8.57181 5.43565C8.60987 5.41614 8.64794 5.39654 8.68644 5.37764C8.75026 5.34631 8.8148 5.31612 8.87979 5.28649C8.93014 5.26354 8.98066 5.24074 9.0317 5.21882C9.0919 5.19297 9.15286 5.16861 9.214 5.14424C9.262 5.12511 9.30976 5.10513 9.35833 5.08693C9.54044 5.01866 9.72708 4.95876 9.91697 4.90394C9.96389 4.89039 10.0105 4.8752 10.0578 4.86251C10.395 4.77217 10.7333 4.70888 11.0702 4.66639C11.2333 4.64581 11.3959 4.62849 11.5584 4.61875C12.6773 4.55174 13.7742 4.73862 14.7783 5.1401Z" fill="#626A90"/>
-  </svg>
-);
-
-export const ClearFormattingIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    <path d="M12.4884 13.549L11.7035 18H10.1804L11.1935 12.2542L5.63599 6.69664L6.69664 5.63599L18.3639 17.3033L17.3032 18.3639L12.4884 13.549ZM11.8295 8.64752L12.0319 7.49995H10.6819L9.18193 5.99995H17.9999V7.49995H13.555L13.1243 9.94234L11.8295 8.64752Z" fill="#626A90"/>
-  </svg>
-);

package/src/v2/components/WYSIWYGEditor/WYSIWYGEditor.scss

@@ -11,10 +11,10 @@
   &__label {
     font-family: var(--font-family-sans, 'Geist', sans-serif);
     color: var(--label-primary);
-    font-size: 13px;
+    font-size: 15px;
     font-style: normal;
-    font-weight: 500;
-    line-height: 16px;
+    font-weight: 600;
+    line-height: 20px;
     margin: 0;
   }
 
@@ -36,32 +36,31 @@
     }
 
     &--error {
-      border-color: var(--label-status-error, #ef4444);
+      border-color: var(--borders-status-border-error, #ef4444);
     }
   }
 
   &__toolbar {
     display: flex;
     flex-wrap: wrap;
-    padding: 4px 8px;
-    align-items: flex-start;
-    gap: 2px;
+    padding: 0 4px;
+    align-items: center;
+    gap: 0;
     align-self: stretch;
-    border-radius: var(--radius-md) var(--radius-zero);
-    border-top: 2px solid var(--border-primary);
-    border-right: 2px solid var(--border-primary);
-    border-left: 2px solid var(--border-primary);
+    border-radius: 2px 2px 0 0;
     background: var(--surface-tertiary);
+    border-bottom: 2px solid var(--border-primary);
   }
 
   &__toolbar-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 28px;
+    width: 40px;
+    height: 40px;
     border: none;
     background: transparent;
-    border-radius: var(--radius-sm);
+    border-radius: 4px;
     cursor: pointer;
     color: var(--label-secondary);
     transition: all 0.2s ease;
@@ -72,9 +71,14 @@
       flex-shrink: 0;
     }
 
+    &[title="Heading 1"] svg,
+    &[title="Heading 2"] svg {
+      transform: scale(0.8);
+    }
+
     &:hover {
-      background-color: var(--surface-secondary, #f8f8fa);
-      color: var(--label-primary, #121e52);
+      background-color: var(--surface-secondary);
+      color: var(--label-primary);
     }
 
     &--active {
@@ -87,7 +91,8 @@
     width: 1px;
     height: 18px;
     background-color: var(--border-primary, #e8e9ef);
-    margin: 0 4px;
+    margin: 0 8px;
+    display: block;
   }
 
   &__content {
@@ -95,13 +100,17 @@
     padding: 12px;
     outline: none;
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: var(--text-sm-size, 13px);
-    line-height: 1.5;
+    font-size: var(--text-regular-size, 15px);
+    line-height: var(--text-regular-line, 20px);
     color: var(--label-primary, #121e52);
     background-color: var(--surface-secondary, #f8f8fa);
     overflow-y: auto;
     text-align: left;
 
+    @media (max-width: 768px) {
+      font-size: 16px;
+    }
+
     &--disabled {
       background-color: var(--surface-status-disabled, #f8f8fa);
       cursor: not-allowed;
@@ -116,13 +125,17 @@
 
     // Styles for content elements
     h1, h2, p, ul, ol, blockquote, hr {
-      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
-      font-size: var(--text-sm-size, 13px);
-      line-height: 1.5;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: var(--text-regular-size, 15px);
+      line-height: var(--text-regular-line, 20px);
       color: var(--label-primary, #121e52);
       overflow-y: auto;
       text-align: left;
 
+      @media (max-width: 768px) {
+        font-size: 16px;
+      }
+
       &:first-child {
         margin-top: 0;
       }
@@ -154,9 +167,9 @@
 
     p {
       margin: 8px 0;
-      font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
-      font-size: var(--text-sm-size, 13px);
-      line-height: 1.5;
+      font-family: var(--font-family-sans, 'Geist', sans-serif);
+      font-size: var(--text-regular-size, 15px);
+      line-height: var(--text-regular-line, 20px);
       color: var(--label-primary, #121e52);
 
       &:first-child {
@@ -172,8 +185,8 @@
       margin: 8px 0;
       padding-left: 24px;
       font-family: var(--font-family-sans, 'Geist', sans-serif);
-      font-size: var(--text-sm-size, 13px);
-      line-height: 1.5;
+      font-size: var(--text-regular-size, 15px);
+      line-height: var(--text-regular-line, 20px);
       color: var(--label-primary, #121e52);
 
       &:first-child {
@@ -188,8 +201,8 @@
     li {
       margin: 4px 0;
       font-family: var(--font-family-sans, 'Geist', sans-serif);
-      font-size: var(--text-sm-size, 13px);
-      line-height: 1.5;
+      font-size: var(--text-regular-size, 15px);
+      line-height: var(--text-regular-line, 20px);
       color: var(--label-primary, #121e52);
     }
 
@@ -199,8 +212,8 @@
       border-left: 4px solid var(--border-selected, #121e52);
       background-color: var(--surface-tertiary, #efefef);
       font-family: var(--font-family-sans, 'Geist', sans-serif);
-      font-size: var(--text-sm-size, 13px);
-      line-height: 1.5;
+      font-size: var(--text-regular-size, 15px);
+      line-height: var(--text-regular-line, 20px);
       color: var(--label-secondary, #626a90);
       font-style: italic;
 
@@ -214,10 +227,14 @@
     }
 
     hr {
+      display: block;
       margin: 16px 0;
       border: none;
       border-top: 2px solid var(--border-primary, #e8e9ef);
       height: 0;
+      box-sizing: content-box;
+      opacity: 1;
+      visibility: visible;
 
       &:first-child {
         margin-top: 0;
@@ -284,10 +301,10 @@
 
   &__help-text {
     font-family: var(--font-family-sans, 'Geist', sans-serif);
-    font-size: 13px;
+    font-size: var(--text-regular-size, 15px);
     font-style: normal;
     font-weight: 400;
-    line-height: 16px;
+    line-height: var(--text-regular-line, 20px);
     margin-top: -5px;
     color: var(--label-secondary);
   }
@@ -297,4 +314,5 @@
     color: var(--label-status-error, #ef4444);
     margin-top: 2px;
   }
+
 }