@use "sass:color";

////
/// @group colors
////

/// Primary theme color. This is the main admin theme color, showing itself
/// on the main header, buttons, and other elements that command attention.
/// If you want to change the main theme colors, this is the value you want.
$am-theme-primary: #009688 !default;

/// A darker primary theme color for contrast when overlaying important items
/// containers that are already treated with primary color.
$am-theme-primary-700: #0D3C55 !default;

/// Used for primary action button and components like switches or sliders.
$am-theme-accent: #cddc39 !default;

/// The color treatment of error messages.
$am-theme-error: #f44336 !default;

/// A lighter treatment for errors to draw contrast to the main error color.
$am-theme-error-400: #FF695E !default;

/// The background color of the document.
$am-theme-backdrop: #eeeeee !default;

/// The background color of Material Design "paper" elements such as cards.
/// And other elements that overlap content.
$am-theme-paper: white !default;

/// The color of tooling lines used to aid the eye when breaking down content.
$am-theme-divider: #efefef !default;

/// The text color for hints. Displays itself in helper text under inputs and
/// other guiding copy.
$am-theme-hint-text: rgba(black, 0.26) !default;

/// A lighter text color for less important content.
$am-theme-secondary-text: rgba(black, 0.54) !default;

/// A lighter text color for less important content on dark backgrounds.
$am-theme-secondary-text-reverse: rgba(white, 0.54) !default;

/// An even lighter text treatment for content less important than
/// secondary text.
$am-theme-tertiary-text: rgba(black, 0.4) !default;

/// The default color of icons.
$am-theme-icon: $am-theme-secondary-text !default;

/// The default color for all text.
$am-theme-text: rgba(black, 0.70) !default;

/// The default color for all text on dark backgrounds.
$am-theme-text-reverse: white !default;

/// A color for focus states.
/// @deprecated
$am-state-focus: rgba(#999, 0.2) !default;

/// A color for active states.
/// @deprecated
$am-state-active: rgba(#999, 0.4) !default;

/// A color for disabled states.
/// @deprecated
$am-state-disabled: rgba(#999, 0.1) !default;

/// An old variable for primary colors maintained for legacy support on other projects.
/// @deprecated
$theme-primary: $am-theme-primary !default;

/// An old variable for divider colors maintained for legacy support on other projects.
/// @deprecated
$theme-divider: $am-theme-divider !default;

/// An old variable for accent colors maintained for legacy support on other projects.
/// @deprecated
$theme-accent: $am-theme-accent !default;

/// An old variable for error colors maintained for legacy support on other projects.
/// @deprecated
$theme-error: $am-theme-error !default;

$am-colors: (
  accent               : $am-theme-accent,
  accent-active        : color.adjust($am-theme-accent, $lightness: 2%, $space: hsl),
  accent-hover         : color.adjust($am-theme-accent, $lightness: 5%, $space: hsl),
  backdrop             : $am-theme-backdrop,
  black                : black,
  divider              : $am-theme-divider,
  error                : $am-theme-error,
  error-400            : $am-theme-error-400,
  hint                 : $am-theme-hint-text,
  paper                : $am-theme-paper,
  primary              : $am-theme-primary,
  primary-700          : $am-theme-primary-700,
  secondary-text       : $am-theme-secondary-text,
  secondary-text-light : $am-theme-secondary-text-reverse,
  text                 : $am-theme-text,
  text-light           : $am-theme-text-reverse,
  white                : white,
  tertiary-text        : $am-theme-tertiary-text,
  icon                 : $am-theme-icon
);
