cax-design-system 2.7.5 → 2.7.7

package/resources/cax.scss

@@ -861,8 +861,8 @@
 @import './styles/typography.scss';
 
 :root {
-    font-family: 'IBM Plex Sans', sans-serif;
-    --font-family: 'IBM Plex Sans', sans-serif;
+    font-family: 'Inter', sans-serif;
+    --font-family: 'Inter', sans-serif;
     --surface-a: #1e1e1e;
     --surface-b: #121212;
     --surface-c: rgba(255, 255, 255, 0.03);
@@ -1189,8 +1189,6 @@
         border-color: #fca5a5;
     }
 
-    
-
     cax-password.ng-invalid.ng-dirty > .cax-password > .cax-inputtext {
         border-color: #fca5a5;
     }
@@ -3229,108 +3227,6 @@
         color: #ffffff;
     }
 
-    .cax-menu {
-        padding: 1rem 0.5rem 1rem 0.5rem;
-        color: var(--neutral-900);
-        border: 1px solid var(--neutral-200);
-        border-radius: 7px;
-        min-width: 8.188rem;
-        margin-top: 8px !important;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content {
-        padding: 8px;
-        color: var(--neutral-900);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 4px;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link {
-        color: var(--neutral-900);
-        padding: 0.5rem 0;
-        user-select: none;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
-        color: var(--neutral-900);
-        font-weight: 500;
-        font-size: 14px;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon {
-        color: var(--neutral-900);
-        margin-right: 0.5rem;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
-        color: var(--neutral-900);
-    }
-    .cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content {
-        color: rgba(255, 255, 255, 0.87);
-        background: rgba(34, 211, 238, 0.16);
-    }
-    .cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
-        color: rgba(255, 255, 255, 0.87);
-    }
-    .cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon,
-    .cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
-        color: rgba(255, 255, 255, 0.87);
-    }
-    .cax-menu .cax-menuitem.cax-highlight.cax-focus > .cax-menuitem-content {
-        background: rgba(34, 211, 238, 0.24);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content {
-        color: #ffffff;
-        background: rgba(255, 255, 255, 0.08);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
-        color: var(--neutral-900);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon,
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
-        color: var(--neutral-900);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover {
-        background: var(--neutral-100);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-menuitem-text {
-        color: var(--neutral-900);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-menuitem-icon,
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-submenu-icon {
-        color: var(--neutral-900);
-    }
-    .cax-menu.cax-menu-overlay {
-        position: absolute !important;
-        border: 1px solid var(--neutral-200);
-        background: var(--white-100);
-    }
-    .cax-menu .cax-submenu-header {
-        margin: 0;
-        padding: 0.5rem 0.75rem;
-        color: var(--neutral-900);
-        font-weight: 600;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-    }
-    .cax-menu .cax-menuitem-separator {
-        border-top: 1px solid #3f3f46;
-        margin: 2px 0;
-    }
-    .cax-menu .cax-menuitem-badge {
-        background: #22d3ee;
-        color: #020617;
-        font-size: 0.75rem;
-        font-weight: 700;
-        min-width: 1.5rem;
-        height: 1.5rem;
-        line-height: 1.5rem;
-        border-radius: 6px;
-        margin-left: 0.5rem;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-    }
-
     .cax-menubar {
         padding: 0.5rem 0.5rem;
         background: #18181b;
@@ -5476,7 +5372,7 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
     width: 32px;
     height: 32px;
     color: var(--neutral-750);
-    border:1px solid #D4D7DD;
+    border: 1px solid #d4d7dd;
     background: transparent;
     border-radius: 8px;
     transition:
@@ -5682,22 +5578,22 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
     outline-offset: 2px;
     box-shadow: none;
 }
-.cax-datepicker-icon{
+.cax-datepicker-icon {
     color: var(--black-100);
 }
-.cax-datepicker-inline-input{
-    input{
+.cax-datepicker-inline-input {
+    input {
         border: 1px solid var(--neutral-200);
         color: var(--neutral-750);
     }
 }
-.cax-datepicker-inline-actions{
+.cax-datepicker-inline-actions {
     border-top: 1px solid var(--neutral-150);
     border-bottom: 1px solid var(--neutral-150);
 }
-.cax-downarrow{
+.cax-downarrow {
     color: var(--black-100) !important;
-  }
+}
 cax-calendar.cax-calendar-clearable .cax-inputtext {
     padding-right: 2.5rem;
 }
@@ -5745,6 +5641,7 @@ cax-calendar.cax-calendar-clearable .cax-calendar-w-btn .cax-calendar-clear-icon
     cursor: default;
     transition: all 0.2s ease;
     line-height: 1;
+    white-space: nowrap;
 }
 
 .cax-chip .cax-chip-icon,
@@ -9882,7 +9779,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: var(--white-100);
     border: solid var(--neutral-200);
     border-width: 1px;
-    color: var(--neutral-600);
+    color: var(--neutral-900);
     .cax-toast-summary {
         color: var(--neutral-900);
     }
@@ -9895,51 +9792,59 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: var(--success-25);
     border: solid var(--success-500);
     border-width: 1px;
-    color: var(--success-400);
+    color: var(--neutral-900);
     .cax-toast-summary {
-        color: var(--success-500);
+        color: var(--neutral-900);
     }
 }
-.cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-message-icon,
-.cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-icon-close {
+.cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-message-icon {
     color: var(--success-500);
 }
+.cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-icon-close {
+    color: var(--neutral-900);
+}
 .cax-toast .cax-toast-message.cax-toast-message-warn {
     background: var(--warning-25);
     border: solid var(--warning-500);
     border-width: 1px;
-    color: var(--warning-400);
+    color: var(--neutral-900);
     .cax-toast-summary {
-        color: var(--warning-500);
+        color: var(--neutral-900);
     }
 }
-.cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-message-icon,
-.cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-icon-close {
+.cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-message-icon {
     color: var(--warning-500);
 }
+.cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-icon-close {
+    color: var(--grey-900);
+}
 .cax-toast .cax-toast-message.cax-toast-message-error {
     background: var(--error-25);
     border: solid var(--error-500);
     border-width: 1px;
-    color: var(--error-400);
+    color: var(--neutral-900);
     .cax-toast-summary {
-        color: var(--error-500);
+        color: var(--neutral-900);
     }
 }
-.cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-message-icon,
-.cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-icon-close {
+.cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-message-icon {
     color: var(--error-500);
 }
+.cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-icon-close {
+    color: var(--grey-900);
+}
 .cax-toast .cax-toast-message.cax-toast-message-secondary {
     background: #27272a;
     border: solid #3f3f46;
     border-width: 1px;
     color: #d4d4d8;
 }
-.cax-toast .cax-toast-message.cax-toast-message-secondary .cax-toast-message-icon,
-.cax-toast .cax-toast-message.cax-toast-message-secondary .cax-toast-icon-close {
+.cax-toast .cax-toast-message.cax-toast-message-secondary .cax-toast-message-icon {
     color: #d4d4d8;
 }
+.cax-toast .cax-toast-message.cax-toast-message-secondary .cax-toast-icon-close {
+    color: var(--grey-900);
+}
 .cax-toast .cax-toast-message.cax-toast-message-contrast {
     background: #ffffff;
     border: solid #f4f4f5;
@@ -9987,7 +9892,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: rgba(255, 255, 255, 0.075);
 }
 .cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-detail {
-    color: var(--success-500);
+    color: var(--neutral-600);
 }
 .cax-toast .cax-toast-message.cax-toast-message-warn {
     box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04);
@@ -9999,7 +9904,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: rgba(255, 255, 255, 0.075);
 }
 .cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-detail {
-    color: var(--warning-500);
+    color: var(--neutral-600);
 }
 .cax-toast .cax-toast-message.cax-toast-message-error {
     box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04);
@@ -10011,7 +9916,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: rgba(255, 255, 255, 0.05);
 }
 .cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-detail {
-    color: var(--error-500);
+    color: var(--neutral-600);
 }
 .cax-toast .cax-toast-message.cax-toast-message-secondary {
     box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04);
@@ -12219,16 +12124,16 @@ div.cax-cascadeselect-panel {
 .cax-files {
     color: var(--neutral-900);
 }
-.cax-upload-menu{
+.cax-upload-menu {
     border: 1px solid var(--neutral-200);
 }
-.cax-upload-menu:has(.cax-upload-status.uploading){
+.cax-upload-menu:has(.cax-upload-status.uploading) {
     border: 1px solid var(--primary-500);
 }
-.cax-upload-menu:has(.cax-upload-status.complete){
+.cax-upload-menu:has(.cax-upload-status.complete) {
     border: 1px solid var(--primary-500);
 }
-.cax-upload-menu:has(.cax-error-upload){
+.cax-upload-menu:has(.cax-error-upload) {
     border: 1px solid var(--error-600);
 }
 .cax-error-upload {
@@ -12277,7 +12182,7 @@ div.cax-cascadeselect-panel {
         outline-color 0.2s;
     border-radius: var(--space-100);
     height: 40px;
-    width: 13.5rem;
+    width: 100%;
 }
 .cax-multiselect:not(.cax-disabled):hover {
     border-color: var(--neutral-400);
@@ -12301,15 +12206,15 @@ div.cax-cascadeselect-panel {
 .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item.cax-highlight {
     color: var(--black-100);
     background: var(--primary-75);
-  }
-.cax-multiselect-panel :not(.cax-highlight):not(.cax-disabled).cax-focus{
+}
+.cax-multiselect-panel :not(.cax-highlight):not(.cax-disabled).cax-focus {
     color: var(--black-100);
     background: var(--primary-75);
 }
 .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item:not(.cax-highlight):not(.cax-disabled):hover {
     color: var(--black-100);
     background: var(--primary-25);
-  }
+}
 .cax-multiselect .cax-multiselect-label {
     padding: 0.65rem 0.75rem;
     transition:
@@ -12329,8 +12234,8 @@ div.cax-cascadeselect-panel {
 .cax-multiselect.cax-multiselect-chip .cax-multiselect-token {
     padding: 0.25rem 0.75rem;
     margin-right: 0.5rem;
-    background: #E3E4E6;
-    color: #4E5155;
+    background: #e3e4e6;
+    color: #4e5155;
     border-radius: var(--radius-200);
 }
 .cax-multiselect.cax-multiselect-chip .cax-multiselect-token .cax-multiselect-token-icon {
@@ -12477,4 +12382,103 @@ div.cax-cascadeselect-panel {
 
 cax-multiselect.ng-dirty.ng-invalid > .cax-multiselect {
     border-color: #fca5a5;
-}
+}
+.cax-menu {
+    padding: 12px 4px;
+    color: var(--neutral-900);
+    border: 1px solid var(--neutral-200);
+    border-radius: 8px;
+    min-width: 8.188rem;
+    margin-top: 8px !important;
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content {
+    padding: 6px 8px;
+    color: var(--neutral-900);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: 4px;
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link {
+    color: var(--neutral-900);
+    user-select: none;
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
+    color: var(--neutral-900);
+    font-weight: 500;
+    font-size: 14px;
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+}
+.cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+}
+.cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon,
+.cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+}
+.cax-menu .cax-menuitem.cax-highlight.cax-focus > .cax-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.08);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon,
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover {
+    background: var(--neutral-100);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-menuitem-text {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-menuitem-icon,
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-submenu-icon {
+    color: var(--neutral-900);
+}
+.cax-menu.cax-menu-overlay {
+    position: absolute !important;
+    border: 1px solid var(--neutral-200);
+    background: var(--white-100);
+}
+.cax-menu .cax-submenu-header {
+    margin: 0;
+    padding: 0px 8px 8px 8px;
+    color: var(--neutral-900);
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+}
+.cax-menu .cax-menuitem-separator {
+    border-top: 1px solid #3f3f46;
+    margin: 2px 0;
+}
+.cax-menu .cax-menuitem-badge {
+    background: #22d3ee;
+    color: #020617;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    border-radius: 6px;
+    margin-left: 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}

package/resources/components/calendar/calendar.scss

@@ -2,15 +2,22 @@
    .cax-calendar {
        position: relative;
        display: inline-flex;
-       max-width: 100%;
+       width: 100%;
+       height: 40px;
    }
+   .cax-calendar-main-label {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 8px;
+    }
 
    .cax-calendar .cax-inputtext {
        flex: 1 1 auto;
        width: 1%;
        text-overflow: ellipsis;
        padding-left: 1.8rem !important;
-      padding-right: 1.8rem !important;
+       padding-right: 1.8rem !important;
    }
 
    .cax-calendar-w-btn .cax-inputtext {

package/resources/components/commentbox/commentbox.scss

@@ -1,4 +1,10 @@
 @layer cax {
+    .cax-comments-wrapper {
+        width: 100%;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
     .cax-comments-list {
         display: flex;
         flex-direction: column;
@@ -507,8 +513,9 @@
         }
 
         .chat-footer {
-            position: relative;
-            z-index: 1;
+            position: sticky;
+            bottom: 0;
+            z-index: 10;
         }
 
         .cax-chat-input-container {

package/resources/components/dropdown/dropdown.scss

@@ -4,7 +4,7 @@
         cursor: pointer;
         position: relative;
         user-select: none;
-        min-width: 216px;
+        width: 100%;
         height: 40px;
     }
 

package/resources/components/toast/toast.scss

@@ -63,6 +63,7 @@
         overflow: hidden;
         position: relative;
         flex: none;
+        
     }
 
     .cax-toast-icon-close.cax-link {
@@ -80,4 +81,7 @@
     .cax-toast:has(.cax-toast-lg) {
         width: 75%;
     }
+    .message-icon{
+        font-size: 24px !important;
+    }
 }

package/resources/styles/colors.scss

@@ -1,6 +1,6 @@
 :root {
     --primary-25: var(--blue-25);
-    --primary-50: var(--blue-50);
+    --primary-50: var(--blue-50); 
     --primary-75: var(--blue-75);
     --primary-100: var(--blue-100);
     --primary-125: var(--blue-125);
@@ -41,7 +41,7 @@
 
     --error-25: var(--red-25);
     --error-50: var(--red-50);
-    --error-75: var(--red-75);
+    --error-75: var(--red-75); 
     --error-100: var(--red-100);
     --error-125: var(--red-125);
     --error-150: var(--red-150);