Boolean if the chip should disable the background color change when it gains keyboard focus. This is disabled by default since the focus shadow looks a bit nicer than the background color changes due to the colors of the chips.
$rmd-chip-disable-focus-background-color: $rmd-states-use-focus-shadow !default;The height for chips.
$rmd-chip-height: 2rem !default;The border radius to use for all chip types.
$rmd-chip-border-radius: 1rem !default;The amount of spacing to use when between the left edge and the leading icon/avatar in the chip.
$rmd-chip-small-spacing: 0.25rem !default;The amount of spacing to use between the leading icon/avatar and the chip's text as well as the trailing icon and the chip's edge.
$rmd-chip-medium-spacing: 0.5rem !default;The amount of spacing to use for the chip's edge when there are no leading or trailing icons/avatars.
$rmd-chip-large-spacing: 0.75rem !default;The size to update icons to that appear within a chip.
$rmd-chip-icon-size: 1.125rem !default;The size for avatars that appear within a chip.
Note: This will only be generated if the @react-md/avatar package has been installed and imported
$rmd-chip-avatar-size: 1.5rem !default;The size to use for a circular progress that is being rendered as the leftIcon or rightIcon. This should be a number smaller than the height of the chip minus vertical padding.
$rmd-chip-progress-size: $rmd-chip-icon-size !default;The width to use for the circular progress that is being rendered as the leftIcon or rightIcon.
$rmd-chip-progress-width: 12 !default;The background color to use for the selected themed state of the chip. This is basically a secondary type of selected state.
$rmd-chip-themed-background-color: rmd-theme-get-swatch(
$rmd-theme-primary,
300,
false,
color.adjust($rmd-theme-primary, $lightness: -20%),
rmd-chip-themed-background-color
) !default;The color to use for the selected themed state of the chip.
$rmd-chip-themed-color: if(
rmd-theme-tone($rmd-chip-themed-background-color) == light,
$rmd-black-base,
$rmd-white-base
) !default;The background color to use for "solid" themed chips when using the light theme.
$rmd-chip-solid-light-background-color: $rmd-grey-300 !default;The text color to use for "solid" themed chips when using the light theme.
$rmd-chip-solid-light-color: if(
rmd-theme-tone($rmd-chip-solid-light-background-color) == light,
$rmd-black-base,
$rmd-white-base
) !default;The background color to use for a solid disabled chip when using the light theme.
$rmd-chip-solid-light-disabled-background-color: $rmd-grey-100 !default;The background color to use for "solid" themed chips when using the dark theme.
$rmd-chip-solid-dark-background-color: if(
$rmd-theme-dark-elevation,
map.get($rmd-theme-dark-elevation-colors, 12),
$rmd-grey-900
) !default;The text color to use for "solid" themed chips when using the dark theme.
$rmd-chip-solid-dark-color: if(
rmd-theme-tone($rmd-chip-solid-dark-background-color) == light,
$rmd-black-base,
$rmd-white-base
) !default;The background color to use for a solid disabled chip when using the dark theme.
$rmd-chip-solid-dark-disabled-background-color: color.adjust(
$rmd-grey-900,
$lightness: 2%
) !default;The background color to use for "solid" themed chips.
$rmd-chip-solid-background-color: if(
$rmd-theme-light,
$rmd-chip-solid-light-background-color,
$rmd-chip-solid-dark-background-color
) !default;The text color to use for "solid" themed chips.
$rmd-chip-solid-color: if(
$rmd-theme-light,
$rmd-chip-solid-light-color,
$rmd-chip-solid-dark-color
) !default;The background color to use for "solid" themed chips that are disabled.
$rmd-chip-solid-disabled-background-color: if(
$rmd-theme-light,
$rmd-chip-solid-light-disabled-background-color,
$rmd-chip-solid-dark-disabled-background-color
) !default;The background color to use for "outlined" themed chips when using the light theme.
$rmd-chip-outline-light-background-color: $rmd-theme-light-surface !default;The text color to use for "outlined" themed chips when using the light theme.
$rmd-chip-outline-light-color: if(
rmd-theme-tone($rmd-chip-outline-light-background-color) == light,
$rmd-black-base,
$rmd-white-base
) !default;The background color to use for "outlined" themed chips when using the dark theme.
$rmd-chip-outline-dark-background-color: if(
$rmd-theme-dark-elevation,
map.get($rmd-theme-dark-elevation-colors, 8),
$rmd-theme-dark-surface
) !default;The text color to use for "outlined" themed chips when using the dark theme.
$rmd-chip-outline-dark-color: if(
rmd-theme-tone($rmd-chip-outline-dark-background-color) == light,
$rmd-black-base,
$rmd-white-base
) !default;The background color to use for "outlined" themed chips.
$rmd-chip-outline-background-color: if(
$rmd-theme-light,
$rmd-chip-outline-light-background-color,
$rmd-chip-outline-dark-background-color
) !default;The text color to use for "outlined" themed chips.
$rmd-chip-outline-color: if(
$rmd-theme-light,
$rmd-chip-outline-light-color,
$rmd-chip-outline-dark-color
) !default;The border color to use for "outline" themed chips.
$rmd-chip-outline-border-color: $rmd-grey-300 !default;The transition duration for animating the box-shadow elevation for a chip while being pressed by a keyboard.
$rmd-chip-transition-duration: $rmd-transition-standard-time !default;The base box-shadow to apply to chips when outlined. This will normally be used along with a color variable to define a box shadow.
$rmd-chip-box-shadow: inset 0 0 0 1px !default;A Map of all the "themeable" parts of the chip package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-chip-theme-values: (
height: $rmd-chip-height,
border-radius: $rmd-chip-border-radius,
themed-background-color: $rmd-chip-themed-background-color,
themed-color: $rmd-chip-themed-color,
solid-background-color: $rmd-chip-solid-background-color,
solid-color: $rmd-chip-solid-color,
solid-disabled: $rmd-chip-solid-disabled-background-color,
outline-background-color: $rmd-chip-outline-background-color,
outline-color: $rmd-chip-outline-color,
outline-border-color: $rmd-chip-outline-border-color,
small-spacing: $rmd-chip-small-spacing,
medium-spacing: $rmd-chip-medium-spacing,
large-spacing: $rmd-chip-large-spacing,
) !default;Creates the styles for one of the chip's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the chip's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The chip theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates all the styles for the chip button
Creates all the styles for this package as well as defining all the theme CSS variables.
This function is used to quickly get one of the chip's theme values. This is really just for the rmd-chip-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the chip's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the chip's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-chip-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the chip's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |