cax-design-system 2.7.12 → 2.8.1

package/resources/cax.scss

@@ -5140,9 +5140,17 @@
     width: 0.875rem;
     height: 0.875rem;
 }
+
+.cax-checkbox .cax-checkbox-box.cax-checkbox-sm.cax-highlight {
+    background-color: var(--primary-500);
+    border: 2px solid var(--primary-500);
+    outline: 1.5px solid var(--primary-300);
+}
+
 .cax-checkbox .cax-checkbox-box.cax-highlight {
     border-color: var(--primary-500);
     background: var(--primary-500);
+    outline: 2px solid var(--primary-300);
 }
 
 .cax-checkbox-box:hover {
@@ -5175,6 +5183,7 @@
 .cax-checkbox-indeterminate .cax-checkbox-box {
     background-color: var(--primary-500);
     border: 2px solid var(--primary-500);
+    // outline: 2px solid var(--primary-300);
 }
 
 .cax-checkbox-indeterminate .cax-checkbox-box:hover {
@@ -6025,6 +6034,7 @@ cax-calendar.cax-calendar-clearable .cax-calendar-w-btn .cax-calendar-clear-icon
 .cax-radiobutton .cax-radiobutton-box.cax-highlight {
     border-color: var(--primary-500);
     background: var(--primary-500);
+    outline: 2px solid var(--primary-300);
 }
 .cax-radiobutton .cax-radiobutton-box.cax-highlight:not(.cax-disabled):hover {
     border-color: var(--primary-600);
@@ -6039,6 +6049,7 @@ cax-calendar.cax-calendar-clearable .cax-calendar-w-btn .cax-calendar-clear-icon
 }
 .cax-radiobutton.cax-variant-filled .cax-radiobutton-box.cax-highlight {
     background: var(--primary-500);
+    outline: 2px solid var(--primary-300);
 }
 .cax-radiobutton.cax-variant-filled .cax-radiobutton-box.cax-highlight:not(.cax-disabled):hover {
     background: var(--primary-600);
@@ -6068,7 +6079,7 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
         0 1px 2px 0 rgba(18, 18, 23, 0.05);
 }
 .cax-radiobutton .cax-radiobutton-box.cax-focus {
-    outline-offset: 2px;
+    outline: 2px solid var(--primary-300);
 }
 .cax-radiobutton .cax-radiobutton-box.cax-focus.cax-highlight {
     border-color: var(--primary-500);
@@ -6882,6 +6893,7 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
     }
     &:enabled:focus {
         border-color: var(--primary-500);
+        outline: 2px solid var(--primary-300);
     }
 }
 
@@ -6893,6 +6905,7 @@ input.cax-input-invalid:hover,
 input.cax-input-invalid:focus,
 .cax-inputtext.cax-input-invalid:focus {
     border-color: var(--error-500) !important;
+    outline: 2px solid var(--primary-300);
 }
 
 // Update disabled state styles
@@ -7566,6 +7579,9 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     border-radius: var(--radius-100);
     outline-color: transparent;
 }
+.cax-button:focus {
+    outline: 2px solid var(--primary-300);
+}
 .cax-button:not(:disabled):hover {
     background: var(--primary-600);
     color: var(--white-100);
@@ -7576,6 +7592,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     color: var(--white-100);
     border-color: var(--primary-500);
 }
+
 .cax-button.cax-button-outlined {
     background-color: transparent;
     color: var(--primary-500);
@@ -8472,7 +8489,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     padding-right: 5.5rem !important;
 }
 .cax-tabview .cax-tabview-nav {
-    background: var(--white-100);
+    background: transparent;
     // border: var(--border-100) solid var(--neutral-200);
     border-width: 0 0 var(--border-200) 0;
 }
@@ -8565,7 +8582,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     border: var(--border-100) solid var(--neutral-700);
     border-width: 0 0 0 0;
     border-color: transparent transparent var(--neutral-700) transparent;
-    background: var(--white-100);
+    background: transparent;
     color: var(--neutral-600);
     padding: var(--space-200);
     font-weight: 500;
@@ -8590,7 +8607,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 }
 
 .cax-tabview .cax-tabview-nav li.cax-highlight .cax-tabview-nav-link {
-    background: var(--white-100);
+    background: transparent;
     border-color: var(--neutral-700);
     color: var(--primary-500);
 }
@@ -9061,6 +9078,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 .cax-toggleswitch:checked ~ .cax-toggleswitch-track {
     background-color: var(--primary-500);
     border: 1px solid var(--primary-500);
+    outline: 2px solid var(--primary-300);
 }
 
 /* Update hover styles for unchecked state */
@@ -9175,6 +9193,17 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
     line-height: 20px;
     color: var(--neutral-900);
 }
+
+.cax-editor-container {
+    border-radius: 6px;
+    outline: none;
+}
+
+.cax-editor-container:focus-within {
+    outline: 2px solid var(--primary-300);
+    border-radius: 6px;
+}
+
 .cax-editor-container .cax-editor-toolbar {
     background: var(--white-100);
     border-top-right-radius: 6px;

package/resources/components/tabview/tabview.scss

@@ -13,7 +13,7 @@
         align-items: center;
         margin-left: auto;
     }
-    
+
     .cax-tabview-separator {
         width: 2px;
         height: 35px;

package/resources/styles/typography.scss

@@ -1,135 +1,116 @@
 @layer cax {
-    .cax-text-fw-light {
-        font-weight: 300;
-    }
-    .cax-text-fw-regular {
-        font-weight: 400 !important;
-    }
-    .cax-text-fw-medium {
-        font-weight: 500 !important;
-    }
-    .cax-text-fw-semibold {
-        font-weight: 600;
-    }
-    .cax-text-fw-bold {
-        font-weight: 700;
-    }
-
-    .cax-text-display-lg {
-        font-size: 96px;
-        line-height: 124px;
-        letter-spacing: -2px;
-    }
-
-    .cax-text-display-md {
-        font-size: 72px;
-        line-height: 96px;
-        letter-spacing: -2px;
-    }
-
-    .cax-text-display-sm {
-        font-size: 56px;
-        line-height: 72px;
-        letter-spacing: -2px;
-    }
-
-    .cax-text-heading-2xl {
-        font-size: 40px;
-        line-height: 52px;
-        letter-spacing: -2px;
-    }
-
-    .cax-text-heading-xl {
-        font-size: 32px;
-        line-height: 40px;
-        letter-spacing: -2px;
-    }
-
-    .cax-text-heading-lg {
-        font-size: 28px;
-        line-height: 36px;
-    }
-
-    .cax-text-heading-md {
-        font-size: 24px;
-        line-height: 32px;
-    }
-
-    .cax-text-heading-sm {
-        font-size: 20px;
-        line-height: 28px;
-    }
-
-    .cax-text-heading-xs {
-        font-size: 18px;
-        line-height: 24px;
-    }
-
-    .cax-text-body-lg {
-        font-size: 18px;
-        line-height: 26px;
-    }
-
-    .cax-text-body-md {
-        font-size: 16px;
-        line-height: 24px;
-    }
-
-    .cax-text-body-sm {
-        font-size: 14px;
-        line-height: 24px;
-    }
-
-    .cax-text-body-xs {
-        font-size: 12px;
-        line-height: 18px;
-    }
-
-    .cax-text-action-lg {
-        font-size: 18px;
-        line-height: 28px;
-        text-decoration: none;
-    }
-
-    .cax-text-action-link-lg {
-        font-size: 18px;
-        line-height: 28px;
-        text-decoration: underline;
-    }
-
-    .cax-text-action-md {
-        font-size: 16px;
-        line-height: 24px;
-        text-decoration: none;
-    }
-
-    .cax-text-action-link-md {
-        font-size: 16px;
-        line-height: 24px;
-        text-decoration: underline;
-    }
-
-    .cax-text-action-sm {
-        font-size: 14px;
-        line-height: 20px;
-        text-decoration: none;
-    }
-
-    .cax-text-action-link-sm {
-        font-size: 14px;
-        line-height: 20px;
-        text-decoration: underline;
-    }
-
-    .cax-text-action-xs {
-        font-size: 12px;
-        line-height: 18px;
-        text-decoration: none;
-    }
-
-    .cax-text-action-link-xs {
-        font-size: 12px;
-        line-height: 18px;
-        text-decoration: underline;
-    }
+  // Font Weights
+  .cax-text-fw-light { font-weight: 300; }
+  .cax-text-fw-regular { font-weight: 400 !important; }
+  .cax-text-fw-medium { font-weight: 500 !important; }
+  .cax-text-fw-semibold { font-weight: 600; }
+  .cax-text-fw-bold { font-weight: 700; }
+
+  // Breakpoints
+  $tablet: 960px;
+  $mobile: 360px;
+
+  // ========== DISPLAY ==========
+  .cax-text-display-xl {
+    font-size: 64px; line-height: 76px; letter-spacing: -0.5px;
+    @media (max-width: $tablet) { font-size: 56px; line-height: 68px; }
+    @media (max-width: $mobile) { font-size: 44px; line-height: 56px; letter-spacing: -0.4px; }
+  }
+
+  .cax-text-display-lg {
+    font-size: 48px; line-height: 60px; letter-spacing: -0.4px;
+    @media (max-width: $tablet) { font-size: 40px; line-height: 52px; letter-spacing: -0.3px; }
+    @media (max-width: $mobile) { font-size: 32px; line-height: 44px; letter-spacing: -0.3px; }
+  }
+
+  .cax-text-display-md {
+    font-size: 36px; line-height: 48px; letter-spacing: -0.3px;
+    @media (max-width: $tablet) { font-size: 32px; line-height: 44px; letter-spacing: -0.2px; }
+    @media (max-width: $mobile) { font-size: 28px; line-height: 36px; letter-spacing: -0.2px; }
+  }
+
+  .cax-text-display-sm {
+    font-size: 28px; line-height: 36px; letter-spacing: -0.2px;
+    @media (max-width: $tablet) { font-size: 24px; line-height: 32px; letter-spacing: -0.1px; }
+    @media (max-width: $mobile) { font-size: 20px; line-height: 28px; letter-spacing: -0.1px; }
+  }
+
+  // ========== HEADINGS ==========
+  .cax-text-heading-xl {
+    font-size: 32px; line-height: 40px; letter-spacing: -0.2px;
+    @media (max-width: $tablet) { font-size: 28px; line-height: 36px; letter-spacing: -0.1px; }
+    @media (max-width: $mobile) { font-size: 24px; line-height: 32px; letter-spacing: -0.1px; }
+  }
+
+  .cax-text-heading-lg {
+    font-size: 24px; line-height: 32px; letter-spacing: -0.1px;
+    @media (max-width: $tablet) { font-size: 22px; line-height: 30px; letter-spacing: 0px; }
+    @media (max-width: $mobile) { font-size: 20px; line-height: 28px; letter-spacing: 0px; }
+  }
+
+  .cax-text-heading-md {
+    font-size: 20px; line-height: 28px; letter-spacing: 0px;
+    @media (max-width: $tablet) { font-size: 18px; line-height: 24px; }
+    @media (max-width: $mobile) { font-size: 16px; line-height: 22px; }
+  }
+
+  .cax-text-heading-sm {
+    font-size: 16px; line-height: 24px; letter-spacing: 0px;
+    @media (max-width: $tablet) { font-size: 16px; line-height: 22px; }
+    @media (max-width: $mobile) { font-size: 14px; line-height: 20px; }
+  }
+
+  // ========== BODY ==========
+  .cax-text-body-lg {
+    font-size: 18px; line-height: 28px; letter-spacing: 0px;
+    @media (max-width: $tablet) { font-size: 16px; line-height: 28px; }
+    @media (max-width: $mobile) { font-size: 16px; line-height: 24px; }
+  }
+
+  .cax-text-body-md {
+    font-size: 16px; line-height: 24px; letter-spacing: 0px;
+    @media (max-width: $tablet) { font-size: 16px; line-height: 22px; }
+    @media (max-width: $mobile) { font-size: 14px; line-height: 20px; letter-spacing: 0.1px; }
+  }
+
+  .cax-text-body-sm {
+    font-size: 14px; line-height: 20px; letter-spacing: 0.1px;
+    @media (max-width: $tablet) { font-size: 13px; line-height: 18px; letter-spacing: 0.1px; }
+    @media (max-width: $mobile) { font-size: 12px; line-height: 16px; letter-spacing: 0.2px; }
+  }
+
+  .cax-text-body-xsm {
+    font-size: 12px; line-height: 16px; letter-spacing: 0.2px;
+    @media (max-width: $tablet) { font-size: 11px; line-height: 14px; letter-spacing: 0.2px; }
+    @media (max-width: $mobile) { font-size: 10px; line-height: 12px; letter-spacing: 0.3px; }
+  }
+
+  // ========== ACTIONS ==========
+  .cax-text-action-lg {
+    font-size: 16px; line-height: 24px; letter-spacing: 0.1px; text-decoration: none;
+    @media (max-width: $tablet) { font-size: 15px; line-height: 22px; }
+    @media (max-width: $mobile) { font-size: 14px; line-height: 20px; letter-spacing: 0.2px; }
+  }
+  .cax-text-action-lg-link { @extend .cax-text-action-lg; text-decoration: underline; }
+
+  .cax-text-action-md {
+    font-size: 14px; line-height: 20px; letter-spacing: 0.2px; text-decoration: none;
+    @media (max-width: $tablet) { font-size: 13px; line-height: 18px; }
+    @media (max-width: $mobile) { font-size: 12px; line-height: 16px; letter-spacing: 0.3px; }
+  }
+  .cax-text-action-md-link { @extend .cax-text-action-md; text-decoration: underline; }
+
+  .cax-text-action-sm {
+    font-size: 12px; line-height: 16px; letter-spacing: 0.3px; text-decoration: none;
+    @media (max-width: $tablet) { font-size: 11px; line-height: 14px; }
+    @media (max-width: $mobile) { font-size: 10px; line-height: 12px; letter-spacing: 0.4px; }
+  }
+  .cax-text-action-sm-link { @extend .cax-text-action-sm; text-decoration: underline; }
+
+  .cax-text-action-xsm {
+    font-size: 10px; line-height: 12px; letter-spacing: 0.4px; text-decoration: none;
+    @media (max-width: $tablet) { font-size: 9px; line-height: 10px; letter-spacing: 0.5px; }
+    @media (max-width: $mobile) { font-size: 8px; line-height: 10px; letter-spacing: 0.5px; }
+  }
+  .cax-text-action-xsm-link { @extend .cax-text-action-xsm; text-decoration: underline; }
 }