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

package/dist/css/neo-tokens.scss

@@ -8,6 +8,14 @@
    These variables reference CSS custom properties defined in semantic-tokens.css
    which is imported separately in the main entry point.
 
+   Naming convention: ${component}-{property}-{variant}-{state}
+   - component: component name in full, lowercase (e.g. "button", "input", "dropdown")
+   - property:  what is being styled (e.g. "bg", "text", "border-color", "padding-x")
+   - variant:   optional modifier (e.g. "primary", "secondary", "card")
+   - state:     optional interaction state — always last (e.g. "hover", "disabled", "error")
+   Examples: $button-primary-bg-hover, $input-error-border-color, $dropdown-item-bg-selected
+   Full reference: docs/DESIGN_TOKENS_GUIDE.md#token-naming-conventions
+
    Usage:
    ```scss
    @use '@/css/neo-tokens' as *;
@@ -26,6 +34,8 @@
    TYPOGRAPHY TOKENS
    ============================================================================ */
 
+$font-size-xs: var(--font-size-xs);
+$font-size-xxs: var(--font-size-xxs);
 $font-family-sans-serif: var(--font-family-sans-serif) "sans-serif";
 $font-family-display-serif: var(--font-family-display-serif);
 
@@ -53,6 +63,12 @@ $border-color-focus: var(--border-color-focus);
 $border-color-selected: var(--border-color-selected);
 $border-color-error: var(--border-color-error);
 
+/* ============================================================================
+   GENERAL SIZES
+   ============================================================================ */
+
+$icon-size-l: 20px;
+
 /* ============================================================================
    BUTTON COMPONENT TOKENS
    ============================================================================ */
@@ -92,7 +108,7 @@ $button-tertiary-text: var(--text-link-default);
 
 // Button Sizing & Spacing
 $button-padding-x: 24px;
-$button-padding-y: 10px;
+$button-padding-y: var(--number-spacing-spacing-s);
 $button-padding-x-icon: 12px;
 $button-icon-only-padding: var(--number-spacing-spacing-s);
 $button-icon-size: 18px;
@@ -137,8 +153,8 @@ $input-text-color: var(--text-input);
 $input-placeholder-color: var(--text-input);
 $input-placeholder-opacity: 0.7;
 
-$input-padding-x: 10px;
-$input-padding-y: 10px;
+$input-padding-x: var(--number-spacing-spacing-s);
+$input-padding-y: var(--number-spacing-spacing-s);
 
 $input-font-size: var(--font-size-xs);
 $input-font-weight: var(--font-weight-regular);
@@ -157,30 +173,46 @@ $input-disabled-text: var(--text-action-disabled);
 $input-error-border-color: var(--border-color-error);
 $input-error-shadow: var(--shadow-error);
 
-$input-icon-size: 20px;
+$input-icon-size: $icon-size-l;
 
 /* ============================================================================
    CHECKBOX COMPONENT TOKENS
    ============================================================================ */
 
-$checkbox-disabled-bg: var(--fill-disabled-stronger);
+$checkbox-size: $icon-size-l;
+$checkbox-bg-disabled: 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-card-outline-focus: 1px solid $border-color-focus;
+$checkbox-card-outline-offset-focus: 3px;
+$checkbox-border-width-error-checked: var(--border-weight-input, 1px);
+$checkbox-indicator-size: 15px;
+$checkbox-indicator-color: var(--icon-fill-selected);
+$checkbox-indicator-color-disabled: var(--icon-fill-disabled);
+
+/* ============================================================================
+   RADIO COMPONENT TOKENS
+   ============================================================================ */
+
+$radio-button-size: $icon-size-l;
+$radio-indicator-size: 6px;
+$radio-indicator-color: var(--icon-fill-selected);
+$radio-indicator-color-disabled: var(--icon-fill-disabled);
+$radio-border-width-error: 3px;
+$radio-border-width-error-checked: 2px;
 
 /* ============================================================================
-   CHECKBOX COLLAPSIBLE COMPONENT TOKENS
+   COLLAPSIBLE SHARED TOKENS
+   (used by both NeoCheckboxCollapsible and NeoRadioCollapsible)
    ============================================================================ */
 
-$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);
+$collapsible-content-gap: var(--number-spacing-spacing-l);
+$collapsible-body-gap: var(--number-spacing-spacing-s);
+$collapsible-animation-duration: 200ms;
+$collapsible-stripe-width: 3px;
+$collapsible-stripe-radius: var(--corner-radius-xxs);
+$collapsible-stripe-color: $border-color-selected;
+$collapsible-stripe-margin-left: 8px;
+$collapsible-stripe-margin-right: 18px;
 
 /* ============================================================================
    CHECKBOX GROUP COMPONENT TOKENS
@@ -206,9 +238,9 @@ $dropdown-item-bg-selected: var(--fill-select-hover);
 $dropdown-item-text-selected: var(--text-default);
 $dropdown-item-font-weight: var(--font-weight-regular);
 
-$dropdown-item-padding-x: 10px;
+$dropdown-item-padding-x: var(--number-spacing-spacing-s);
 $dropdown-item-padding-y: 7px;
-$dropdown-item-gap: 10px;
+$dropdown-item-gap: var(--number-spacing-spacing-s);
 
 $dropdown-label-bg: var(--fill-card-default);
 
@@ -286,7 +318,7 @@ $accordion-content-bg-secondary: var(--fill-card-raised);
 
 // Accordion Icon
 $accordion-icon-size: var(--font-size-s);
-$accordion-icon-margin-left: 5px;
+$accordion-icon-margin-left: var(--number-spacing-spacing-xs);
 $accordion-icon-transition-duration: $default-transition-duration;
 
 // Accordion Toggle Button
@@ -361,7 +393,7 @@ $pagination-icon-size: 18px;
 
 // Pagination Small Screen
 $pagination-small-screen-font-weight: 500;
-$pagination-small-screen-margin: 20px;
+$pagination-small-screen-margin: var(--number-spacing-spacing-l);
 $pagination-small-screen-padding-top: 12px;
 
 $pagination-button-shadow: none;
@@ -371,8 +403,8 @@ $pagination-button-shadow: none;
    ============================================================================ */
 
 // Banner Layout & Spacing
-$banner-padding-x: 15px;
-$banner-padding-y: 10px;
+$banner-padding-x: var(--number-spacing-spacing-m);
+$banner-padding-y: var(--number-spacing-spacing-s);
 $banner-icon-margin-right: 12px;
 $banner-max-width: 700px;
 $banner-gap: 12px;
@@ -392,7 +424,7 @@ $banner-text-color: var(--text-feedback);
 
 // Banner Icon Sizing
 $banner-icon-size-small: 16px;
-$banner-icon-size-default: 20px;
+$banner-icon-size-default: $icon-size-l;
 
 // Banner Close Button
 $banner-close-btn-size: 24px;
@@ -405,7 +437,7 @@ $banner-footer-gap: 8px;
 
 // Banner List Styling
 $banner-list-margin-y: 8px;
-$banner-list-padding-left: 20px;
+$banner-list-padding-left: var(--number-spacing-spacing-l);
 $banner-list-item-margin-bottom: 4px;
 
 // Banner Type-Specific Backgrounds & Borders
@@ -502,7 +534,7 @@ $tabs-vertical-trigger-border-left-color-active: var(
 
 // Datepicker Wrapper
 $datepicker-max-width: 280px;
-$datepicker-gap: 5px;
+$datepicker-gap: var(--number-spacing-spacing-xs);
 
 // Datepicker Field (segmented input)
 $datepicker-segment-padding: 2px;
@@ -602,4 +634,4 @@ $spinner-label-font-size-medium: 12px;
 $spinner-label-font-size-large: 24px;
 
 // Spinner label margin (space between indicator and label)
-$spinner-label-margin-top: 10px;
+$spinner-label-margin-top: var(--number-spacing-spacing-s);