Boolean$segmented-button-disable-everything: false !default;Set to true to disable all the styles
Boolean$segmented-button-disable-selected-icon: false !default;Set to true to disable the styles to display an icon while selected
Color $segmented-button-light-theme-color: colors.$black !default;The light theme text color
Color $segmented-button-light-theme-outline-color: #79747e !default;The light theme outline color
Color $segmented-button-light-theme-selected-background-color: theme.get-swatch(
theme.$secondary-color,
700,
false,
color.adjust(theme.$secondary-color, $lightness: -20%)
) !default;The light theme background color while selected
Color $segmented-button-light-theme-selected-color: a11y.contrast-color(
$light-theme-selected-background-color
) !default;The light theme text color while selected
Color $segmented-button-dark-theme-color: colors.$white !default;The dark theme text color
Color $segmented-button-dark-theme-outline-color: #938f99 !default;The dark theme outline color
Color $segmented-button-dark-theme-selected-background-color: theme.get-swatch(
theme.$secondary-color,
300,
false,
color.adjust(theme.$secondary-color, $lightness: 20%)
) !default;The dark theme background color while selected
Color $segmented-button-dark-theme-selected-color: a11y.contrast-color(
$dark-theme-selected-background-color
) !default;The dark theme text color while selected
Number$segmented-button-gap: spacing.get-var(sm) !default;The default gap to apply between the elements in the SegmentedButton.
Number$segmented-button-border-radius: 2.5rem !default;The default border-radius to apply SegmentedButton that appear at the edges.
Number$segmented-button-min-height: 2.5rem !default;The default min-height for a SegmentedButton.
Number$segmented-button-min-width: 3rem !default;The default min-width for a SegmentedButton.
Number$segmented-button-horizontal-padding: calc(spacing.get-var(sm) * 1.5) !default;The default horizontal padding for a SegmentedButton.
Number$segmented-button-vertical-padding: spacing.get-var(none) !default;The default vertical padding for a SegmentedButton.
Number$segmented-button-outline-width: 0.0625rem !default;The default outline width for a SegmentedButton.
Color $segmented-button-outline-color: theme.get-default-color(
$light-theme-outline-color,
$dark-theme-outline-color
) !default;The default outline color.
Color $segmented-button-color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;The default text color
Color $segmented-button-selected-color: theme.get-default-color(
$light-theme-selected-color,
$dark-theme-selected-color
) !default;The default selected text color
Color $segmented-button-selected-background-color: theme.get-default-color(
$light-theme-selected-background-color,
$dark-theme-selected-background-color
) !default;The default selected background-color
Map$segmented-button-typography-styles: typography.$button-styles !default;The default typography styles.
List$segmented-button-variables: (
border-radius,
min-height,
min-width,
outline-width,
outline-color,
color,
selected-background-color,
selected-color
);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-theme { … }Applies the light the variables based on feature flags
mixin@mixin use-dark-theme { … }Applies the dark the variables based on feature flags
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 |