@use 'sass:map';

$dark-primary-text: rgba(black, 0.87);
$dark-secondary-text: rgba(black, 0.54);
$dark-disabled-text: rgba(black, 0.38);
$dark-dividers: rgba(black, 0.12);
$dark-focused: rgba(black, 0.12);
$light-primary-text: white;
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$light-focused: rgba(white, 0.12);

$blue-palette: (
  50: #e3f2fd,
  100: #bbdefb,
  200: #90caf9,
  300: #64b5f6,
  400: #42a5f5,
  500: #2196f3,
  600: #1e88e5,
  700: #1976d2,
  800: #1565c0,
  900: #0d47a1,
  A100: #82b1ff,
  A200: #448aff,
  A400: #2979ff,
  A700: #2962ff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$grey-palette: (
  50: #fafafa,
  100: #f5f5f5,
  200: #eeeeee,
  300: #e0e0e0,
  400: #bdbdbd,
  500: #9e9e9e,
  600: #757575,
  700: #616161,
  800: #424242,
  900: #212121,
  A100: #ffffff,
  A200: #eeeeee,
  A400: #bdbdbd,
  A700: #616161,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

$light-theme-palette: (
  background: (
    ngrid-space-fill-color: map.get($grey-palette, 50),
    ngrid-header-row-color: white,
    ngrid-row-color: white,
    ngrid-footer-row-color: white,
  ),
  foreground: (
    ngrid-border-color: $dark-dividers,
    ngrid-header-cell-color: $dark-secondary-text,
    ngrid-cell-color: rgba(black, 0.87),
    ngrid-footer-cell-color: rgba(black, 0.87),
    ngrid-cell-focus-color: rgba(black, 0.87),
  ),
);

$dark-theme-row-color: map.get($grey-palette, 800);
$dark-theme-palette: (
  background: (
    ngrid-space-fill-color: #303030,
    ngrid-header-row-color: $dark-theme-row-color,
    ngrid-row-color: $dark-theme-row-color,
    ngrid-footer-row-color: $dark-theme-row-color,
  ),
  foreground: (
    ngrid-border-color: $light-dividers,
    ngrid-header-cell-color: $light-secondary-text,
    ngrid-cell-color: white,
    ngrid-footer-cell-color: white,
    ngrid-cell-focus-color: white,
  ),
);

$spacing-theme-defaults: (
  xs: (
    header-row-height: 28px,
    row-height: 28px,
    footer-row-height: 28px,
    row-spacing: 12px,
    cell-spacing: 6px,
  ),
  sm: (
    header-row-height: 32px,
    row-height: 32px,
    footer-row-height: 32px,
    row-spacing: 12px,
    cell-spacing: 6px,
  ),
  normal: (
    header-row-height: 56px,
    row-height: 48px,
    footer-row-height: 48px,
    row-spacing: 24px,
    cell-spacing: 12px,
  )
);