String
$interaction-mode: ripple !default;
Boolean
$interaction-disable-ripple: not
list.index(
(ripple, both),
utils.validate((ripple, press, both, none), $mode, "interaction mode")
);
Boolean
$interaction-disable-surface: false !default;
Boolean
$interaction-disable-outline-offset: false !default;
Boolean
$interaction-disable-focus-background: false !default;
Boolean
$interaction-disable-ripple-inset-var: $disable-ripple !default;
Boolean
$interaction-disable-ripple-border-radius-var: $disable-ripple !default;
Boolean
$interaction-disable-surface-inset-var: $disable-surface !default;
Boolean
$interaction-disable-surface-border-radius-var: $disable-surface !default;
String
$interaction-pressed-class-name: "rmd-pressed";
Boolean
$interaction-disable-higher-contrast: false !default;
Color
$interaction-light-surface-base-background-color: colors.$black !default;
Color
$interaction-dark-surface-base-background-color: colors.$white !default;
Color
$interaction-focus-color: colors.$blue-500 !default;
Number
$interaction-focus-width: 0.125rem !default;
Boolean
$interaction-focus-box-shadow: false !default;
Color
$interaction-light-surface-ripple-background-color: rgba(
$light-surface-base-background-color,
0.08
) !default;
Color
$interaction-dark-surface-ripple-background-color: rgba(
$dark-surface-base-background-color,
0.12
) !default;
Color
$interaction-ripple-background-color: theme.get-default-color(
$light-surface-ripple-background-color,
$dark-surface-ripple-background-color
) !default;
Number
$interaction-ripple-transform-duration: 0.45s !default;
Number
$interaction-ripple-opacity-duration: 0.3s !default;
Number
$interaction-light-surface-hover-opacity: 0.08 !default;
Number
$interaction-light-surface-focus-opacity: 0.24 !default;
Number
$interaction-light-surface-press-opacity: 0.32 !default;
Number
$interaction-light-surface-selected-opacity: 0.16 !default;
Color
$interaction-light-surface-hover-background-color: rgba(
$light-surface-base-background-color,
$light-surface-hover-opacity
) !default;
Color
$interaction-light-surface-focus-background-color: rgba(
$light-surface-base-background-color,
$light-surface-focus-opacity
) !default;
Color
$interaction-light-surface-press-background-color: rgba(
$light-surface-base-background-color,
$light-surface-press-opacity
) !default;
Color
$interaction-light-surface-selected-background-color: rgba(
$light-surface-base-background-color,
$light-surface-selected-opacity
) !default;
Number
$interaction-dark-surface-hover-opacity: 0.1 !default;
Number
$interaction-dark-surface-focus-opacity: 0.12 !default;
Number
$interaction-dark-surface-press-opacity: 0.24 !default;
Number
$interaction-dark-surface-selected-opacity: 0.12 !default;
Color
$interaction-dark-surface-hover-background-color: rgba(
$dark-surface-base-background-color,
$dark-surface-hover-opacity
) !default;
Color
$interaction-dark-surface-focus-background-color: rgba(
$dark-surface-base-background-color,
$dark-surface-focus-opacity
) !default;
Color
$interaction-dark-surface-press-background-color: rgba(
$dark-surface-base-background-color,
$dark-surface-press-opacity
) !default;
Color
$interaction-dark-surface-selected-background-color: rgba(
$dark-surface-base-background-color,
$dark-surface-selected-opacity
) !default;
Color
$interaction-hover-background-color: theme.get-default-color(
$light-surface-hover-background-color,
$dark-surface-hover-background-color
) !default;
Color
$interaction-focus-background-color: theme.get-default-color(
$light-surface-focus-background-color,
$dark-surface-focus-background-color
) !default;
Color
$interaction-press-background-color: theme.get-default-color(
$light-surface-press-background-color,
$dark-surface-press-background-color
) !default;
Color
$interaction-selected-background-color: theme.get-default-color(
$light-surface-selected-background-color,
$dark-surface-selected-background-color
) !default;
List
$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
);
mixin
@mixin set-var($name, $value) { … }
mixin
@mixin use-var($property, $name: $property, $fallback: null) { … }
mixin
@mixin use-light-surface { … }
@use "@react-md/core";
.container {
background-color: #fff;
@include core.interaction-use-light-surface;
}
mixin
@mixin use-dark-surface { … }
@use "@react-md/core";
.container {
background-color: #000;
@include core.interaction-use-dark-surface;
}
mixin
@mixin outline($box-shadow: $focus-box-shadow, $color: transparent, $outline-offset: not $disable-outline-offset) { … }
Name | Description | Type | Default Value |
---|---|---|---|
$box-shadow | Boolean | $focus-box-shadow | |
$color | Color | transparent | |
$outline-offset | Boolean | not $disable-outline-offset |
@use "@react-md/core";
.link {
@include core.interaction-outline;
}
mixin
@mixin focus-styles($box-shadow: $focus-box-shadow, $disable-background: $disable-focus-background) { … }
Name | Description | Type | Default Value |
---|---|---|---|
$box-shadow | Boolean | $focus-box-shadow | |
$disable-background | Boolean | $disable-focus-background |
@use "@react-md/core";
.link {
&:focus-visible {
@include core.interaction-focus-styles($disable-background: true);
}
}
mixin
@mixin surface-disabled($clickable: true, $hoverable: true) { … }
mixin
@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) { … }
@use "@react-md/core";
.container {
display: flex;
@include core.interaction-surface;
}
mixin
@mixin variables { … }
mixin
@mixin styles($disable-layer: false) { … }
function
@function get-var($name, $fallback: null) { … }
String
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
classuse-light-surface
and use-dark-surface
mixinshover-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:
focus
and hover
statesThe 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