Interaction Sass API

Variables

interaction-mode

$interaction-mode: ripple !default;

Used By

• @mixin interaction-surface

interaction-disable-ripple

$interaction-disable-ripple: not
  list.index(
    (ripple, both),
    utils.validate((ripple, press, both, none), $mode, "interaction mode")
  );

Used By

• @mixin interaction-use-light-surface
• @mixin interaction-use-dark-surface
• @mixin interaction-variables
• @mixin interaction-styles

interaction-disable-surface

$interaction-disable-surface: false !default;

Used By

• @mixin interaction-use-light-surface
• @mixin interaction-use-dark-surface
• @mixin interaction-variables
• @mixin interaction-styles

interaction-disable-outline-offset

$interaction-disable-outline-offset: false !default;

Used By

• @mixin text-field-container-styles

interaction-disable-focus-background

$interaction-disable-focus-background: false !default;

interaction-disable-ripple-inset-var

$interaction-disable-ripple-inset-var: $disable-ripple !default;

Used By

• @function interaction-_is-var-disabled

interaction-disable-ripple-border-radius-var

$interaction-disable-ripple-border-radius-var: $disable-ripple !default;

Used By

• @function interaction-_is-var-disabled

interaction-disable-surface-inset-var

$interaction-disable-surface-inset-var: $disable-surface !default;

Used By

• @function interaction-_is-var-disabled
• @mixin interaction-variables

interaction-disable-surface-border-radius-var

$interaction-disable-surface-border-radius-var: $disable-surface !default;

Used By

• @function interaction-_is-var-disabled

interaction-pressed-class-name

$interaction-pressed-class-name: "rmd-pressed";

Used By

• @mixin interaction-surface

interaction-disable-higher-contrast

$interaction-disable-higher-contrast: false !default;

Used By

• @mixin interaction-surface

interaction-light-surface-base-background-color

$interaction-light-surface-base-background-color: colors.$black !default;

interaction-dark-surface-base-background-color

$interaction-dark-surface-base-background-color: colors.$white !default;

interaction-focus-color

$interaction-focus-color: colors.$blue-500 !default;

Used By

• @mixin dialog-styles
• @mixin interaction-variables

interaction-focus-width

$interaction-focus-width: 0.125rem !default;

Used By

• @mixin interaction-variables

interaction-focus-box-shadow

$interaction-focus-box-shadow: false !default;

Used By

• @mixin interaction-surface

interaction-light-surface-ripple-background-color

$interaction-light-surface-ripple-background-color: rgba(
  $light-surface-base-background-color,
  0.08
) !default;

Used By

• @mixin interaction-use-light-surface

interaction-dark-surface-ripple-background-color

$interaction-dark-surface-ripple-background-color: rgba(
  $dark-surface-base-background-color,
  0.12
) !default;

Used By

• @mixin interaction-use-dark-surface

interaction-ripple-background-color

$interaction-ripple-background-color: theme.get-default-color(
  $light-surface-ripple-background-color,
  $dark-surface-ripple-background-color
) !default;

Used By

• @mixin interaction-variables

interaction-ripple-transform-duration

$interaction-ripple-transform-duration: 0.45s !default;

Used By

• @mixin interaction-styles

interaction-ripple-opacity-duration

$interaction-ripple-opacity-duration: 0.3s !default;

Used By

• @mixin interaction-styles

interaction-light-surface-hover-opacity

$interaction-light-surface-hover-opacity: 0.08 !default;

See Also

• $interaction-light-surface-hover-background-color

interaction-light-surface-focus-opacity

$interaction-light-surface-focus-opacity: 0.24 !default;

See Also

• $interaction-light-surface-focus-background-color

interaction-light-surface-press-opacity

$interaction-light-surface-press-opacity: 0.32 !default;

See Also

• $interaction-light-surface-press-background-color

interaction-light-surface-selected-opacity

$interaction-light-surface-selected-opacity: 0.16 !default;

See Also

• $interaction-light-surface-selected-background-color

interaction-light-surface-hover-background-color

$interaction-light-surface-hover-background-color: rgba(
  $light-surface-base-background-color,
  $light-surface-hover-opacity
) !default;

Used By

• @mixin interaction-use-light-surface

interaction-light-surface-focus-background-color

$interaction-light-surface-focus-background-color: rgba(
  $light-surface-base-background-color,
  $light-surface-focus-opacity
) !default;

Used By

• @mixin interaction-use-light-surface

interaction-light-surface-press-background-color

$interaction-light-surface-press-background-color: rgba(
  $light-surface-base-background-color,
  $light-surface-press-opacity
) !default;

Used By

• @mixin interaction-use-light-surface

interaction-light-surface-selected-background-color

$interaction-light-surface-selected-background-color: rgba(
  $light-surface-base-background-color,
  $light-surface-selected-opacity
) !default;

Used By

• @mixin interaction-use-light-surface

interaction-dark-surface-hover-opacity

$interaction-dark-surface-hover-opacity: 0.1 !default;

See Also

• $interaction-dark-surface-hover-background-color

interaction-dark-surface-focus-opacity

$interaction-dark-surface-focus-opacity: 0.12 !default;

See Also

• $interaction-dark-surface-hover-background-color

interaction-dark-surface-press-opacity

$interaction-dark-surface-press-opacity: 0.24 !default;

See Also

• $interaction-dark-surface-hover-background-color

interaction-dark-surface-selected-opacity

$interaction-dark-surface-selected-opacity: 0.12 !default;

See Also

• $interaction-dark-surface-hover-background-color

interaction-dark-surface-hover-background-color

$interaction-dark-surface-hover-background-color: rgba(
  $dark-surface-base-background-color,
  $dark-surface-hover-opacity
) !default;

Used By

• @mixin interaction-use-dark-surface

interaction-dark-surface-focus-background-color

$interaction-dark-surface-focus-background-color: rgba(
  $dark-surface-base-background-color,
  $dark-surface-focus-opacity
) !default;

Used By

• @mixin interaction-use-dark-surface

interaction-dark-surface-press-background-color

$interaction-dark-surface-press-background-color: rgba(
  $dark-surface-base-background-color,
  $dark-surface-press-opacity
) !default;

Used By

• @mixin interaction-use-dark-surface

interaction-dark-surface-selected-background-color

$interaction-dark-surface-selected-background-color: rgba(
  $dark-surface-base-background-color,
  $dark-surface-selected-opacity
) !default;

Used By

• @mixin interaction-use-dark-surface

interaction-hover-background-color

$interaction-hover-background-color: theme.get-default-color(
  $light-surface-hover-background-color,
  $dark-surface-hover-background-color
) !default;

Used By

• @mixin interaction-variables

interaction-focus-background-color

$interaction-focus-background-color: theme.get-default-color(
  $light-surface-focus-background-color,
  $dark-surface-focus-background-color
) !default;

Used By

• @mixin interaction-variables

interaction-press-background-color

$interaction-press-background-color: theme.get-default-color(
  $light-surface-press-background-color,
  $dark-surface-press-background-color
) !default;

Used By

• @mixin interaction-variables

interaction-selected-background-color

$interaction-selected-background-color: theme.get-default-color(
  $light-surface-selected-background-color,
  $dark-surface-selected-background-color
) !default;

Used By

• @mixin interaction-variables
• @mixin segmented-button-variables

interaction-variables

$interaction-variables: (
  background-color,
  hover-background-color,
  focus-background-color,
  press-background-color,
  selected-background-color,
  focus-color,
  focus-width,
  ripple-inset,
  ripple-border-radius,
  ripple-background-color,
  surface-inset,
  surface-border-radius
);

Mixins

interaction-set-var

@mixin set-var($name, $value) { … }

Requires

• @function _is-var-disabled
• @function get-var-name
• @mixin app-bar-variables

interaction-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

interaction-use-light-surface

@mixin use-light-surface { … }

Examples

Example Usage SCSS

@use "@react-md/core";

.container {
  background-color: #fff;

  @include core.interaction-use-light-surface;
}

Requires

• @mixin app-bar-set-var
• $interaction-disable-surface
• $interaction-light-surface-hover-background-color
• $interaction-light-surface-focus-background-color
• $interaction-light-surface-press-background-color
• $interaction-light-surface-selected-background-color
• $interaction-disable-ripple
• $interaction-light-surface-ripple-background-color

interaction-use-dark-surface

@mixin use-dark-surface { … }

Examples

Example Usage SCSS

@use "@react-md/core";

.container {
  background-color: #000;

  @include core.interaction-use-dark-surface;
}

Requires

• @mixin app-bar-set-var
• $interaction-disable-surface
• $interaction-dark-surface-hover-background-color
• $interaction-dark-surface-focus-background-color
• $interaction-dark-surface-press-background-color
• $interaction-dark-surface-selected-background-color
• $interaction-disable-ripple
• $interaction-dark-surface-ripple-background-color

interaction-outline

@mixin outline($box-shadow: $focus-box-shadow, $color: transparent, $outline-offset: not $disable-outline-offset) { … }

Examples

Example Usage SCSS

@use "@react-md/core";

.link {
  @include core.interaction-outline;
}

See Also

• @mixin interaction-surface

Used By

• @mixin interaction-surface

Requires

• @function app-bar-get-var
• @function negate-var
• $avatar-color

interaction-focus-styles

@mixin focus-styles($box-shadow: $focus-box-shadow, $disable-background: $disable-focus-background) { … }

Examples

Example Usage SCSS

@use "@react-md/core";

.link {
  &:focus-visible {
    @include core.interaction-focus-styles($disable-background: true);
  }
}

See Also

• @mixin interaction-surface

Used By

• @mixin interaction-surface

Requires

• @mixin app-bar-set-var
• @mixin app-bar-use-var
• @function app-bar-get-var

interaction-surface-disabled

@mixin surface-disabled($clickable: true, $hoverable: true) { … }

Used By

• @mixin interaction-surface

Requires

• @mixin app-bar-set-var

interaction-surface

@mixin surface($focus-selector: "&:focus" + if(utils.disable-focus-visible, "", "-visible"), $keyboard-only-focus: utils.$disable-focus-visible, $disabled-selector: "&:disabled", $clickable: true, $hoverable: true, $css-modules: false, $higher-contrast: true, $box-shadow: $focus-box-shadow, $disable-background: $disable-focus-background) { … }

Examples

Example Usage SCSS

@use "@react-md/core";

.container {
  display: flex;

  @include core.interaction-surface;
}

Used By

• @mixin interaction-styles

Requires

• @mixin interaction-outline
• @mixin app-bar-use-var
• @mixin interaction-focus-styles
• @mixin app-bar-set-var
• @mixin interaction-surface-disabled
• @function app-bar-get-var
• $interaction-disable-higher-contrast
• $divider-inset
• $avatar-border-radius
• $linear-duration
• $interaction-focus-box-shadow
• $linear-timing-function
• $interaction-mode
• $interaction-pressed-class-name

interaction-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $interaction-focus-color
• $interaction-focus-width
• $interaction-disable-surface
• $interaction-hover-background-color
• $interaction-focus-background-color
• $interaction-press-background-color
• $interaction-selected-background-color
• $interaction-disable-ripple
• $interaction-ripple-background-color
• $interaction-disable-surface-inset-var

interaction-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-use-var
• @mixin interaction-surface
• $interaction-disable-ripple
• $interaction-ripple-transform-duration
• $deceleration-timing-function
• $interaction-ripple-opacity-duration
• $acceleration-timing-function
• $interaction-disable-surface

Functions

interaction-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function _is-var-disabled
• @function get-var-name
• @mixin app-bar-variables

This should be one of:

• ripple
• press
• both
• none

Convenience feature flag check for ripples

Set to true if the interaction surface styles should not be created. This includes the:

• .rmd-interaction-surface class
• use-light-surface and use-dark-surface mixins
• hover-background-color
• focus-background-color
• press-background-color
• selected-background-color

Set to true if the outline styles should not also apply an outline-offset.

Set to true if the default focus styles should not also change the background color of the element.

Set to true if not using the interaction ripple behavior.

Set to true if not using the interaction ripple behavior.

Set this to true if the interaction surface background inset should not be configurable through custom CSS properties.

Set this to true if the interaction surface border-radius should not be configurable through custom CSS properties.

The class name to apply while an element is pressed and using the useElementInteraction hook.

Setting this value to true will update the styles for all interactable elements so that the different interaction states no longer cover the other content within the element by applying:

> * {
  z-index: 1;
}

This helps improve the legibility of the content since the normal interaction states apply an overlay with some opacity for the different states.

The base interaction background color to apply when an element is on a light surface.

The base interaction background color to apply when an element is on a dark surface.

The default color to use while elements are focused.

The default outline/box-shadow width while elements are focused.

Set to true if focus behavior should use box-shadow instead of outline.

The base interaction background color to apply when an element is on a light surface.

The base interaction background color to apply when an element is on a light surface.

The default background color for interaction ripples.

The ripple animation duration.

The ripple opacity animation duration. This should normally be shorter than the $ripple-transform-duration so the ripple is fully visible before the transition completes.

The opacity to apply while hovering an element on a light surface.

The opacity to apply while focusing an element on a light surface.

The opacity to apply while pressing an element on a light surface.

The opacity to apply while an element is selected on a light surface.

The background color for an element while hovered on a light surface.

The background color for an element while focused on a light surface.

The background color for an element while pressed on a light surface.

The background color for a selected element on a light surface.

The opacity to apply while hovering an element on a dark surface.

The opacity to apply while focusing an element on a dark surface.

The opacity to apply while pressing an element on a dark surface.

The opacity to apply while hovering an element on a dark surface.

The background color for an element while hovered on a dark surface.

The background color for an element while focused on a dark surface.

The background color for an element while pressed on a dark surface.

The background color for a selected element on a dark surface.

The default background color for an element while hovered.

The default background color for an element while focused.

The default background color for an element while pressed.

The default background color for an element while selected.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

This mixin is used to apply interaction state colors that are visible on a light surface color.

This mixin is used to apply interaction state colors that are visible on a dark surface color.

This mixin should only be used when not using the surface mixin.

Set this to true to disable the outline styles when using box-shadow instead.

The outline color to use by default

Set to true if the outline-offset property should also be set to match how box shadow would have been applied.

This mixin should only be used when not using the surface mixin.

Set to true if using box-shadow instead of outline styles for focus states.

Set to true if the background-color should not change while the element is focused.

This mixin should only be used when not using the surface mixin.

Set to false if the cursor: auto styles should not be applied.

Set to false if the element was not hoverable.

Creates a "surface" for an interactable element that:

• applies a focus outline/box-shadow
• applies different background colors based on the focus and hover states
• applies styles based on if the element is clickable
• applies styles if the element is disabled

The selector to use indicating the element has been focused.

The selector to use indicating the element is disabled.

Set to false if the element should not gain the cursor: pointer styles.

Set to false if the element should not apply styles for changing the background color while hovering.

Set to true if this mixin is being used within CSS modules to fix the global name spacing of classes.

Set to false if all child elements should no longer gain a z-index: 1 to appear above the background styles.

Set to true if using focus box shadow behavior instead of outlines

Set to true to disable the focus background color styles.

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value