@helpwave/hightide/dist/style/uncompiled/theme/colors/component.css

helpwave's component and theming library

@import "./semantic.css";

/*
 * default light-theme component colors
 */
@theme {
  /* Carousel */
  --color-carousel-dot-active: var(--color-primary);
  --color-carousel-dot-disabled: var(--color-disabled);

  /* Input */
  --color-input-background: var(--color-surface-variant);
  --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);

  /* Scrollbar */
  --color-scrollbar-track: #00000033;
  --color-scrollbar-thumb: var(--color-gray-600);

  /* 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: var(--color-surface-variant);
  --color-table-row-hover-background: var(--color-surface-hover);

  /* 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-primary);
  --color-outline: var(--color-gray-100);
  --color-outline-variant: var(--color-gray-200);
}

/* non light-theme overrides */
@layer base {
  /* dark theme */
  @variant dark {
    /* 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;

    /* Scrollbar */
    --color-scrollbar-track: #ffffff33;
    --color-scrollbar-thumb: var(--color-gray-300);

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