_variables.scss

////
/// @group states
////

@import '~@react-md/theme/dist/color-palette';
@import '~@react-md/theme/dist/color-a11y';
@import '~@react-md/theme/dist/functions';
@import '~@react-md/theme/dist/variables';

/// Boolean if the pressed and keyboard focus interaction states should use the
/// ripple effect. If this is set to false, a different background color will be
/// applied for each interaction state instead.
///
/// Note: You will still need to update the `InteractionStatesContext` to
/// disable the ripple effects in javascript.
///
/// @type Boolean
$rmd-states-use-ripple: true !default;

/// Boolean if the pressed states fallback should also be included. You'd
/// normally want to disable this if only using the ripple effects, but there
/// isn't too much code to it so you'd only save a few bytes by disabling it.
/// @type Boolean
$rmd-states-use-pressed-states-fallback: true !default;

/// Boolean if the focus state should still us a box-shadow outline for keyboard
/// users.  This is generally recommended for accessibility since the default
/// `outline-style` is removed, and just a `background-color` change normally
/// isn't enough to help users determine the current focus of the page at a
/// glance.
///
/// @type Boolean
$rmd-states-use-focus-shadow: true !default;

/// Boolean if the default focus state should change the background color to
/// the focus color. This will apply to all components and styles within
/// `react-md` and can be used as a feature toggle. If this is set to `false`,
/// either the `$rmd-states-use-focus-shadow` should be enabled or another
/// custom focus state should be implemented.
///
/// @type Boolean
$rmd-states-use-focus-background: true !default;

/// The base background color to use for the different interaction states for a
/// light themed application. This is the color that gets different opacities
/// applied to it.
///
/// @require $rmd-black-base
/// @type Color
$rmd-states-light-theme-background-color: $rmd-black-base !default;

/// The base background color to use for the different interaction states for a
/// dark themed application. This is the color that gets different opacities
/// applied to it. This is currently the same color as the light themed version,
/// but it's available for reconfiguration if it's desired.
///
/// @require $rmd-black-base
/// @type Color
$rmd-states-dark-theme-background-color: $rmd-black-base !default;

/// The hover color to use for light themed backgrounds.
/// @type Color
$rmd-states-light-theme-hover-color: rgba(
  $rmd-states-light-theme-background-color,
  0.08
) !default;

/// The keyboard focus color to use for light themed backgrounds.
/// @type Color
$rmd-states-light-theme-focus-color: rgba(
  $rmd-states-light-theme-background-color,
  0.24
) !default;

/// The pressed color to use for light themed backgrounds.
/// @type Color
$rmd-states-light-theme-pressed-color: rgba(
  $rmd-states-light-theme-background-color,
  0.32
) !default;

/// The selected color to use for light themed backgrounds.
/// @type Color
$rmd-states-light-theme-selected-color: rgba(
  $rmd-states-light-theme-background-color,
  0.16
) !default;

/// The hover color to use for dark themed backgrounds.
/// @type Color
$rmd-states-dark-theme-hover-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.04
) !default;

/// The keyboard focus color to use for dark themed backgrounds.
/// @type Color
$rmd-states-dark-theme-focus-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.12
) !default;

/// The pressed color to use for dark themed backgrounds.
/// @type Color
$rmd-states-dark-theme-pressed-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.16
) !default;

/// The selected color to use for dark themed backgrounds.
/// @type Color
$rmd-states-dark-theme-selected-color: rgba(
  $rmd-states-dark-theme-background-color,
  0.12
) !default;

/// The base background color to use for the ripple effect in a light themed
/// application.
/// @type Color
$rmd-states-light-theme-ripple-background-color: rgba(
  $rmd-black-base,
  0.08
) !default;

/// The base background color to use for the ripple effect in a dark themed
/// application.
/// @type Color
$rmd-states-dark-theme-ripple-background-color: rgba(
  $rmd-black-base,
  0.08
) !default;

/// The background color to use for the different states. The default behavior
/// is to use a base color and apply different opacities depending on the
/// interaction with the element.
///
/// @require $rmd-theme-light
/// @type Color
$rmd-states-background-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-background-color,
  $rmd-states-dark-theme-background-color
) !default;

/// The default hover color to use. This will be determined based on the current
/// theme type of light or dark.
///
/// @require $rmd-theme-light
/// @type Color
$rmd-states-hover-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-hover-color,
  $rmd-states-dark-theme-hover-color
) !default;

/// The default focus color to use. This will be determined based on the current
/// theme type of light or dark.
///
/// @require $rmd-theme-light
/// @type Color
$rmd-states-focus-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-focus-color,
  $rmd-states-dark-theme-focus-color
) !default;

/// The default pressed color to use. This will be determined based on the
/// current theme type of light or dark.
///
/// @require $rmd-theme-light
/// @type Color
$rmd-states-pressed-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-pressed-color,
  $rmd-states-dark-theme-pressed-color
) !default;

/// The default selected color to use. This will be determined based on the
/// current theme type of light or dark.
///
/// @require $rmd-theme-light
/// @type Color
$rmd-states-selected-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-selected-color,
  $rmd-states-dark-theme-selected-color
) !default;

/// The keyboard focus shadow width to use when the
/// `$rmd-states-use-focus-shadow` variable is enabled.
/// @type Number
$rmd-states-focus-shadow-width: 0.125rem !default;

/// The keyboard focus shadow color to use when the
/// `$rmd-states-use-focus-shadow` variable is enabled.
///
/// @require $rmd-blue-500
/// @type Color
$rmd-states-focus-shadow-color: $rmd-blue-500 !default;

/// The box-shadow to use when the user keyboard-focuses an element and the
/// `$rmd-states-use-focus-shadow` variable is enabled.
///
/// @type String
$rmd-states-focus-shadow: inset 0 0 0 $rmd-states-focus-shadow-width
  $rmd-states-focus-shadow-color !default;

/// The base background color for the ripple effect.
///
/// @require $rmd-theme-light
/// @type Color
$rmd-states-ripple-background-color: if(
  $rmd-theme-light,
  $rmd-states-light-theme-ripple-background-color,
  $rmd-states-dark-theme-ripple-background-color
) !default;

/// The transition duration for the ripple transformation animation. This is the
/// expanding circle animation that overlaps a bit with the fade out animation.
/// @type Number
$rmd-states-ripple-transform-duration: 0.45s !default;

/// The transition duration for the ripple opacity animation. This will be
/// triggered when the ripple starts its exit animation.
/// @type Number
$rmd-states-ripple-opacity-duration: 0.3s !default;

/// The class name to use when using the pressed interaction fallback
/// @type String
$rmd-states-pressed-class-name: '.rmd-states--pressed' !default;

/// A Map of all the "themeable" parts of the states package. Every key in this
/// map will be used to create a css variable to dynamically update the values
/// of the icon as needed.
/// @type Map
$rmd-states-theme-values: (
  background-color: transparent,
  hover-color: $rmd-states-hover-color,
  focus-color: $rmd-states-focus-color,
  focus-shadow: $rmd-states-focus-shadow,
  pressed-color: $rmd-states-pressed-color,
  selected-color: $rmd-states-selected-color,
  ripple-background-color: $rmd-states-ripple-background-color,
  light-hover-color: $rmd-states-light-theme-hover-color,
  light-focus-color: $rmd-states-light-theme-focus-color,
  light-pressed-color: $rmd-states-light-theme-pressed-color,
  light-selected-color: $rmd-states-light-theme-selected-color,
  light-ripple-background-color: $rmd-states-light-theme-ripple-background-color,
  dark-hover-color: $rmd-states-dark-theme-hover-color,
  dark-focus-color: $rmd-states-dark-theme-focus-color,
  dark-pressed-color: $rmd-states-dark-theme-pressed-color,
  dark-selected-color: $rmd-states-dark-theme-selected-color,
  dark-ripple-background-color: $rmd-states-dark-theme-ripple-background-color,
) !default;