@ambita/design-system 5.7.1-41.0 → 5.7.1-61.0

package/dist/css/neo-tokens.scss

@@ -22,6 +22,34 @@
 // Note: This file does NOT import other SCSS files to avoid circular dependencies.
 // The CSS custom properties it references are defined in semantic-tokens.css.
 
+/* ============================================================================
+   TYPOGRAPHY TOKENS
+   ============================================================================ */
+
+$font-family-sans-serif: var(--font-family-sans-serif) 'sans-serif';
+$font-family-display-serif: var(--font-family-display-serif);
+
+/* ============================================================================
+   GENERAL COLORS
+   ============================================================================ */
+
+$text-heading: var(--text-heading-strong);
+$text-body: var(--text-default);
+$text-label: var(--text-label);
+$text-error: var(--text-error);
+
+$bg-page-white: var(--bg-page-default);
+$bg-page-grey: var(--bg-page-subtle);
+$bg-white: var(--bg-page-default);
+$bg-selected: var(--fill-selected);
+$bg-disabled: var(--fill-disabled);
+
+$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-error: var(--border-color-error);
+
 /* ============================================================================
    BUTTON COMPONENT TOKENS
    ============================================================================ */
@@ -231,34 +259,6 @@ $accordion-toggle-text-color: var(--text-link-default);
 $accordion-toggle-text-hover-color: var(--text-link-active);
 $accordion-toggle-font-size: var(--font-size-xxs);
 
-/* ============================================================================
-   TYPOGRAPHY TOKENS
-   ============================================================================ */
-
-$font-family-sans-serif: var(--font-family-sans-serif) 'sans-serif';
-$font-family-display-serif: var(--font-family-display-serif);
-
-/* ============================================================================
-   GENERAL COLORS
-   ============================================================================ */
-
-$text-heading: var(--text-heading-strong);
-$text-body: var(--text-default);
-$text-label: var(--text-label);
-$text-error: var(--text-error);
-
-$bg-page-white: var(--bg-page-default);
-$bg-page-grey: var(--bg-page-subtle);
-$bg-white: var(--bg-page-default);
-$bg-selected: var(--fill-selected);
-$bg-disabled: var(--fill-disabled);
-
-$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-error: var(--border-color-error);
-
 /* ============================================================================
    SHADOWS
    ============================================================================ */
@@ -454,3 +454,84 @@ $tabs-vertical-trigger-border-left-color: var(--tabs-vertical-trigger-border-lef
 $tabs-vertical-trigger-border-left-color-active: var(
   --tabs-vertical-trigger-border-left-color-active
 );
+
+/* ============================================================================
+   DATEPICKER COMPONENT TOKENS
+   ============================================================================ */
+
+// Datepicker Wrapper
+$datepicker-max-width: 280px;
+$datepicker-gap: 5px;
+
+// Datepicker Field (segmented input)
+$datepicker-segment-padding: 2px;
+$datepicker-segment-radius: 4px;
+$datepicker-segment-color-hover: var(--text-action-active);
+$datepicker-segment-bg-active: var(--fill-button-active);
+$datepicker-segment-transition-duration: 100ms;
+
+$datepicker-field-disabled-opacity: 0.6;
+
+// Datepicker Content (popover)
+$datepicker-content-z-index: 50;
+$datepicker-content-bg: var(--fill-card-default);
+$datepicker-content-border-color: var(--border-color-input);
+$datepicker-content-border-radius: var(--corner-radius-xxs);
+$datepicker-content-shadow: var(--shadow-dropdown);
+$datepicker-content-padding: 16px;
+$datepicker-content-min-width: 280px;
+
+// Datepicker Header
+$datepicker-header-margin-bottom: 12px;
+$datepicker-heading-font-size: var(--font-size-xs);
+$datepicker-heading-font-weight: var(--font-weight-semibold, 600);
+
+// Datepicker Navigation Buttons
+$datepicker-nav-btn-size: 32px;
+$datepicker-nav-btn-radius: var(--corner-radius-m);
+$datepicker-nav-btn-hover-bg: var(--fill-hover, rgba(0, 0, 0, 0.06));
+$datepicker-nav-btn-disabled-opacity: 0.4;
+$datepicker-nav-icon-size: 16px;
+
+// Datepicker Grid Head Cells (weekday labels)
+$datepicker-head-cell-font-size: var(--font-size-xxs, 12px);
+$datepicker-head-cell-font-weight: var(--font-weight-semibold, 600);
+$datepicker-head-cell-color: var(--text-secondary);
+$datepicker-head-cell-padding: 4px 0 8px;
+
+// Datepicker Cell Triggers (day buttons)
+$datepicker-cell-size: 32px;
+$datepicker-cell-radius: 50%;
+$datepicker-cell-font-size: var(--font-size-xs);
+$datepicker-cell-hover-bg: var(--fill-hover, rgba(0, 0, 0, 0.06));
+$datepicker-cell-transition-duration: 150ms;
+
+// Cell Trigger - Today
+$datepicker-cell-today-font-weight: var(--font-weight-bold, 700);
+$datepicker-cell-today-indicator-bg: var(--fill-info-stronger);
+
+// Cell Trigger - Selected
+$datepicker-cell-selected-bg: var(--fill-button-primary-default);
+$datepicker-cell-selected-color: var(--text-button-primary);
+
+// Cell Trigger - Outside Month
+$datepicker-cell-outside-bg: var(--text-action-disabled);
+
+// Cell Trigger - Disabled & Unavailable
+$datepicker-cell-disabled-opacity: 0.3;
+
+// Datepicker Focus
+$datepicker-focus-outline-color: var(--border-color-focus);
+$datepicker-focus-outline-width: 2px;
+$datepicker-focus-outline-offset: 2px;
+
+// Datepicker Footer
+$datepicker-footer-gap: 8px;
+$datepicker-footer-margin-top: 12px;
+$datepicker-footer-padding-top: 12px;
+$datepicker-footer-border-color: var(--border-color-separator);
+$datepicker-footer-font-size: var(--font-size-xxs, 12px);
+
+// Datepicker Animation
+$datepicker-animation-duration-in: 150ms;
+$datepicker-animation-duration-out: 100ms;