Boolean$link-disable-everything: false !default;Set to true to disable all the styles
Boolean$link-disable-skip-to-main: false !default;Set to true to disable the SkipToMainContent component styles.
Boolean$link-disable-flex: false !default;Set to true to disable the display: inline-flex styles for the link.
Number$link-transition-duration: transition.$linear-duration !default;The transition duration for changing the link's color while hovered or visited.
Color $link-color: colors.$blue-500 !default;The link's default text color
Color $link-visited-color: colors.$blue-600 !default;The link's default visited text color
Color $link-hover-color: colors.$blue-400 !default;The link's default hover text color
Number$link-skip-to-main-z-index: 10000 !default;The z-index for the SkipToMainContent component.
Map$link-skip-to-main-styles: (
color: theme.theme-get-var(on-primary-color),
left: 50%,
padding: spacing.get-var(xs) spacing.get-var(md),
top: spacing.get-var(xs),
transform: translateX(-50%),
z-index: $skip-to-main-z-index,
) !default;A custom map of styles to apply to the SkipToMainContent component.
Map$link-skip-to-main-active-styles: (
outline: 0.25rem dashed currentcolor,
) !default;A custom map of styles to apply to the SkipToMainContent component while it is focused. This will be applied on top of the $skip-to-main-styles.
List$link-variables: (color, visited-color, hover-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 |