cats-ui-lib 2.0.41 → 2.2.0

package/styles/_utilities.scss

@@ -4,9 +4,11 @@
 .pointer {
   cursor: pointer;
 }
+
 .d-none {
   display: none;
 }
+
 // ---------------------------- THREE DOTS TRUNCATE TEXT ------------------------
 .textTruncate {
   text-overflow: ellipsis;
@@ -15,7 +17,7 @@
 }
 
 // ------------------Button Styles--------------------
-button {
+button.cats-btn {
   border: rem(1px) solid transparent;
   padding: 0 rem(28px);
   height: rem(56px);
@@ -38,15 +40,18 @@ button {
     background-color: var(--blue-600);
     color: var(--white);
   }
+
   &.secondary_btn {
     background-color: var(--neutral-100);
     color: var(--neutral-500);
   }
+
   &.outline_btn {
     background-color: var(--white);
     color: var(--neutral-500);
     border: rem(1px) solid var(--neutral-300);
   }
+
   &.disable {
     pointer-events: none;
     opacity: 0.6;
@@ -56,6 +61,7 @@ button {
     background-color: var(--blue-50);
     color: var(--blue-600);
   }
+
   &.disable_fill_lightBlue_btn {
     background-color: var(--blue-50);
     color: var(--blue-300);
@@ -67,11 +73,13 @@ button {
     color: var(--neutral-500);
     border: rem(1px) solid var(--neutral-200);
   }
+
   &.no_outline_btn {
     background-color: var(--blue-50);
     color: var(--blue-600);
     outline: none;
   }
+
   .close_outline_btn {
     background-color: var(--blue-50);
     border: rem(1px) solid var(--blue-50);
@@ -90,6 +98,7 @@ button {
   @include fontStyle(var(--fs-14), rem(24px), 400);
   color: var(--neutral-500);
   box-shadow: 0 rem(4px) rem(15px) rgba(0, 0, 0, 0.15);
+
   &::before {
     content: "";
     position: absolute;
@@ -105,3 +114,780 @@ button {
     border-left: 0;
   }
 }
+
+/* Display Styles */
+.display-large {
+  @include fontStyle(rem(56px), rem(80px), 500);
+}
+
+.display-large-emphasized {
+  @include fontStyle(rem(56px), rem(80px), 600);
+}
+
+.display-medium {
+  @include fontStyle(rem(48px), rem(56px), 500);
+}
+
+.display-medium-emphasized {
+  @include fontStyle(rem(48px), rem(56px), 600);
+}
+
+/* Heading Styles */
+.heading-extra-large {
+  @include fontStyle(rem(36px), rem(40px), 500);
+}
+
+.heading-extra-large-emphasized {
+  @include fontStyle(rem(36px), rem(40px), 600);
+}
+
+.heading-large {
+  @include fontStyle(rem(24px), rem(32px), 500);
+}
+
+.heading-large-emphasized {
+  @include fontStyle(rem(24px), rem(32px), 600);
+}
+
+.heading-medium {
+  @include fontStyle(rem(20px), rem(28px), 500);
+}
+
+.heading-medium-emphasized {
+  @include fontStyle(rem(20px), rem(28px), 600);
+}
+
+.heading-small {
+  @include fontStyle(rem(18px), rem(28px), 500);
+}
+
+.heading-small-emphasized {
+  @include fontStyle(rem(18px), rem(28px), 600);
+}
+
+/* Body Styles */
+.body-large {
+  @include fontStyle(rem(16px), rem(24px));
+}
+
+.body-large-emphasized {
+  @include fontStyle(rem(16px), rem(24px), 500);
+}
+
+.body-medium {
+  @include fontStyle(rem(14px), rem(20px));
+}
+
+.body-medium-emphasized {
+  @include fontStyle(rem(14px), rem(20px), 500);
+}
+
+.body-small {
+  @include fontStyle(rem(12px), rem(18px));
+}
+
+/* Meta Styles */
+.meta-regular {
+  @include fontStyle(rem(14px), rem(20px), 500);
+}
+
+.meta-regular-emphasized {
+  @include fontStyle(rem(14px), rem(20px), 600);
+}
+
+/* Interaction Styles */
+.interaction-medium {
+  @include fontStyle(rem(14px), rem(20px), 500);
+}
+
+.interaction-small {
+  @include fontStyle(rem(12px), rem(20px), 500);
+}
+
+/* System Utility Styles */
+.system-utility-regular {
+  @include fontStyle(rem(12px), rem(18px), 500);
+}
+
+.system-utility-regular-emphasized {
+  @include fontStyle(rem(12px), rem(18px), 600);
+}
+
+.system-utility-small {
+  @include fontStyle(rem(10px), rem(12px), 500);
+}
+
+/* Font Weight Utility Classes */
+.font-weight-regular {
+  font-weight: 400;
+}
+
+.font-weight-medium {
+  font-weight: 500;
+}
+
+.font-weight-semibold {
+  font-weight: 600;
+}
+
+/* Padding Classes (sp prefix) */
+.sp-0 {
+  padding: rem(0px);
+}
+
+.sp-2 {
+  padding: rem(2px);
+}
+
+.sp-4 {
+  padding: rem(4px);
+}
+
+.sp-8 {
+  padding: rem(8px);
+}
+
+.sp-12 {
+  padding: rem(12px);
+}
+
+.sp-16 {
+  padding: rem(16px);
+}
+
+.sp-24 {
+  padding: rem(24px);
+}
+
+.sp-36 {
+  padding: rem(36px);
+}
+
+.sp-40 {
+  padding: rem(40px);
+}
+
+/* Margin Classes (sm prefix) */
+.sm-0 {
+  margin: rem(0px);
+}
+
+.sm-2 {
+  margin: rem(2px);
+}
+
+.sm-4 {
+  margin: rem(4px);
+}
+
+.sm-8 {
+  margin: rem(8px);
+}
+
+.sm-12 {
+  margin: rem(12px);
+}
+
+.sm-16 {
+  margin: rem(16px);
+}
+
+.sm-24 {
+  margin: rem(24px);
+}
+
+.sm-36 {
+  margin: rem(36px);
+}
+
+.sm-40 {
+  margin: rem(40px);
+}
+
+/* Directional Padding */
+.sp-t-0 {
+  padding-top: rem(0px);
+}
+
+.sp-t-2 {
+  padding-top: rem(2px);
+}
+
+.sp-t-4 {
+  padding-top: rem(4px);
+}
+
+.sp-t-8 {
+  padding-top: rem(8px);
+}
+
+.sp-t-12 {
+  padding-top: rem(12px);
+}
+
+.sp-t-16 {
+  padding-top: rem(16px);
+}
+
+.sp-t-24 {
+  padding-top: rem(24px);
+}
+
+.sp-t-36 {
+  padding-top: rem(36px);
+}
+
+.sp-t-40 {
+  padding-top: rem(40px);
+}
+
+.sp-b-0 {
+  padding-bottom: rem(0px);
+}
+
+.sp-b-2 {
+  padding-bottom: rem(2px);
+}
+
+.sp-b-4 {
+  padding-bottom: rem(4px);
+}
+
+.sp-b-8 {
+  padding-bottom: rem(8px);
+}
+
+.sp-b-12 {
+  padding-bottom: rem(12px);
+}
+
+.sp-b-16 {
+  padding-bottom: rem(16px);
+}
+
+.sp-b-24 {
+  padding-bottom: rem(24px);
+}
+
+.sp-b-36 {
+  padding-bottom: rem(36px);
+}
+
+.sp-b-40 {
+  padding-bottom: rem(40px);
+}
+
+.sp-l-0 {
+  padding-left: rem(0px);
+}
+
+.sp-l-2 {
+  padding-left: rem(2px);
+}
+
+.sp-l-4 {
+  padding-left: rem(4px);
+}
+
+.sp-l-8 {
+  padding-left: rem(8px);
+}
+
+.sp-l-12 {
+  padding-left: rem(12px);
+}
+
+.sp-l-16 {
+  padding-left: rem(16px);
+}
+
+.sp-l-24 {
+  padding-left: rem(24px);
+}
+
+.sp-l-36 {
+  padding-left: rem(36px);
+}
+
+.sp-l-40 {
+  padding-left: rem(40px);
+}
+
+.sp-r-0 {
+  padding-right: rem(0px);
+}
+
+.sp-r-2 {
+  padding-right: rem(2px);
+}
+
+.sp-r-4 {
+  padding-right: rem(4px);
+}
+
+.sp-r-8 {
+  padding-right: rem(8px);
+}
+
+.sp-r-12 {
+  padding-right: rem(12px);
+}
+
+.sp-r-16 {
+  padding-right: rem(16px);
+}
+
+.sp-r-24 {
+  padding-right: rem(24px);
+}
+
+.sp-r-36 {
+  padding-right: rem(36px);
+}
+
+.sp-r-40 {
+  padding-right: rem(40px);
+}
+
+/* Directional Margin */
+.sm-t-0 {
+  margin-top: rem(0px);
+}
+
+.sm-t-2 {
+  margin-top: rem(2px);
+}
+
+.sm-t-4 {
+  margin-top: rem(4px);
+}
+
+.sm-t-8 {
+  margin-top: rem(8px);
+}
+
+.sm-t-12 {
+  margin-top: rem(12px);
+}
+
+.sm-t-16 {
+  margin-top: rem(16px);
+}
+
+.sm-t-24 {
+  margin-top: rem(24px);
+}
+
+.sm-t-36 {
+  margin-top: rem(36px);
+}
+
+.sm-t-40 {
+  margin-top: rem(40px);
+}
+
+.sm-b-0 {
+  margin-bottom: rem(0px);
+}
+
+.sm-b-2 {
+  margin-bottom: rem(2px);
+}
+
+.sm-b-4 {
+  margin-bottom: rem(4px);
+}
+
+.sm-b-8 {
+  margin-bottom: rem(8px);
+}
+
+.sm-b-12 {
+  margin-bottom: rem(12px);
+}
+
+.sm-b-16 {
+  margin-bottom: rem(16px);
+}
+
+.sm-b-24 {
+  margin-bottom: rem(24px);
+}
+
+.sm-b-36 {
+  margin-bottom: rem(36px);
+}
+
+.sm-b-40 {
+  margin-bottom: rem(40px);
+}
+
+.sm-l-0 {
+  margin-left: rem(0px);
+}
+
+.sm-l-2 {
+  margin-left: rem(2px);
+}
+
+.sm-l-4 {
+  margin-left: rem(4px);
+}
+
+.sm-l-8 {
+  margin-left: rem(8px);
+}
+
+.sm-l-12 {
+  margin-left: rem(12px);
+}
+
+.sm-l-16 {
+  margin-left: rem(16px);
+}
+
+.sm-l-24 {
+  margin-left: rem(24px);
+}
+
+.sm-l-36 {
+  margin-left: rem(36px);
+}
+
+.sm-l-40 {
+  margin-left: rem(40px);
+}
+
+.sm-r-0 {
+  margin-right: rem(0px);
+}
+
+.sm-r-2 {
+  margin-right: rem(2px);
+}
+
+.sm-r-4 {
+  margin-right: rem(4px);
+}
+
+.sm-r-8 {
+  margin-right: rem(8px);
+}
+
+.sm-r-12 {
+  margin-right: rem(12px);
+}
+
+.sm-r-16 {
+  margin-right: rem(16px);
+}
+
+.sm-r-24 {
+  margin-right: rem(24px);
+}
+
+.sm-r-36 {
+  margin-right: rem(36px);
+}
+
+.sm-r-40 {
+  margin-right: rem(40px);
+}
+
+/* Horizontal & Vertical Spacing */
+.sp-x-0 {
+  padding-left: rem(0px);
+  padding-right: rem(0px);
+}
+
+.sp-x-2 {
+  padding-left: rem(2px);
+  padding-right: rem(2px);
+}
+
+.sp-x-4 {
+  padding-left: rem(4px);
+  padding-right: rem(4px);
+}
+
+.sp-x-8 {
+  padding-left: rem(8px);
+  padding-right: rem(8px);
+}
+
+.sp-x-12 {
+  padding-left: rem(12px);
+  padding-right: rem(12px);
+}
+
+.sp-x-16 {
+  padding-left: rem(16px);
+  padding-right: rem(16px);
+}
+
+.sp-x-24 {
+  padding-left: rem(24px);
+  padding-right: rem(24px);
+}
+
+.sp-x-36 {
+  padding-left: rem(36px);
+  padding-right: rem(36px);
+}
+
+.sp-x-40 {
+  padding-left: rem(40px);
+  padding-right: rem(40px);
+}
+
+.sp-y-0 {
+  padding-top: rem(0px);
+  padding-bottom: rem(0px);
+}
+
+.sp-y-2 {
+  padding-top: rem(2px);
+  padding-bottom: rem(2px);
+}
+
+.sp-y-4 {
+  padding-top: rem(4px);
+  padding-bottom: rem(4px);
+}
+
+.sp-y-8 {
+  padding-top: rem(8px);
+  padding-bottom: rem(8px);
+}
+
+.sp-y-12 {
+  padding-top: rem(12px);
+  padding-bottom: rem(12px);
+}
+
+.sp-y-16 {
+  padding-top: rem(16px);
+  padding-bottom: rem(16px);
+}
+
+.sp-y-24 {
+  padding-top: rem(24px);
+  padding-bottom: rem(24px);
+}
+
+.sp-y-36 {
+  padding-top: rem(36px);
+  padding-bottom: rem(36px);
+}
+
+.sp-y-40 {
+  padding-top: rem(40px);
+  padding-bottom: rem(40px);
+}
+
+/* Horizontal & Vertical Margin */
+.sm-x-0 {
+  margin-left: rem(0px);
+  margin-right: rem(0px);
+}
+
+.sm-x-2 {
+  margin-left: rem(2px);
+  margin-right: rem(2px);
+}
+
+.sm-x-4 {
+  margin-left: rem(4px);
+  margin-right: rem(4px);
+}
+
+.sm-x-8 {
+  margin-left: rem(8px);
+  margin-right: rem(8px);
+}
+
+.sm-x-12 {
+  margin-left: rem(12px);
+  margin-right: rem(12px);
+}
+
+.sm-x-16 {
+  margin-left: rem(16px);
+  margin-right: rem(16px);
+}
+
+.sm-x-24 {
+  margin-left: rem(24px);
+  margin-right: rem(24px);
+}
+
+.sm-x-36 {
+  margin-left: rem(36px);
+  margin-right: rem(36px);
+}
+
+.sm-x-40 {
+  margin-left: rem(40px);
+  margin-right: rem(40px);
+}
+
+.sm-y-0 {
+  margin-top: rem(0px);
+  margin-bottom: rem(0px);
+}
+
+.sm-y-2 {
+  margin-top: rem(2px);
+  margin-bottom: rem(2px);
+}
+
+.sm-y-4 {
+  margin-top: rem(4px);
+  margin-bottom: rem(4px);
+}
+
+.sm-y-8 {
+  margin-top: rem(8px);
+  margin-bottom: rem(8px);
+}
+
+.sm-y-12 {
+  margin-top: rem(12px);
+  margin-bottom: rem(12px);
+}
+
+.sm-y-16 {
+  margin-top: rem(16px);
+  margin-bottom: rem(16px);
+}
+
+.sm-y-24 {
+  margin-top: rem(24px);
+  margin-bottom: rem(24px);
+}
+
+.sm-y-36 {
+  margin-top: rem(36px);
+  margin-bottom: rem(36px);
+}
+
+.sm-y-40 {
+  margin-top: rem(40px);
+  margin-bottom: rem(40px);
+}
+
+.br-0 {
+  border-radius: rem(0px);
+}
+
+.br-4 {
+  border-radius: rem(4px);
+}
+
+.br-8 {
+  border-radius: rem(8px);
+}
+
+.br-16 {
+  border-radius: rem(16px);
+}
+
+.br-24 {
+  border-radius: rem(24px);
+}
+
+.br-36 {
+  border-radius: rem(36px);
+}
+
+.br-200 {
+  border-radius: rem(200px);
+}
+
+// ------------------Checkbox Styles--------------------
+.cats-checkbox-container,
+.cats-item, .cats-multiitem {
+  @include flex(flex-start, center, rem(8px));
+  @include fontStyle(var(--fs-16), rem(20px), 400);
+  margin-bottom: rem(8px);
+  color: var(--text-heading-primary);
+  &.disabled-option{
+    color: var(--text-body-muted);
+    pointer-events: none;
+    input[type="checkbox"]:checked{
+      background-color: var(--surface-background-subtle);
+      border-color: var(--border-core-default);
+      &::after{
+        background-image: url(/images/check-disabled.svg);
+      }
+    }
+    &::selection{
+      background-color: transparent;
+    }
+  }
+
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    @include box(rem(16px), rem(16px));
+    min-width: rem(16px);
+    @include border();
+    cursor: pointer;
+    background-color: var(--surface-background-canvas);
+    position: relative;
+    transition: all 0.2s ease;
+
+    // --- Default (unchecked) ---
+    &::after {
+      content: "";
+      display: none;
+      position: absolute;
+      @include position(rem(-1px), rem(-1px));
+      @include box(rem(16px), rem(16px));
+      background-size: auto;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    // --- Checked State ---
+    &:checked {
+      border-color: var(--border-interaction-focus);
+      background-color: var(--surface-action-default);
+      &::after {
+        display: block;
+        background-image: url("/images/check-white.svg");
+        background-size: rem(8px) rem(6px);
+      }
+    }
+    // --- Indeterminate (minus) state ---
+    &:indeterminate {
+      border-color: var(--border-interaction-focus);
+      background-color: var(--surface-background-canvas);
+      &::after {
+        display: block;
+        top: 0;
+        background-image: url("/images/minus-blue.svg");
+        background-size: rem(7px) rem(1px);
+      }
+    }
+    // Disabled (unchecked)
+    &:disabled {
+      cursor: default;
+      background-color: var(--surface-background-default);
+      border-color: var(--border-core-muted);
+      & + span {
+        color: var(--text-body-muted);
+      }
+    }
+
+    //  Disabled + Checked (IMPORTANT)
+    &:checked:disabled {
+      background-color: var(--surface-background-default);
+      border-color: var(--border-core-muted);
+
+      &::after {
+        display: block;
+        background-image: url("/images/check-disabled.svg");
+      }
+    }
+  }
+}