@synergycodes/overflow-ui/dist/tokens.css

A React library for creating node-based UIs and diagram-driven applications. Perfect for React Flow users, providing ready-to-use node templates and components that work seamlessly with React Flow's ecosystem.

@import "./numerals-mode-1.css";

@import "./primitives-mode-1.css";

/**
 * Do not edit directly, this file was auto-generated.
 */

html[data-theme='dark'] {
  --ax-button-primary-bg-default: var(--ax-colors-acc1-500);
  --ax-button-primary-bg-hover: var(--ax-colors-acc1-600);
  --ax-button-primary-bg-active: var(--ax-colors-acc1-700);
  --ax-button-primary-bg-focus: var(--ax-colors-acc1-500);
  --ax-button-primary-bg-loading: var(--ax-colors-acc1-500);
  --ax-button-primary-bg-disabled: var(--ax-colors-gray-600);
  --ax-button-gray-bg-default: var(--ax-colors-gray-650);
  --ax-button-gray-bg-hover: var(--ax-colors-gray-600);
  --ax-button-gray-bg-active: var(--ax-colors-gray-500);
  --ax-button-gray-bg-focus: var(--ax-colors-gray-650);
  --ax-button-gray-bg-loading: var(--ax-colors-gray-650);
  --ax-button-gray-bg-disabled: var(--ax-colors-gray-500);
  --ax-button-red-bg-default: var(--ax-colors-red-400);
  --ax-button-red-bg-hover: var(--ax-colors-red-500);
  --ax-button-red-bg-active: var(--ax-colors-red-600);
  --ax-button-red-bg-focus: var(--ax-colors-red-400);
  --ax-button-red-bg-loading: var(--ax-colors-red-400);
  --ax-button-red-bg-disabled: var(--ax-colors-gray-400);
  --ax-button-green-bg-default: var(--ax-colors-green-300);
  --ax-button-green-bg-hover: var(--ax-colors-green-400);
  --ax-button-green-bg-active: var(--ax-colors-green-300);
  --ax-button-green-bg-focus: var(--ax-colors-green-300);
  --ax-button-green-bg-loading: var(--ax-colors-green-300);
  --ax-button-green-bg-disabled: var(--ax-colors-gray-400);
  --ax-button-orange-bg-default: var(--ax-colors-orange-300);
  --ax-button-orange-bg-hover: var(--ax-colors-orange-400);
  --ax-button-orange-bg-active: var(--ax-colors-orange-300);
  --ax-button-orange-bg-focus: var(--ax-colors-orange-300);
  --ax-button-orange-bg-loading: var(--ax-colors-orange-300);
  --ax-ui-bg-primary-default: var(--ax-colors-gray-700);
  --ax-ui-stroke-primary-default: var(--ax-colors-gray-650);
  --ax-node-bg-primary-default: var(--ax-colors-gray-700);
  --ax-node-stroke-primary-default: var(--ax-colors-gray-600);
  --ax-node-stroke-primary-hover: var(--ax-colors-acc1-400);
  --ax-txt-primary-default: var(--ax-colors-gray-100);
  --ax-ui-bg-secondary-default: var(--ax-colors-gray-650);
  --ax-txt-secondary-default: var(--ax-colors-gray-400);
  --ax-txt-tertiary-default: var(--ax-colors-gray-500);
  --ax-ui-bg-tertiary-default: var(--ax-colors-gray-800);
  --ax-node-bg-secondary-default: var(--ax-colors-gray-800);
  --ax-input-stroke-primary-default: var(--ax-colors-gray-600);
  --ax-input-stroke-primary-focus: var(--ax-colors-acc1-500);
  --ax-input-stroke-primary-error: var(--ax-colors-red-400);
  --ax-input-stroke-primary-success: var(--ax-colors-green-400);
  --ax-txt-quaternary-default: var(--ax-colors-gray-600);
  --ax-txt-error-default: var(--ax-colors-red-100);
  --ax-txt-success-default: var(--ax-colors-green-200);
  --ax-input-bg-primary-success: var(--ax-colors-green-400-10);
  --ax-input-bg-primary-error: var(--ax-colors-red-400-10);
  --ax-dropdown-bg-primary-default: var(--ax-colors-gray-650);
  --ax-dropdown-bg-secondary-active: var(--ax-colors-acc1-500);
  --ax-dropdown-bg-destructive-hover: var(--ax-colors-red-400-50);
  --ax-dropdown-bg-secondary-default: var(--ax-colors-gray-600);
  --ax-ui-bg-tertiary-selected: var(--ax-colors-acc1-600);
  --ax-nav-button-bg-primary-hover: var(--ax-colors-gray-100-5);
  --ax-nav-button-icon-primary-default: var(--ax-colors-gray-400);
  --ax-nav-button-icon-primary-active: var(--ax-colors-gray-100);
  --ax-nav-button-icon-primary-disabled: var(--ax-colors-gray-600);
  --ax-ui-stroke-primary-focus: var(--ax-colors-gray-500);
  --ax-txt-primary-white: var(--ax-colors-gray-100);
  --ax-ui-separator-primary-default: var(--ax-colors-gray-600);
  --ax-ui-stroke-secondary-default: var(--ax-colors-gray-600);
  --ax-txt-primary-disabled: var(--ax-colors-gray-100-30);
  --ax-pt-bg-primary-default: var(--ax-colors-gray-200);
  --ax-pt-stroke-primary-default: var(--ax-colors-gray-300);
  --ax-txt-secondary-inverse: var(--ax-colors-gray-700);
  --ax-button-ghost-destructive-bg-default: var(--ax-colors-red-400-10);
  --ax-button-ghost-destructive-bg-hover: var(--ax-colors-red-400-20);
  --ax-button-ghost-destructive-bg-active: var(--ax-colors-red-400-30);
  --ax-button-ghost-destructive-bg-focus: var(--ax-colors-red-400-10);
  --ax-button-ghost-destructive-bg-loading: var(--ax-colors-red-400-10);
  --ax-button-ghost-destructive-bg-disabled: var(--ax-colors-red-400-10);
  --ax-button-ghost-destructive-stroke-default: var(--ax-colors-red-400);
  --ax-txt-destuctive-default: var(--ax-colors-red-100);
  --ax-txt-destructive-disabled: var(--ax-colors-red-100-30);
  --ax-dropdown-bg-destructive-default: var(--ax-colors-red-400-30);
  --ax-snackbar-bg-default: var(--ax-colors-gray-100-10);
  --ax-snackbar-bg-information: var(--ax-colors-acc1-500-10);
  --ax-snackbar-bg-warning: var(--ax-colors-orange-400-10);
  --ax-snackbar-bg-success: var(--ax-colors-green-400-10);
  --ax-snackbar-bg-error: var(--ax-colors-red-400-10);
  --ax-txt-info-default: var(--ax-colors-acc1-200);
  --ax-txt-warning-default: var(--ax-colors-orange-100);
  --ax-node-icon-primary-default: var(--ax-colors-acc1-400);
  --ax-node-icon-primary-disabled: var(--ax-colors-gray-100-30);
  --ax-node-txt-disabled: var(--ax-colors-gray-100-30);
  --ax-node-bg-primary-disabled: var(--ax-colors-gray-800);
  --ax-tooltip-bg-default: var(--ax-colors-gray-300);
  --ax-tooltip-bg-blue: var(--ax-colors-acc1-800);
  --ax-nav-button-icon-primary-hover: var(--ax-colors-gray-100);
  --ax-node-bg-primary-hover: var(--ax-colors-acc1-950-10);
  --ax-ui-canvas-dots-default: var(--ax-colors-gray-650);
  --ax-txt-tooltip-bw: var(--ax-colors-gray-800);
  --ax-txt-tooltip-blue: var(--ax-colors-gray-100);
  --ax-node-port-fill-default: var(--ax-colors-gray-100);
  --ax-node-port-fill-active: var(--ax-colors-acc1-500);
  --ax-node-port-stroke-default: var(--ax-colors-gray-500);
  --ax-node-port-stroke-active: var(--ax-colors-gray-100);
  --ax-node-notify-bg-default: var(--ax-colors-orange-400);
  --ax-node-notify-ico-default: var(--ax-colors-orange-100);
  --ax-scrollbar-bg-default: var(--ax-colors-gray-500);
  --ax-chips-neutral-txt: var(--ax-colors-gray-100);
  --ax-chips-neutral-bg: var(--ax-colors-gray-650);
  --ax-chips-neutral-icon: var(--ax-colors-acc1-400);
  --ax-chips-neutral-x: var(--ax-colors-gray-450);
  --ax-shadow: var(--ax-colors-gray-900-50);
  --ax-focus-ring-node-active: var(--ax-colors-acc1-500-40);
  --ax-chips-acc1-bg: var(--ax-colors-acc1-500-10);
  --ax-chips-acc1-txt: var(--ax-colors-acc1-300);
  --ax-chips-acc1-icon: var(--ax-colors-acc1-300);
  --ax-chips-acc1-x: var(--ax-colors-acc1-300);
  --ax-chips-acc1-stroke: var(--ax-colors-acc1-300);
  --ax-chips-acc2-bg: var(--ax-colors-acc2-500-10);
  --ax-chips-acc2-stroke: var(--ax-colors-acc2-300);
  --ax-chips-acc2-txt: var(--ax-colors-acc2-300);
  --ax-chips-acc2-icon: var(--ax-colors-acc2-300);
  --ax-chips-acc2-x: var(--ax-colors-acc2-300);
  --ax-chips-acc3-bg: var(--ax-colors-acc3-500-10);
  --ax-chips-acc3-stroke: var(--ax-colors-acc3-300);
  --ax-chips-acc3-txt: var(--ax-colors-acc3-300);
  --ax-chips-acc3-icon: var(--ax-colors-acc3-300);
  --ax-chips-acc3-x: var(--ax-colors-acc3-300);
  --ax-chips-acc4-bg: var(--ax-colors-acc4-500-10);
  --ax-chips-acc4-stroke: var(--ax-colors-acc4-300);
  --ax-chips-acc4-txt: var(--ax-colors-acc4-300);
  --ax-chips-acc4-icon: var(--ax-colors-acc4-300);
  --ax-chips-acc4-x: var(--ax-colors-acc4-300);
  --ax-chips-acc5-bg: var(--ax-colors-acc5-500-10);
  --ax-chips-acc5-stroke: var(--ax-colors-acc5-200);
  --ax-chips-acc5-txt: var(--ax-colors-acc5-200);
  --ax-chips-acc5-icon: var(--ax-colors-acc5-200);
  --ax-chips-acc5-x: var(--ax-colors-acc5-200);
  --ax-focus-ring-node-warning: var(--ax-colors-acc5-500-40);
  --ax-focus-ring-node-error: var(--ax-colors-acc2-500-40);
  --ax-txt-primary-inverse: var(--ax-colors-gray-800);
  --ax-node-bg-tertiary-default: var(--ax-colors-gray-650);
  --ax-node-bg-tertiary-hover: var(--ax-colors-gray-500);
  --ax-nav-button-icon-primary-pressed: var(--ax-colors-acc1-500);
  --ax-ui-stroke-primary-highlight: var(--ax-colors-acc1-500);
  --ax-tab-stroke-line: var(--ax-colors-gray-600);
  --ax-tab-stroke-default: var(--ax-colors-gray-500);
  --ax-tab-stroke-hover: var(--ax-colors-gray-200);
  --ax-tab-stroke-active: var(--ax-colors-acc1-500);
  --ax-dropzone-bg-default: var(--ax-colors-gray-700);
  --ax-dropzone-bg-hover: var(--ax-colors-gray-650);
  --ax-dropzone-bg-dragging: var(--ax-colors-gray-650);
  --ax-dropzone-bg-error: var(--ax-colors-red-400-10);
  --ax-dropzone-stroke-default: var(--ax-colors-gray-650);
  --ax-dropzone-stroke-hover: var(--ax-colors-gray-600);
  --ax-dropzone-stroke-dragging: var(--ax-colors-gray-200);
  --ax-dropzone-stroke-error: var(--ax-colors-red-400);
  --ax-avatar-stroke-default: var(--ax-colors-gray-300);
  --ax-avatar-fill-default: var(--ax-colors-gray-450);
  --ax-link-primary-default: var(--ax-colors-gray-600);
  --ax-link-primary-hover: var(--ax-colors-gray-500);
  --ax-link-primary-active: var(--ax-colors-acc1-400);
  --ax-link-primary-disabled: var(--ax-colors-gray-650);
  --ax-label-stroke-primary-default: var(--ax-colors-gray-600);
  --ax-label-stroke-primary-hover: var(--ax-colors-gray-500);
  --ax-label-stroke-primary-active: var(--ax-colors-acc1-400);
  --ax-label-stroke-primary-disabled: var(--ax-colors-gray-650);
  --ax-edge-primary-default: var(--ax-colors-gray-600);
  --ax-edge-primary-hover: var(--ax-colors-gray-500);
  --ax-edge-primary-active: var(--ax-colors-acc1-400);
  --ax-edge-primary-disabled: var(--ax-colors-gray-650);
  --ax-widget-swatches-acc1: var(--ax-colors-acc1-400);
  --ax-widget-swatches-acc2: var(--ax-colors-acc2-400);
  --ax-widget-swatches-acc3: var(--ax-colors-acc3-400);
  --ax-widget-swatches-acc4: var(--ax-colors-acc4-400);
  --ax-widget-swatches-acc5: var(--ax-colors-acc5-400);
  --ax-widget-swatches-acc6: var(--ax-colors-gray-400);
  --ax-datepicker-bg-primary: var(--ax-colors-acc1-600);
  --ax-datepicker-bg-secondary: var(--ax-colors-gray-800);
  --ax-focus-ring-element: var(--ax-txt-primary-default);
}


/**
 * Do not edit directly, this file was auto-generated.
 */

html[data-theme='light'] {
  --ax-button-primary-bg-default: var(--ax-colors-acc1-500);
  --ax-button-primary-bg-hover: var(--ax-colors-acc1-600);
  --ax-button-primary-bg-active: var(--ax-colors-acc1-700);
  --ax-button-primary-bg-focus: var(--ax-colors-acc1-500);
  --ax-button-primary-bg-loading: var(--ax-colors-acc1-500);
  --ax-button-primary-bg-disabled: var(--ax-colors-gray-400);
  --ax-button-gray-bg-default: var(--ax-colors-gray-500);
  --ax-button-gray-bg-hover: var(--ax-colors-gray-600);
  --ax-button-gray-bg-active: var(--ax-colors-gray-650);
  --ax-button-gray-bg-focus: var(--ax-colors-gray-500);
  --ax-button-gray-bg-loading: var(--ax-colors-gray-500);
  --ax-button-gray-bg-disabled: var(--ax-colors-gray-400);
  --ax-button-red-bg-default: var(--ax-colors-red-400);
  --ax-button-red-bg-hover: var(--ax-colors-red-500);
  --ax-button-red-bg-active: var(--ax-colors-red-600);
  --ax-button-red-bg-focus: var(--ax-colors-red-400);
  --ax-button-red-bg-loading: var(--ax-colors-red-400);
  --ax-button-red-bg-disabled: var(--ax-colors-gray-400);
  --ax-button-green-bg-default: var(--ax-colors-green-300);
  --ax-button-green-bg-hover: var(--ax-colors-green-400);
  --ax-button-green-bg-active: var(--ax-colors-green-300);
  --ax-button-green-bg-focus: var(--ax-colors-green-300);
  --ax-button-green-bg-loading: var(--ax-colors-green-300);
  --ax-button-green-bg-disabled: var(--ax-colors-gray-400);
  --ax-button-orange-bg-default: var(--ax-colors-orange-300);
  --ax-button-orange-bg-hover: var(--ax-colors-orange-400);
  --ax-button-orange-bg-active: var(--ax-colors-orange-300);
  --ax-button-orange-bg-focus: var(--ax-colors-orange-300);
  --ax-button-orange-bg-loading: var(--ax-colors-orange-300);
  --ax-ui-bg-primary-default: var(--ax-colors-gray-100);
  --ax-ui-stroke-primary-default: var(--ax-colors-gray-300);
  --ax-node-bg-primary-default: var(--ax-colors-gray-100);
  --ax-node-stroke-primary-default: var(--ax-colors-gray-400);
  --ax-node-stroke-primary-hover: var(--ax-colors-acc1-500);
  --ax-txt-primary-default: var(--ax-colors-gray-800);
  --ax-ui-bg-secondary-default: var(--ax-colors-gray-200);
  --ax-txt-secondary-default: var(--ax-colors-gray-600);
  --ax-txt-tertiary-default: var(--ax-colors-gray-500);
  --ax-ui-bg-tertiary-default: var(--ax-colors-gray-300);
  --ax-node-bg-secondary-default: var(--ax-colors-gray-200);
  --ax-input-stroke-primary-default: var(--ax-colors-gray-400);
  --ax-input-stroke-primary-focus: var(--ax-colors-acc1-500);
  --ax-input-stroke-primary-error: var(--ax-colors-red-400);
  --ax-input-stroke-primary-success: var(--ax-colors-green-400);
  --ax-txt-quaternary-default: var(--ax-colors-gray-450);
  --ax-txt-error-default: var(--ax-colors-red-400);
  --ax-txt-success-default: var(--ax-colors-green-400);
  --ax-input-bg-primary-success: var(--ax-colors-green-400-10);
  --ax-input-bg-primary-error: var(--ax-colors-red-400-10);
  --ax-dropdown-bg-primary-default: var(--ax-colors-gray-100);
  --ax-dropdown-bg-secondary-active: var(--ax-colors-acc1-600);
  --ax-dropdown-bg-destructive-hover: var(--ax-colors-red-400-20);
  --ax-dropdown-bg-secondary-default: var(--ax-colors-gray-300);
  --ax-ui-bg-tertiary-selected: var(--ax-colors-acc1-600);
  --ax-nav-button-bg-primary-hover: var(--ax-colors-gray-900-5);
  --ax-nav-button-icon-primary-default: var(--ax-colors-gray-600);
  --ax-nav-button-icon-primary-active: var(--ax-colors-gray-100);
  --ax-nav-button-icon-primary-disabled: var(--ax-colors-gray-450);
  --ax-ui-stroke-primary-focus: var(--ax-colors-gray-500);
  --ax-txt-primary-white: var(--ax-colors-gray-100);
  --ax-ui-separator-primary-default: var(--ax-colors-gray-300);
  --ax-ui-stroke-secondary-default: var(--ax-colors-gray-400);
  --ax-txt-primary-disabled: var(--ax-colors-gray-100-75);
  --ax-pt-bg-primary-default: var(--ax-colors-gray-700);
  --ax-pt-stroke-primary-default: var(--ax-colors-gray-600);
  --ax-txt-secondary-inverse: var(--ax-colors-gray-300);
  --ax-button-ghost-destructive-bg-default: var(--ax-colors-red-400-10);
  --ax-button-ghost-destructive-bg-hover: var(--ax-colors-red-400-20);
  --ax-button-ghost-destructive-bg-active: var(--ax-colors-red-400-30);
  --ax-button-ghost-destructive-bg-focus: var(--ax-colors-red-400-10);
  --ax-button-ghost-destructive-bg-loading: var(--ax-colors-red-400-10);
  --ax-button-ghost-destructive-bg-disabled: var(--ax-colors-red-400-10);
  --ax-button-ghost-destructive-stroke-default: var(--ax-colors-red-400);
  --ax-txt-destuctive-default: var(--ax-colors-red-400);
  --ax-txt-destructive-disabled: var(--ax-colors-red-400-50);
  --ax-dropdown-bg-destructive-default: var(--ax-colors-red-400-10);
  --ax-snackbar-bg-default: var(--ax-colors-gray-900-5);
  --ax-snackbar-bg-information: var(--ax-colors-acc1-500-10);
  --ax-snackbar-bg-warning: var(--ax-colors-orange-400-10);
  --ax-snackbar-bg-success: var(--ax-colors-green-400-10);
  --ax-snackbar-bg-error: var(--ax-colors-red-400-10);
  --ax-txt-info-default: var(--ax-colors-acc1-700);
  --ax-txt-warning-default: var(--ax-colors-orange-400);
  --ax-node-icon-primary-default: var(--ax-colors-acc1-500);
  --ax-node-icon-primary-disabled: var(--ax-colors-gray-900-30);
  --ax-node-txt-disabled: var(--ax-colors-gray-900-30);
  --ax-node-bg-primary-disabled: var(--ax-colors-gray-200);
  --ax-tooltip-bg-default: var(--ax-colors-gray-800);
  --ax-tooltip-bg-blue: var(--ax-colors-acc1-800);
  --ax-nav-button-icon-primary-hover: var(--ax-colors-gray-800);
  --ax-node-bg-primary-hover: var(--ax-colors-acc1-50);
  --ax-ui-canvas-dots-default: var(--ax-colors-gray-500);
  --ax-txt-tooltip-bw: var(--ax-colors-gray-100);
  --ax-txt-tooltip-blue: var(--ax-colors-gray-100);
  --ax-node-port-fill-default: var(--ax-colors-gray-100);
  --ax-node-port-fill-active: var(--ax-colors-acc1-500);
  --ax-node-port-stroke-default: var(--ax-colors-gray-500);
  --ax-node-port-stroke-active: var(--ax-colors-gray-100);
  --ax-node-notify-bg-default: var(--ax-colors-orange-400);
  --ax-node-notify-ico-default: var(--ax-colors-orange-100);
  --ax-scrollbar-bg-default: var(--ax-colors-gray-400);
  --ax-chips-neutral-txt: var(--ax-colors-gray-800);
  --ax-chips-neutral-bg: var(--ax-colors-gray-300);
  --ax-chips-neutral-icon: var(--ax-colors-acc1-500);
  --ax-chips-neutral-x: var(--ax-colors-gray-500);
  --ax-shadow: var(--ax-colors-gray-900-20);
  --ax-focus-ring-node-active: var(--ax-colors-acc1-500-40);
  --ax-chips-acc1-bg: var(--ax-colors-acc1-500-10);
  --ax-chips-acc1-txt: var(--ax-colors-acc1-600);
  --ax-chips-acc1-icon: var(--ax-colors-acc1-600);
  --ax-chips-acc1-x: var(--ax-colors-acc1-600);
  --ax-chips-acc1-stroke: var(--ax-colors-acc1-600);
  --ax-chips-acc2-bg: var(--ax-colors-acc2-500-10);
  --ax-chips-acc2-stroke: var(--ax-colors-acc2-600);
  --ax-chips-acc2-txt: var(--ax-colors-acc2-600);
  --ax-chips-acc2-icon: var(--ax-colors-acc2-600);
  --ax-chips-acc2-x: var(--ax-colors-acc2-600);
  --ax-chips-acc3-bg: var(--ax-colors-acc3-500-10);
  --ax-chips-acc3-stroke: var(--ax-colors-acc3-700);
  --ax-chips-acc3-txt: var(--ax-colors-acc3-700);
  --ax-chips-acc3-icon: var(--ax-colors-acc3-700);
  --ax-chips-acc3-x: var(--ax-colors-acc3-700);
  --ax-chips-acc4-bg: var(--ax-colors-acc4-500-10);
  --ax-chips-acc4-stroke: var(--ax-colors-acc4-600);
  --ax-chips-acc4-txt: var(--ax-colors-acc4-600);
  --ax-chips-acc4-icon: var(--ax-colors-acc4-600);
  --ax-chips-acc4-x: var(--ax-colors-acc4-600);
  --ax-chips-acc5-bg: var(--ax-colors-acc5-500-10);
  --ax-chips-acc5-stroke: var(--ax-colors-acc5-700);
  --ax-chips-acc5-txt: var(--ax-colors-acc5-700);
  --ax-chips-acc5-icon: var(--ax-colors-acc5-700);
  --ax-chips-acc5-x: var(--ax-colors-acc5-700);
  --ax-focus-ring-node-warning: var(--ax-colors-acc5-500-40);
  --ax-focus-ring-node-error: var(--ax-colors-acc2-500-40);
  --ax-txt-primary-inverse: var(--ax-colors-gray-100);
  --ax-node-bg-tertiary-default: var(--ax-colors-gray-500);
  --ax-node-bg-tertiary-hover: var(--ax-colors-gray-650);
  --ax-nav-button-icon-primary-pressed: var(--ax-colors-acc1-600);
  --ax-ui-stroke-primary-highlight: var(--ax-colors-acc1-500);
  --ax-tab-stroke-line: var(--ax-colors-gray-400);
  --ax-tab-stroke-default: var(--ax-colors-gray-500);
  --ax-tab-stroke-hover: var(--ax-colors-gray-800);
  --ax-tab-stroke-active: var(--ax-colors-acc1-500);
  --ax-dropzone-bg-default: var(--ax-colors-gray-200);
  --ax-dropzone-bg-hover: var(--ax-colors-gray-300);
  --ax-dropzone-bg-dragging: var(--ax-colors-gray-300);
  --ax-dropzone-bg-error: var(--ax-colors-red-400-10);
  --ax-dropzone-stroke-default: var(--ax-colors-gray-400);
  --ax-dropzone-stroke-hover: var(--ax-colors-gray-500);
  --ax-dropzone-stroke-dragging: var(--ax-colors-gray-800);
  --ax-dropzone-stroke-error: var(--ax-colors-red-400);
  --ax-avatar-stroke-default: var(--ax-colors-gray-400);
  --ax-avatar-fill-default: var(--ax-colors-gray-650);
  --ax-link-primary-default: var(--ax-colors-gray-500);
  --ax-link-primary-hover: var(--ax-colors-gray-700);
  --ax-link-primary-active: var(--ax-colors-acc1-500);
  --ax-link-primary-disabled: var(--ax-colors-gray-450);
  --ax-label-stroke-primary-default: var(--ax-colors-gray-500);
  --ax-label-stroke-primary-hover: var(--ax-colors-gray-700);
  --ax-label-stroke-primary-active: var(--ax-colors-acc1-500);
  --ax-label-stroke-primary-disabled: var(--ax-colors-gray-450);
  --ax-edge-primary-default: var(--ax-colors-gray-500);
  --ax-edge-primary-hover: var(--ax-colors-gray-700);
  --ax-edge-primary-active: var(--ax-colors-acc1-500);
  --ax-edge-primary-disabled: var(--ax-colors-gray-450);
  --ax-widget-swatches-acc1: var(--ax-colors-acc1-500);
  --ax-widget-swatches-acc2: var(--ax-colors-acc2-500);
  --ax-widget-swatches-acc3: var(--ax-colors-acc3-500);
  --ax-widget-swatches-acc4: var(--ax-colors-acc4-500);
  --ax-widget-swatches-acc5: var(--ax-colors-acc5-500);
  --ax-widget-swatches-acc6: var(--ax-colors-gray-500);
  --ax-datepicker-bg-primary: var(--ax-colors-acc1-600);
  --ax-datepicker-bg-secondary: var(--ax-colors-gray-300);
  --ax-focus-ring-element: var(--ax-txt-primary-default);
}