@import './colors.untitledui.scss';

/*
  The primary branding color is the same across both themes for
  brand integrity. Lower and higher contrast variants are one color
  step darker and lighter, respectively; the contrast (distinct / dull) 
  paradigm is used, as opposed to "light" and "dark" to convey amount
  of contrast in both dark and light themes.
*/

$primary: $primary-100;
$primaryContrast: $primary-100-contrast;
$primaryContrast_hue: $primary-700;

$primaryDull: $primary-50;
$primaryDullContrast: $primary-50-contrast;
$primaryDullContrast_hue: $primary-600;

$primaryDistinct: $primary-200;
$primaryDistinctContrast: $primary-200-contrast;
$primaryDistinctContrast_hue: $primary-800;

$error: $error-200;
$errorContrast: $error-200-contrast;
$errorContrast_hue: $error-700;

$warning: $warning-200;
$warningContrast: $warning-200-contrast;
$warningContrast_hue: $warning-700;

$success: $success-200;
$successContrast: $success-200-contrast;
$successContrast_hue: $success-700;

/*
Surfaces

In Untitled UI, surfaces are one color-step lighter than their background color. The design system
features layouts with primary backgrounds.

This pattern can be seen on their "Application navigation" Figma page:
https://www.figma.com/file/Xt05q1xny4SbE2HHOEFe2j/KAD-MASTER-Untitled-UI?type=design&node-id=1158-90768&t=Jhbosgca3uJbuLC3-0
*/

/* Document background color (i.e., html or body) */
$background: $gray-25;
$backgroundContrast: #ffffff;
$backgroundContrast_hue: $primary-700;

/* Surfaces on a $background background, i.e., when a card is displayed in the body or any container with backgroundColor: $background; */
$surfaceBackground: $gray-50;
$surfaceBackgroundContrast: $gray-600;
$surfaceBackgroundContrast_hue: $primary-600;

/* Surfaces on a $primary background, i.e., when a card is displayed on a $primary background */
$surfaceOnPrimaryBackground: $primary-300;
$surfaceOnPrimaryBackgroundContrast: $primary-300-contrast;
$surfaceOnPrimaryBackgroundContrast_hue: $primary-700;

/* Surfaces on the lower contrast primary background, i.e., when a card is displayed on a $primary background */
$surfaceOnPrimaryDullBackground: $primary-200;
$surfaceOnPrimaryDullBackgroundContrast: $primary-200-contrast;
$surfaceOnPrimaryDullBackgroundContrast_hue: $primary-600;

/* Surfaces on the higher contrast primary background, i.e., when a card is displayed on a $primary background */
$surfaceOnPrimaryDistinctBackground: $primary-400;
$surfaceOnPrimaryDistinctBackgroundContrast: $primary-400-contrast;
$surfaceOnPrimaryDistinctBackgroundContrast_hue: $primary-800;

/*
  Secondary Colors
  (Inverted from light theme for dark mode)
*/

$grayContrast: $gray-700;
$gray: $gray-100;

$grayBlueContrast: $grayBlue-700;
$grayBlue: $grayBlue-100;

$grayCoolContrast: $grayCool-700;
$grayCool: $grayCool-100;

$grayModernContrast: $grayModern-700;
$grayModern: $grayModern-100;

$grayNeutralContrast: $grayNeutral-700;
$grayNeutral: $grayNeutral-100;

$grayIronContrast: $grayIron-700;
$grayIron: $grayIron-100;

$grayTrueContrast: $grayTrue-700;
$grayTrue: $grayTrue-100;

$grayWarmContrast: $grayWarm-700;
$grayWarm: $grayWarm-100;

$mossContrast: $moss-700;
$moss: $moss-100;

$greenLightContrast: $greenLight-700;
$greenLight: $greenLight-100;

$tealContrast: $teal-700;
$teal: $teal-100;

$cyanContrast: $cyan-700;
$cyan: $cyan-100;

$blueLightContrast: $blueLight-700;
$blueLight: $blueLight-100;

$blueContrast: $blue-700;
$blue: $blue-100;

$blueDarkContrast: $blueDark-700;
$blueDark: $blueDark-100;

$indigoContrast: $indigo-700;
$indigo: $indigo-100;

$violetContrast: $violet-700;
$violet: $violet-100;

$purpleContrast: $purple-700;
$purple: $purple-100;

$fuchsiaContrast: $fuchsia-700;
$fuchsia: $fuchsia-100;

$pinkContrast: $pink-700;
$pink: $pink-100;

$roseContrast: $rose-700;
$rose: $rose-100;

$orangeDarkContrast: $orangeDark-700;
$orangeDark: $orangeDark-100;

$orangeContrast: $orange-700;
$orange: $orange-100;

$yellowContrast: $yellow-700;
$yellow: $yellow-100;

/* Map SCSS colors to JS object serializable names */
$palette-default-dark: (
  primary: $primary,
  primaryContrast: $primaryContrast,
  primaryContrast_hue: $primaryContrast_hue,

  primaryDull: $primaryDull,
  primaryDullContrast: $primaryDullContrast,
  primaryDullContrast_hue: $primaryDullContrast_hue,

  primaryDistinct: $primaryDistinct,
  primaryDistinctContrast: $primaryDistinctContrast,
  primaryDistinctContrast_hue: $primaryDistinctContrast_hue,

  error: $error,
  errorContrast: $errorContrast,
  errorContrast_hue: $errorContrast-hue,

  warning: $warning,
  warningContrast: $warningContrast,
  warningContrast_hue: $warningContrast_hue,

  success: $success,
  successContrast: $successContrast,
  successContrast_hue: $successContrast_hue,

  background: $background,
  backgroundContrast: $backgroundContrast,
  backgroundContrast_hue: $backgroundContrast_hue,

  surfaceBackground: $surfaceBackground,
  surfaceBackgroundContrast: $surfaceBackgroundContrast,
  surfaceBackgroundContrast_hue: $surfaceBackgroundContrast-hue,

  surfaceOnPrimaryBackground: $surfaceOnPrimaryBackground,
  surfaceOnPrimaryBackgroundContrast: $surfaceOnPrimaryBackgroundContrast,
  surfaceOnPrimaryBackgroundContrast_hue:
    $surfaceOnPrimaryBackgroundContrast_hue,

  surfaceOnPrimaryDistinctBackground: $surfaceOnPrimaryDistinctBackground,
  surfaceOnPrimaryDistinctBackgroundContrast:
    $surfaceOnPrimaryDistinctBackgroundContrast,
  surfaceOnPrimaryDistinctBackgroundContrast_hue:
    $surfaceOnPrimaryDistinctBackgroundContrast_hue,

  surfaceOnPrimaryDullBackground: $surfaceOnPrimaryDullBackground,
  surfaceOnPrimaryDullBackgroundContrast:
    $surfaceOnPrimaryDullBackgroundContrast,
  surfaceOnPrimaryDullBackgroundContrast_hue:
    $surfaceOnPrimaryDullBackgroundContrast_hue,

  gray: $gray,
  grayContrast: $grayContrast,

  grayBlue: $grayBlue,
  grayBlueContrast: $grayBlueContrast,

  grayCool: $grayCool,
  grayCoolContrast: $grayCoolContrast,

  grayModern: $grayModern,
  grayModernContrast: $grayModernContrast,

  grayNeutral: $grayNeutral,
  grayNeutralContrast: $grayNeutralContrast,

  grayIron: $grayIron,
  grayIronContrast: $grayIronContrast,

  grayTrue: $grayTrue,
  grayTrueContrast: $grayTrueContrast,

  grayWarm: $grayWarm,
  grayWarmContrast: $grayWarmContrast,

  moss: $moss,
  mossContrast: $mossContrast,

  greenLight: $greenLight,
  greenLightContrast: $greenLightContrast,

  teal: $teal,
  tealContrast: $tealContrast,

  cyan: $cyan,
  cyanContrast: $cyanContrast,

  blueLight: $blueLight,
  blueLightContrast: $blueLightContrast,

  blue: $blue,
  blueContrast: $blueContrast,

  blueDark: $blueDark,
  blueDarkContrast: $blueDarkContrast,

  indigo: $indigo,
  indigoContrast: $indigoContrast,

  violet: $violet,
  violetContrast: $violetContrast,

  purple: $purple,
  purpleContrast: $purpleContrast,

  fuchsia: $fuchsia,
  fuchsiaContrast: $fuchsiaContrast,

  pink: $pink,
  pinkContrast: $pinkContrast,

  rose: $rose,
  roseContrast: $roseContrast,

  orangeDark: $orangeDark,
  orangeDarkContrast: $orangeDarkContrast,

  orange: $orange,
  orangeContrast: $orangeContrast,

  yellow: $yellow,
  yellowContrast: $yellowContrast,
);

/* Export the SCSS map to a JS object */
:export {
  @each $name, $value in $palette-default-dark {
    #{$name}: #{$value};
  }
}