import { css } from "lit";

export const waColorStyles = css`
  html {
    --wa-color-brand-fill-loud: var(--ha-color-fill-primary-loud-resting);
    --wa-color-brand-fill-normal: var(--ha-color-fill-primary-normal-resting);
    --wa-color-brand-fill-quiet: var(--ha-color-fill-primary-quiet-hover);
    --wa-color-brand-border-loud: var(--ha-color-border-loud);
    --wa-color-brand-border-normal: var(--ha-color-primary-50);
    --wa-color-brand-border-quiet: var(--ha-color-border-quiet);
    --wa-color-brand-on-loud: var(--ha-color-on-primary-loud);
    --wa-color-brand-on-normal: var(--ha-color-on-primary-normal);
    --wa-color-brand-on-quiet: var(--ha-color-on-primary-quiet);

    --wa-color-neutral-fill-loud: var(--ha-color-fill-neutral-loud-resting);
    --wa-color-neutral-fill-normal: var(--ha-color-fill-neutral-normal-resting);
    --wa-color-neutral-fill-quiet: var(--ha-color-fill-neutral-quiet-hover);
    --wa-color-neutral-border-loud: var(--ha-color-border-neutral-loud);
    --wa-color-neutral-border-normal: var(--ha-color-border-neutral-normal);
    --wa-color-neutral-border-quiet: var(--ha-color-border-neutral-quiet);
    --wa-color-neutral-on-loud: var(--ha-color-on-neutral-loud);
    --wa-color-neutral-on-normal: var(--ha-color-on-neutral-normal);
    --wa-color-neutral-on-quiet: var(--ha-color-on-neutral-quiet);

    --wa-color-success-fill-loud: var(--ha-color-fill-success-loud-resting);
    --wa-color-success-fill-normal: var(--ha-color-fill-success-normal-resting);
    --wa-color-success-fill-quiet: var(--ha-color-fill-success-quiet-hover);
    --wa-color-success-border-loud: var(--ha-color-border-success-loud);
    --wa-color-success-border-normal: var(--ha-color-border-success-normal);
    --wa-color-success-border-quiet: var(--ha-color-border-success-quiet);
    --wa-color-success-on-loud: var(--ha-color-on-success-loud);
    --wa-color-success-on-normal: var(--ha-color-on-success-normal);
    --wa-color-success-on-quiet: var(--ha-color-on-success-quiet);

    --wa-color-warning-fill-loud: var(--ha-color-fill-warning-loud-resting);
    --wa-color-warning-fill-normal: var(--ha-color-fill-warning-normal-resting);
    --wa-color-warning-fill-quiet: var(--ha-color-fill-warning-quiet-hover);
    --wa-color-warning-border-loud: var(--ha-color-border-warning-loud);
    --wa-color-warning-border-normal: var(--ha-color-border-warning-normal);
    --wa-color-warning-border-quiet: var(--ha-color-border-warning-quiet);
    --wa-color-warning-on-loud: var(--ha-color-on-warning-loud);
    --wa-color-warning-on-normal: var(--ha-color-on-warning-normal);
    --wa-color-warning-on-quiet: var(--ha-color-on-warning-quiet);

    --wa-color-danger-fill-loud: var(--ha-color-fill-danger-loud-resting);
    --wa-color-danger-fill-normal: var(--ha-color-fill-danger-normal-resting);
    --wa-color-danger-fill-quiet: var(--ha-color-fill-danger-quiet-hover);
    --wa-color-danger-border-loud: var(--ha-color-border-danger-loud);
    --wa-color-danger-border-normal: var(--ha-color-border-danger-normal);
    --wa-color-danger-border-quiet: var(--ha-color-border-danger-quiet);
    --wa-color-danger-on-loud: var(--ha-color-on-danger-loud);
    --wa-color-danger-on-normal: var(--ha-color-on-danger-normal);
    --wa-color-danger-on-quiet: var(--ha-color-on-danger-quiet);

    --wa-color-text-quiet: var(--ha-color-text-secondary);

    --wa-color-text-normal: var(--primary-text-color);
    --wa-color-surface-default: var(--card-background-color);
    --wa-color-surface-raised: var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff));
    --wa-panel-border-radius: var(--ha-border-radius-3xl);
    --wa-panel-border-style: solid;
    --wa-panel-border-width: 1px;
    --wa-color-surface-border: var(--ha-color-border-neutral-quiet);

    --wa-focus-ring-color: var(--ha-color-focus);
    --wa-shadow-l: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);

    --wa-form-control-background-color: var(--wa-color-surface-raised);
    --wa-form-control-border-color: var(--ha-color-border-neutral-quiet);
    --wa-form-control-value-color: var(--primary-text-color);
    --wa-form-control-placeholder-color: var(--ha-color-text-secondary);
  }
`;
