String$interaction-mode: ripple !default;This should be one of:
ripplepressbothnoneBoolean$interaction-disable-ripple: not
list.index(
(ripple, both),
utils.validate((ripple, press, both, none), $mode, "interaction mode")
);Convenience feature flag check for ripples
Boolean$interaction-disable-surface: false !default;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-colorfocus-background-colorpress-background-colorselected-background-colorBoolean$interaction-disable-outline-offset: false !default;Set to true if the outline styles should not also apply an
outline-offset.
Boolean$interaction-disable-focus-background: false !default;Set to true if the default focus styles should not also change the background color of the element.
Boolean$interaction-disable-ripple-inset-var: $disable-ripple !default;Set to true if not using the interaction ripple behavior.
Boolean$interaction-disable-ripple-border-radius-var: $disable-ripple !default;Set to true if not using the interaction ripple behavior.
Boolean$interaction-disable-surface-inset-var: $disable-surface !default;Set this to true if the interaction surface background inset should not be configurable through custom CSS properties.
Boolean$interaction-disable-surface-border-radius-var: $disable-surface !default;Set this to true if the interaction surface border-radius should not be configurable through custom CSS properties.
String$interaction-pressed-class-name: "rmd-pressed";The class name to apply while an element is pressed and using the
useElementInteraction hook.
Boolean$interaction-disable-higher-contrast: false !default;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.
Color $interaction-light-surface-base-background-color: colors.$black !default;The base interaction background color to apply when an element is on a light surface.
Color $interaction-dark-surface-base-background-color: colors.$white !default;The base interaction background color to apply when an element is on a dark surface.
Color $interaction-focus-color: colors.$blue-500 !default;The default color to use while elements are focused.
Number$interaction-focus-width: 0.125rem !default;The default outline/box-shadow width while elements are focused.
Boolean$interaction-focus-box-shadow: false !default;Set to true if focus behavior should use box-shadow instead of
outline.
Color$interaction-light-surface-ripple-background-color: rgba(
$light-surface-base-background-color,
0.08
) !default;The base interaction background color to apply when an element is on a light surface.
Color$interaction-dark-surface-ripple-background-color: rgba(
$dark-surface-base-background-color,
0.12
) !default;The base interaction background color to apply when an element is on a light surface.
Color$interaction-ripple-background-color: theme.get-default-color(
$light-surface-ripple-background-color,
$dark-surface-ripple-background-color
) !default;The default background color for interaction ripples.
Number$interaction-ripple-transform-duration: 0.45s !default;The ripple animation duration.
Number$interaction-ripple-opacity-duration: 0.3s !default;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.
Number$interaction-light-surface-hover-opacity: 0.08 !default;The opacity to apply while hovering an element on a light surface.
Number$interaction-light-surface-focus-opacity: 0.24 !default;The opacity to apply while focusing an element on a light surface.
Number$interaction-light-surface-press-opacity: 0.32 !default;The opacity to apply while pressing an element on a light surface.
Number$interaction-light-surface-selected-opacity: 0.16 !default;The opacity to apply while an element is selected on a light surface.
Color$interaction-light-surface-hover-background-color: rgba(
$light-surface-base-background-color,
$light-surface-hover-opacity
) !default;The background color for an element while hovered on a light surface.
Color$interaction-light-surface-focus-background-color: rgba(
$light-surface-base-background-color,
$light-surface-focus-opacity
) !default;The background color for an element while focused on a light surface.
Color$interaction-light-surface-press-background-color: rgba(
$light-surface-base-background-color,
$light-surface-press-opacity
) !default;The background color for an element while pressed on a light surface.
Color$interaction-light-surface-selected-background-color: rgba(
$light-surface-base-background-color,
$light-surface-selected-opacity
) !default;The background color for a selected element on a light surface.
Number$interaction-dark-surface-hover-opacity: 0.1 !default;The opacity to apply while hovering an element on a dark surface.
Number$interaction-dark-surface-focus-opacity: 0.12 !default;The opacity to apply while focusing an element on a dark surface.
Number$interaction-dark-surface-press-opacity: 0.24 !default;The opacity to apply while pressing an element on a dark surface.
Number$interaction-dark-surface-selected-opacity: 0.12 !default;The opacity to apply while hovering an element on a dark surface.
Color$interaction-dark-surface-hover-background-color: rgba(
$dark-surface-base-background-color,
$dark-surface-hover-opacity
) !default;The background color for an element while hovered on a dark surface.
Color$interaction-dark-surface-focus-background-color: rgba(
$dark-surface-base-background-color,
$dark-surface-focus-opacity
) !default;The background color for an element while focused on a dark surface.
Color$interaction-dark-surface-press-background-color: rgba(
$dark-surface-base-background-color,
$dark-surface-press-opacity
) !default;The background color for an element while pressed on a dark surface.
Color$interaction-dark-surface-selected-background-color: rgba(
$dark-surface-base-background-color,
$dark-surface-selected-opacity
) !default;The background color for a selected element on a dark surface.
Color$interaction-hover-background-color: theme.get-default-color(
$light-surface-hover-background-color,
$dark-surface-hover-background-color
) !default;The default background color for an element while hovered.
Color$interaction-focus-background-color: theme.get-default-color(
$light-surface-focus-background-color,
$dark-surface-focus-background-color
) !default;The default background color for an element while focused.
Color$interaction-press-background-color: theme.get-default-color(
$light-surface-press-background-color,
$dark-surface-press-background-color
) !default;The default background color for an element while pressed.
Color$interaction-selected-background-color: theme.get-default-color(
$light-surface-selected-background-color,
$dark-surface-selected-background-color
) !default;The default background color for an element while selected.
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
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin use-light-surface { … }This mixin is used to apply interaction state colors that are visible on a light surface color.
@use "@react-md/core";
.container {
background-color: #fff;
@include core.interaction-use-light-surface;
}mixin@mixin use-dark-surface { … }This mixin is used to apply interaction state colors that are visible on a dark surface color.
@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) { … }This mixin should only be used when not using the surface
mixin.
@use "@react-md/core";
.link {
@include core.interaction-outline;
}mixin@mixin focus-styles($box-shadow: $focus-box-shadow, $disable-background: $disable-focus-background) { … }This mixin should only be used when not using the surface
mixin.
@use "@react-md/core";
.link {
&:focus-visible {
@include core.interaction-focus-styles($disable-background: true);
}
}mixin@mixin surface-disabled($clickable: true, $hoverable: true) { … }This mixin should only be used when not using the surface
mixin.
| Name | Description | Type | Default Value |
|---|---|---|---|
$clickable | Set to | Boolean | true |
$hoverable | Set to | Boolean | true |
mixin@mixin surface($focus-selector: "&:focus" + if(sass(not utils.disable-focus-visible): "-visible"; else: ""), $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) { … }Creates a "surface" for an interactable element that:
focus and hover states@use "@react-md/core";
.container {
display: flex;
@include core.interaction-surface;
}mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |