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