@ambita/design-system 6.1.5-741.0 → 6.1.5-761.0

package/dist/css/mixins.scss

@@ -1,3 +1,5 @@
+/* DEPRECATED */
+
 @use "./colors-scss-variables" as *;
 
 $aux-focus-indicator-style:

package/dist/css/neo-mixins.scss

@@ -19,6 +19,21 @@
 @use "./neo-tokens" as *;
 @forward "./functions";
 
+/**
+ * Visually hides an element while keeping it accessible to screen readers.
+ */
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 /* ============================================================================
    DROPDOWN/PORTAL CONTENT MIXINS
    ============================================================================ */
@@ -200,7 +215,7 @@
 @mixin dropdown-empty($padding-y: 8px, $padding-x: 8px) {
   padding: $padding-y $padding-x;
   text-align: center;
-  font-size: 16px;
+  font-size: var(--font-size-xs);
   color: $text-body;
 }
 
@@ -221,7 +236,7 @@
  */
 @mixin dropdown-label($padding-y: 8px, $padding-x: 12px) {
   padding: $padding-y $padding-x;
-  font-size: 14px;
+  font-size: var(--font-size-xxs);
   font-weight: 600;
   color: $text-body;
   background: $dropdown-label-bg;
@@ -322,11 +337,11 @@
  * Interactive element focus ring
  * For buttons, triggers, and other interactive elements
  */
-@mixin focus-interactive {
+@mixin focus-interactive($focus-selector: ":focus-visible") {
   outline: none;
   transition: box-shadow 0.15s ease-in-out;
 
-  &:focus-visible {
+  &#{$focus-selector} {
     box-shadow: $shadow-focus;
   }
 }
@@ -441,7 +456,7 @@
 
 /* Heading XXL Display - PT Serif, 50px, weight 400, line-height 54px */
 @mixin heading-xxl-display {
-  font-family: var(--font-family-display);
+  font-family: $font-family-display-serif;
   font-size: var(--font-size-xxl);
   font-weight: var(--font-weight-regular);
   line-height: var(--font-line-height-xxxl);
@@ -457,7 +472,7 @@
 
 /* Heading XL Display - PT Serif, 30px, weight 400, line-height 34px */
 @mixin heading-xl-display {
-  font-family: var(--font-family-display);
+  font-family: $font-family-display-serif;
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-regular);
   line-height: var(--font-line-height-xxl);

package/dist/css/neo-tokens.scss

@@ -36,6 +36,8 @@ $font-family-display-serif: var(--font-family-display-serif);
 $text-heading: var(--text-heading-strong);
 $text-body: var(--text-default);
 $text-label: var(--text-label);
+$text-label-hover: var(--text-label-hover);
+$text-label-on-success: var(--text-label-on-success);
 $text-error: var(--text-error);
 
 $bg-page-white: var(--bg-page-default);
@@ -48,6 +50,7 @@ $border-color-input: var(--border-color-input);
 $border-color-divider: var(--border-color-separator);
 $border-color-separator: var(--border-color-separator);
 $border-color-focus: var(--border-color-focus);
+$border-color-selected: var(--border-color-selected);
 $border-color-error: var(--border-color-error);
 
 /* ============================================================================
@@ -156,6 +159,36 @@ $input-error-shadow: var(--shadow-error);
 
 $input-icon-size: 20px;
 
+/* ============================================================================
+   CHECKBOX COMPONENT TOKENS
+   ============================================================================ */
+
+$checkbox-disabled-bg: var(--fill-disabled-stronger);
+$checkbox-card-border-radius: var(--corner-radius-s);
+$checkbox-card-focus-outline: 1px solid $border-color-focus;
+$checkbox-card-focus-outline-offset: 3px;
+$checkbox-error-checked-border-width: var(--border-weight-input, 1px);
+
+/* ============================================================================
+   CHECKBOX COLLAPSIBLE COMPONENT TOKENS
+   ============================================================================ */
+
+$checkbox-collapsible-content-gap: var(--number-spacing-spacing-l);
+$checkbox-collapsible-body-gap: var(--number-spacing-spacing-s);
+$checkbox-collapsible-animation-duration: 200ms;
+$checkbox-collapsible-stripe-width: 3px;
+$checkbox-collapsible-stripe-radius: var(--corner-radius-pill);
+$checkbox-collapsible-stripe-color: $border-color-selected;
+$checkbox-collapsible-stripe-margin-left: var(--number-spacing-spacing-s);
+$checkbox-collapsible-stripe-margin-right: var(--number-spacing-spacing-l);
+
+/* ============================================================================
+   CHECKBOX GROUP COMPONENT TOKENS
+   ============================================================================ */
+
+$checkbox-group-label-font-size: var(--font-size-s);
+$checkbox-group-label-font-weight: var(--font-weight-medium);
+
 /* ============================================================================
    DROPDOWN/SELECT COMPONENT TOKENS
    ============================================================================ */