cats-ui-lib 2.0.4 → 2.0.5

package/styles/_utilities.scss

@@ -4,9 +4,11 @@
 .pointer {
   cursor: pointer;
 }
+
 .d-none {
   display: none;
 }
+
 // ---------------------------- THREE DOTS TRUNCATE TEXT ------------------------
 .textTruncate {
   text-overflow: ellipsis;
@@ -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,693 @@ 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);
+}