@import './variants.css';
@import './colors-semantic.css';

/*
 * default light-theme component colors
 */
@theme {
  /* Icon */
  --color-icon-primary: var(--color-text-primary);
  --color-icon-secondary: var(--color-text-secondary);
  --color-icon-highlight: var(--color-highlight);

  /* Button Outline */
  --color-button-outline-primary-outline: var(--color-primary);
  --color-button-outline-primary-icon: var(--color-primary);
  --color-button-outline-primary-text: var(--color-primary);

  /* Button Solid */
  --color-button-solid-primary-background: var(--color-primary);
  --color-button-solid-primary-text: var(--color-on-primary);
  --color-button-solid-primary-icon: var(--color-on-primary);
  --color-button-solid-secondary-background: var(--color-purple-50);
  --color-button-solid-secondary-text: var(--color-primary);
  --color-button-solid-secondary-icon: var(--color-primary);
  --color-button-solid-tertiary-background: var(--color-gray-50);
  --color-button-solid-tertiary-icon: var(--color-gray-500);
  --color-button-solid-tertiary-text: var(--color-gray-500);
  --color-button-solid-neutral-background: var(--color-gray-150);
  --color-button-solid-neutral-icon: var(--color-text-primary);
  --color-button-solid-neutral-text: var(--color-text-primary);
  --color-button-solid-positive-background: var(--color-positive);
  --color-button-solid-positive-icon: var(--color-on-positive);
  --color-button-solid-positive-text: var(--color-on-positive);
  --color-button-solid-warning-background: var(--color-warning);
  --color-button-solid-warning-icon: var(--color-on-warning);
  --color-button-solid-warning-text: var(--color-on-warning);
  --color-button-solid-negative-background: var(--color-negative);
  --color-button-solid-negative-icon: var(--color-on-negative);
  --color-button-solid-negative-text: var(--color-on-negative);

  /* Button Text */
  --color-button-text-hover-background: #77777733;
  --color-button-text-neutral-text: var(--color-gray-800);
  --color-button-text-neutral-icon: var(--color-gray-800);
  --color-button-text-negative-text: var(--color-negative);
  --color-button-text-negative-icon: var(--color-negative);
  --color-button-text-primary-text: var(--color-primary);
  --color-button-text-primary-icon: var(--color-primary);

  /* Carousel */
  --color-carousel-dot-active: var(--color-primary);
  --color-carousel-dot-disabled: var(--color-disabled-background);

  /* Input */
  --color-input-background: var(--color-surface);
  --color-input-text: var(--color-on-surface);

  /* Menu */
  --color-menu-background: var(--color-surface-variant);
  --color-menu-text: var(--color-on-surface);
  --color-menu-border: var(--color-border);

  /* Overlay, Dialog, Modal */
  --color-overlay-background: var(--color-surface);
  --color-overlay-text: var(--color-on-surface);
  --color-overlay-shadow: #00000039;

  /* ProgressIndicator */
  --color-progress-indicator-fill: var(--color-primary);
  --color-progress-indicator-background: var(--color-gray-300);

  /* Property */
  --color-property-title-background: var(--color-gray-100);
  --color-property-title-text: var(--color-text-secondary);

  /* Stepper Bar */
  --color-stepperbar-dot-active: var(--color-primary);
  --color-stepperbar-dot-normal: var(--color-purple-100);
  --color-stepperbar-dot-disabled: var(--color-description);

  /* Table */
  --color-table-background: var(--color-surface);
  --color-table-text: var(--color-on-surface);
  --color-table-header-background: color-mix(in srgb, var(--color-blue-500) 15%, var(--color-surface));
  --color-table-row-hover-background: color-mix(in srgb, var(--color-purple-500) 15%, var(--color-surface));

  /* Tag */
  --color-tag-dark-background: var(--color-gray-800);
  --color-tag-dark-text: var(--color-gray-100);
  --color-tag-dark-icon: var(--color-gray-100);
  --color-tag-default-background: #50687C;
  --color-tag-default-text: var(--color-gray-100);
  --color-tag-default-icon: var(--color-gray-100);
  --color-tag-green-background: #E2E9DB;
  --color-tag-green-text: #7A977E;
  --color-tag-green-icon: #7A977E;
  --color-tag-yellow-background: #FEEACB;
  --color-tag-yellow-text: #C79345;
  --color-tag-yellow-icon: #C79345;
  --color-tag-red-background: #FEE0DD;
  --color-tag-red-text: #D67268;
  --color-tag-red-icon: #D67268;
  --color-tag-blue-background: var(--color-blue-50);
  --color-tag-blue-text: var(--color-blue-800);
  --color-tag-blue-icon: var(--color-blue-800);
  --color-tag-pink-background: #CEA3B8;
  --color-tag-pink-text: #CE75A0;
  --color-tag-pink-icon: #CE75A0;

  /* TextImage */
  --color-text-image-primary-background: var(--color-primary);
  --color-text-image-primary-text: var(--color-white);
  --color-text-image-secondary-background: var(--color-blue-500);
  --color-text-image-secondary-text: var(--color-white);
  --color-text-image-dark-background: var(--color-blue-900);
  --color-text-image-dark-text: var(--color-white);

  /* Tooltip */
  --color-tooltip-background: var(--color-menu-background);
  --color-tooltip-text: var(--color-description);

  /* Other */
  --color-border: var(--color-gray-200);
  --color-divider: var(--color-gray-100);
  --color-focus: var(--color-purple-400);
  --color-outline: var(--color-gray-100);
  --color-outline-variant: var(--color-gray-200);
}

/* non light-theme overrides */
@layer base {
  /* dark theme */
  @variant dark {
    /* Button Solid */
    --color-button-solid-neutral-background: var(--color-gray-750);
    --color-button-solid-neutral-icon: var(--color-gray-100);
    --color-button-solid-neutral-text: var(--color-gray-100);

    /* Button Text */
    --color-button-text-hover-background: #3F3F3F33;
    --color-button-text-neutral-text: var(--color-gray-100);
    --color-button-text-neutral-icon: var(--color-gray-100);

    /* Property */
    --color-property-title-background: var(--color-gray-750);

    /* ProgressIndicator */
    --color-progress-indicator-background: var(--color-gray-700);

    /* Overlay, Dialog, Modal */
    --color-overlay-shadow: #00000060;

    /* Tag */
    --color-tag-dark-background: var(--color-gray-900);

    /* Other */
    --color-border: var(--color-gray-600);
    --color-divider: var(--color-gray-700);
    --color-focus: var(--color-purple-500);
    --color-outline: var(--color-gray-700);
    --color-outline-variant: var(--color-gray-600);
  }
}