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

helpwave's component and theming library

@import './basic.css';

/*
 * default light-theme sematic colors
 */
@theme {
  /* Background */
  --color-background: var(--color-gray-75);
  --color-on-background: var(--color-text-primary);

  /* States */
  --color-warning: var(--color-orange-500);
  --color-on-warning:  var(--color-white);
  --color-warning-hover: var(--color-orange-600);

  --color-positive: var(--color-green-500);
  --color-on-positive:  var(--color-white);
  --color-positive-hover: var(--color-green-600);

  --color-negative: var(--color-red-500);
  --color-on-negative:  var(--color-white);
  --color-negative-hover: var(--color-red-600);

  --color-disabled: var(--color-gray-300);
  --color-on-disabled: var(--color-gray-500);

  /* Surface */
  --color-surface:  var(--color-gray-50);
  --color-on-surface: var(--color-text-primary);
  --color-surface-hover: var(--color-gray-100);
  --color-surface-variant: var(--color-white);
  --color-surface-warning: var(--color-orange-100);

  /* Text */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-300);
  --color-text-highlight: var(--color-highlight);
  --color-placeholder: var(--color-gray-500);
  --color-description: var(--color-gray-600);
  --color-label: var(--color-gray-700);

  /* Other */
  --color-primary: var(--color-purple-500);
  --color-on-primary: var(--color-white);
  --color-primary-hover: var(--color-purple-600);

  --color-secondary: var(--color-blue-500);
  --color-on-secondary:  var(--color-white);
  --color-secondary-hover:  var(--color-blue-600);

  --color-neutral: var(--color-gray-150);
  --color-on-neutral: var(--color-black);
  --color-neutral-hover: var(--color-gray-200);
  --color-neutral-text: var(--color-black);
  --color-neutral-text-hover: var(--color-gray-500);
  --color-neutral-outline: var(--color-black);
  --color-neutral-outline-hover: var(--color-gray-600);
  --color-neutral-tonal-text: var(--color-black);
  --color-neutral-tonal-background: var(--color-gray-300);

  --color-highlight:  var(--color-blue-500);
}

/* non light-theme overrides */
@layer base {
  /* dark theme */
  @variant dark {
    /* Background */
    --color-background: var(--color-gray-850);
    --color-on-background: var(--color-text-primary);

    /* States */
    --color-positive: var(--color-green-700);

    --color-negative: var(--color-red-500);

    --color-disabled: var(--color-gray-500);
    --color-on-disabled: var(--color-gray-300);

    /* Surface */
    --color-surface: var(--color-gray-800);
    --color-surface-hover: var(--color-gray-700);
    --color-surface-variant: var(--color-gray-900);
    --color-surface-warning: var(--color-orange-900);

    /* Text */
    --color-text-primary: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);
    --color-text-tertiary: var(--color-gray-600);
    --color-placeholder: var(--color-gray-500);
    --color-description: var(--color-gray-400);
    --color-label: var(--color-gray-300);

    /* Other */
    --color-primary: var(--color-purple-500);
    --color-primary-hover: var(--color-purple-400);

    --color-neutral: var(--color-gray-750);
    --color-neutral-hover: var(--color-gray-600);
    --color-on-neutral: var(--color-white);
    --color-neutral-text: var(--color-white);
    --color-neutral-outline: var(--color-gray-200);
    --color-neutral-outline-hover: var(--color-gray-400);
    --color-neutral-tonal-text: var(--color-white);
    --color-neutral-tonal-background: var(--color-gray-400);
  }
}