Chip Sass API

Variables

chip-disable-everything

$chip-disable-everything: false !default;

Set to true to disable all the chip styles

chip-disable-icon

$chip-disable-icon: false !default;

Set to true to disable the icon styles within a chip

chip-disable-avatar

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

Set to true to disable the avatar styles within a chip

Used By

• @mixin chip-styles

chip-disable-progress

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

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

Used By

• @mixin chip-styles

chip-disable-content

$chip-disable-content: false !default;

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

Used By

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

chip-disable-solid-theme

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

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

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;

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

Used By

• @mixin chip-styles

chip-disable-outline-theme

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

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

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;

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

Used By

• @mixin chip-styles

chip-disable-left-addon

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

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

Used By

• @mixin chip-styles

chip-disable-right-addon

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

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

Used By

• @mixin chip-styles

chip-disable-selected-theme

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

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

Used By

• @mixin chip-styles

chip-disable-selected-icon-transition

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

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

Used By

• @mixin chip-styles

chip-gap

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

The gap between items in the Chip.

chip-height

$chip-height: 2rem !default;

The default Chip height.

chip-border-radius

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

The default Chip border radius.

chip-icon-size

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

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

chip-avatar-size

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

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

Used By

• @mixin chip-styles

chip-progress-size

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

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

Used By

• @mixin chip-styles

chip-progress-width

$chip-progress-width: 12 !default;

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

Used By

• @mixin chip-styles

chip-typography

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

The default Chip typography

chip-horizontal-padding

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

The default horizontal padding on Chips.

chip-vertical-padding

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

The default vertical padding on Chips.

chip-addon-left-padding

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

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

Used By

• @mixin chip-styles

chip-addon-right-padding

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

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

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;

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

Used By

• @mixin chip-variables

chip-theme-color

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

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

Used By

• @mixin chip-variables

chip-solid-light-background-color

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

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

Used By

• @mixin chip-use-light-theme

chip-solid-light-disabled-background-color

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

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

Used By

• @mixin chip-use-light-theme

chip-solid-light-color

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

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

Used By

• @mixin chip-use-light-theme

chip-solid-dark-disabled-background-color

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

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

Used By

• @mixin chip-use-dark-theme

chip-solid-dark-color

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

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

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;

The default theme="solid" background-color

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;

The default theme="solid" disabled background-color

Used By

• @mixin chip-variables

chip-solid-color

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

The default theme="solid" text color

Used By

• @mixin chip-variables

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

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

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

Used By

• @mixin chip-styles

chip-solid-raisable-transition-duration

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

The raisable transition duration while theme="solid"

Used By

• @mixin chip-styles

chip-outline-width

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

The outline width when a theme="outline".

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;

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

Used By

• @mixin chip-styles

chip-outline-light-color

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

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

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;

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

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;

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

Used By

• @mixin chip-use-light-theme

chip-outline-dark-color

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

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

Used By

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

chip-outline-dark-text-color

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

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

Used By

• @mixin chip-use-dark-theme

chip-outline-color

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

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

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;

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

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;

The text color to use when theme="outline"

Used By

• @mixin chip-variables

chip-outline-raisable-transition-duration

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

The raisable transition duration while theme="outline"

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
);

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

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 { … }

Applies the light the variables based on feature flags

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 { … }

Applies the dark the variables based on feature flags

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $chip-disable-solid-theme
• $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-text-color

chip-variables

@mixin variables { … }

Conditionally applies the css variables based on feature flags

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) { … }

Generates all the styles based on feature flags.

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

a var() statement

Requires

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