Chip Sass API

Variables

chip-disable-everything

$chip-disable-everything: false !default;

chip-disable-icon

$chip-disable-icon: false !default;

chip-disable-avatar

$chip-disable-avatar: avatar.$disable-everything !default;

Used By

• @mixin chip-styles

chip-disable-progress

$chip-disable-progress: progress.$disable-everything or progress.$disable-circular !default;

Used By

• @mixin chip-styles

chip-disable-content

$chip-disable-content: false !default;

Used By

• @mixin chip-styles
• @mixin dialog-variables
• @mixin dialog-styles

chip-disable-solid-theme

$chip-disable-solid-theme: false !default;

Used By

• @mixin chip-use-light-theme
• @mixin chip-use-dark-theme
• @mixin chip-styles

chip-disable-solid-raisable

$chip-disable-solid-raisable: false !default;

Used By

• @mixin chip-styles

chip-disable-outline-theme

$chip-disable-outline-theme: $disable-everything !default;

Used By

• @mixin chip-use-light-theme
• @mixin chip-use-dark-theme
• @mixin chip-styles

chip-disable-outline-raisable

$chip-disable-outline-raisable: false !default;

Used By

• @mixin chip-styles

chip-disable-left-addon

$chip-disable-left-addon: false !default;

Used By

• @mixin chip-styles

chip-disable-right-addon

$chip-disable-right-addon: false !default;

Used By

• @mixin chip-styles

chip-disable-selected-theme

$chip-disable-selected-theme: false !default;

Used By

• @mixin chip-styles

chip-disable-selected-icon-transition

$chip-disable-selected-icon-transition: false !default;

Used By

• @mixin chip-styles

chip-gap

$chip-gap: spacing.get-var(md) !default;

chip-height

$chip-height: 2rem !default;

chip-border-radius

$chip-border-radius: border-radius.get-var(lg) !default;

chip-icon-size

$chip-icon-size: 1.125rem !default;

chip-avatar-size

$chip-avatar-size: 1.5rem !default;

Used By

• @mixin chip-styles

chip-progress-size

$chip-progress-size: $icon-size !default;

Used By

• @mixin chip-styles

chip-progress-width

$chip-progress-width: 12 !default;

Used By

• @mixin chip-styles

chip-typography

$chip-typography: map.merge(
  typography.$base-font-styles,
  typography.$body-2-styles
) !default;

chip-horizontal-padding

$chip-horizontal-padding: calc(spacing.get-var(md) * 1.25) !default;

chip-vertical-padding

$chip-vertical-padding: spacing.get-var(none) !default;

chip-addon-left-padding

$chip-addon-left-padding: spacing.get-var(xs) !default;

Used By

• @mixin chip-styles

chip-addon-right-padding

$chip-addon-right-padding: spacing.get-var(sm) !default;

Used By

• @mixin chip-styles

chip-theme-background-color

$chip-theme-background-color: theme.get-swatch(
  theme.$primary-color,
  300,
  false,
  color.adjust(theme.$primary-color, $lightness: -20%)
) !default;

Used By

• @mixin chip-variables

chip-theme-color

$chip-theme-color: a11y.contrast-color($theme-background-color) !default;

Used By

• @mixin chip-variables

chip-solid-light-background-color

$chip-solid-light-background-color: colors.$grey-300 !default;

Used By

• @mixin chip-use-light-theme

chip-solid-light-disabled-background-color

$chip-solid-light-disabled-background-color: colors.$grey-100 !default;

Used By

• @mixin chip-use-light-theme

chip-solid-light-color

$chip-solid-light-color: a11y.contrast-color($solid-light-background-color) !default;

Used By

• @mixin chip-use-light-theme

chip-solid-dark-background-color

$chip-solid-dark-background-color: if(
  theme.$disable-dark-elevation,
  colors.$grey-900,
  map.get(theme.$dark-elevation-colors, 12)
) !default;

Used By

• @mixin chip-use-dark-theme

chip-solid-dark-disabled-background-color

$chip-solid-dark-disabled-background-color: color.adjust(
  colors.$grey-900,
  $lightness: 2%
) !default;

Used By

• @mixin chip-use-dark-theme

chip-solid-dark-color

$chip-solid-dark-color: a11y.contrast-color($solid-dark-background-color) !default;

Used By

• @mixin chip-use-dark-theme

chip-solid-background-color

$chip-solid-background-color: theme.get-default-color(
  $solid-light-background-color,
  $solid-dark-background-color
) !default;

Used By

• @mixin chip-variables

chip-solid-disabled-background-color

$chip-solid-disabled-background-color: theme.get-default-color(
  $solid-light-disabled-background-color,
  $solid-dark-disabled-background-color
) !default;

Used By

• @mixin chip-variables

chip-solid-color

$chip-solid-color: theme.get-default-color(
  $solid-light-color,
  $solid-dark-color
) !default;

Used By

• @mixin chip-variables

chip-solid-raisable-box-shadow-z-value

$chip-solid-raisable-box-shadow-z-value: 4 !default;

Used By

• @mixin chip-styles

chip-solid-raisable-transition-duration

$chip-solid-raisable-transition-duration: transition.$linear-duration !default;

Used By

• @mixin chip-styles

chip-outline-width

$chip-outline-width: calc(interaction.get-var(focus-width) / 2) !default;

Used By

• @mixin chip-variables
• @mixin theme-variables
• @mixin segmented-button-variables

chip-outline-raisable-box-shadow-z-value

$chip-outline-raisable-box-shadow-z-value: 8 !default;

Used By

• @mixin chip-styles

chip-outline-light-color

$chip-outline-light-color: colors.$grey-300 !default;

Used By

• @mixin chip-use-light-theme
• @mixin chip-use-dark-theme

chip-outline-light-background-color

$chip-outline-light-background-color: theme.$light-theme-surface-color !default;

Used By

• @mixin chip-use-light-theme

chip-outline-light-text-color

$chip-outline-light-text-color: a11y.contrast-color(
  $outline-light-background-color
) !default;

Used By

• @mixin chip-use-light-theme

chip-outline-dark-color

$chip-outline-dark-color: $outline-light-color !default;

Used By

• @mixin chip-use-light-theme
• @mixin chip-use-dark-theme

chip-outline-dark-background-color

$chip-outline-dark-background-color: if(
  theme.$disable-dark-elevation,
  theme.$dark-theme-surface-color,
  map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
) !default;

Used By

• @mixin chip-use-dark-theme

chip-outline-dark-text-color

$chip-outline-dark-text-color: a11y.contrast-color(
  $outline-dark-background-color
) !default;

Used By

• @mixin chip-use-dark-theme

chip-outline-color

$chip-outline-color: theme.get-default-color(
  $outline-light-color,
  $outline-dark-color
) !default;

Used By

• @mixin chip-variables
• @mixin theme-variables
• @mixin segmented-button-variables

chip-outline-background-color

$chip-outline-background-color: theme.get-default-color(
  $outline-light-background-color,
  $outline-dark-background-color
) !default;

Used By

• @mixin chip-variables

chip-outline-text-color

$chip-outline-text-color: theme.get-default-color(
  $outline-light-text-color,
  $outline-dark-text-color
) !default;

Used By

• @mixin chip-variables

chip-outline-raisable-transition-duration

$chip-outline-raisable-transition-duration: transition.$linear-duration !default;

Used By

• @mixin chip-styles

chip-variables

$chip-variables: (
  gap,
  height,
  border-radius,
  horizontal-padding,
  vertical-padding,
  solid-background-color,
  solid-disabled-background-color,
  solid-color,
  theme-background-color,
  theme-color,
  outline-color,
  outline-width,
  outline-background-color,
  outline-text-color
);

Mixins

chip-set-var

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

Requires

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

chip-use-var

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

Requires

• @function app-bar-get-var

chip-use-light-theme

@mixin use-light-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $chip-disable-solid-theme
• $chip-solid-light-background-color
• $chip-solid-light-disabled-background-color
• $chip-solid-light-color
• $chip-disable-outline-theme
• $chip-outline-light-color
• $chip-outline-dark-color
• $chip-outline-light-background-color
• $chip-outline-light-text-color

chip-use-dark-theme

@mixin use-dark-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $chip-disable-solid-theme
• $chip-solid-dark-background-color
• $chip-solid-dark-disabled-background-color
• $chip-solid-dark-color
• $chip-disable-outline-theme
• $chip-outline-light-color
• $chip-outline-dark-color
• $chip-outline-dark-background-color
• $chip-outline-dark-text-color

chip-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $chip-solid-background-color
• $chip-solid-disabled-background-color
• $app-bar-gap
• $app-bar-height
• $avatar-border-radius
• $app-bar-horizontal-padding
• $app-bar-vertical-padding
• $chip-solid-color
• $chip-theme-background-color
• $chip-theme-color
• $chip-outline-color
• $chip-outline-width
• $chip-outline-background-color
• $chip-outline-text-color

chip-styles

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

Requires

• @mixin app-bar-use-var
• @function app-bar-get-var
• @mixin box-shadow
• $app-bar-disable-everything
• $avatar-disable-icon
• $button-icon-size
• $chip-disable-avatar
• $chip-avatar-size
• $chip-disable-progress
• $chip-progress-size
• $chip-progress-width
• $chip-disable-selected-icon-transition
• $app-bar-gap
• $badge-typography
• $chip-disable-solid-theme
• $chip-disable-solid-raisable
• $chip-solid-raisable-box-shadow-z-value
• $chip-solid-raisable-transition-duration
• $chip-disable-outline-theme
• $chip-disable-outline-raisable
• $chip-outline-raisable-box-shadow-z-value
• $chip-outline-raisable-transition-duration
• $chip-disable-selected-theme
• $chip-disable-left-addon
• $chip-addon-left-padding
• $chip-disable-right-addon
• $chip-addon-right-padding
• $chip-disable-content

Functions

chip-get-var

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

Returns — String

Requires

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

Set to true to disable all the chip styles

Set to true to disable the icon styles within a chip

Set to true to disable the avatar styles within a chip

Set to true to disable the circular progress styles within a chip

Set to true if all Chip components have been updated to enable disableContentWrap

Set to true if all Chip components will only use theme="outline".

Set to true if all Chip components will never enable the raisable prop while the theme="solid".

Set to true if all Chip components will never set theme="outline"

Set to true if all Chip components will never enable the raisable prop while the theme="outline".

Set to true if the leftAddon prop will never be provided to the Chip component.

Set to true if the rightAddon prop will never be provided to the Chip component.

Set to true if the selectedThemed prop will never be enabled on the Chip component.

Set to true if the disableIconTransition will always be enabled for the Chip component

The gap between items in the Chip.

The default Chip height.

The default Chip border radius.

The default size for icons that are rendered within a Chip normally as the leftAddon or rightAddon props.

The default size for avatars that are rendered within a Chip normally as the leftAddon or rightAddon props.

The default size for circular progress components that are rendered within a Chip normally as the leftAddon or rightAddon props.

The default progress.$circular-stroke-width to apply to circular progress components rendered within a Chip normally as the leftAddon or rightAddon props.

The default Chip typography

The default horizontal padding on Chips.

The default vertical padding on Chips.

The amount of padding-left to apply to the Chip if a leftAddon prop was provided.

The amount of padding-right to apply to the Chip if a rightAddon prop was provided.

The background-color to apply when the themed prop is enabled.

The text color to apply when the themed prop is enabled.

The light theme background color for the theme="solid"

The light theme background color for the theme="solid" and the Chip is disabled.

The light theme text color for the theme="solid"

The dark theme background color for the theme="solid"

The dark theme background color for the theme="solid" and the Chip is disabled.

The dark theme text color for the theme="solid"

The default theme="solid" background-color

The default theme="solid" disabled background-color

The default theme="solid" text color

A number between 0-24 representing the box-shadow elevation when the user is pressing the Chip with a theme="solid" and raisable.

The raisable transition duration while theme="solid"

The outline width when a theme="outline".

A number between 0-24 representing the box-shadow elevation when the user is pressing the Chip with a theme="outline" and raisable.

The box-shadow color to use in light themes when theme="outline"

The background-color to use in light themes when theme="outline"

The text color to use in light themes when theme="outline"

The box-shadow color to use in dark themes when theme="outline"

The background-color to use in dark themes when theme="outline"

The text color to use in dark themes when theme="outline"

The box-shadow color to use when theme="outline"

The background-color to use when theme="outline"

The text color to use when theme="outline"

The raisable transition duration while theme="outline"

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

Applies the light the variables based on feature flags

Applies the dark the variables based on feature flags

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