foundation/layout

functions

layout-width

@function layout-width($name) { ... }

View source

Description

Returns the widths of the specified column.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$name`	The column name.	`String`	— none

Returns

Number —

The width for the column.

Throws

Column #{$name} - #{$value} not found. Available columns: #{available-names($layout-width-data)}

Requires

[function] available-names

General

functions

border-radius

@function border-radius($size) { ... }

View source

Description

Returns the border radius of the specified size.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The border radius’s size.	`String`	— none

Returns

Number —

The border radius value.

border-width

@function border-width($variant: base) { ... }

View source

Description

Returns the width of the specified border type.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$variant`	The border variant key.	`String`	`base`

Returns

Number —

The width for the border.

Throws

Border width variant #{$variant} not found. Available variants: #{available-names($border-width-data)}

Requires

[function] available-names

border

@function border($variant: base) { ... }

View source

Description

Returns the default border.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$variant`	The border variant key.	`String`	`base`

Returns

List —

The border value.

Throws

Border variant #{$variant} not found. Available variants: #{available-names($borders-data)}

Requires

[function] available-names

color

@function color($hue, $value, $for-background) { ... }

View source

Description

Returns the color value for a given color name and group.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$hue`	The color’s hue.	`String`	— none
`$value`	The darkness/lightness of the color. Defaults to base.	`String`	— none
`$for-background`	The background color on which this color will appear. Applies a multiply filter to ensure appropriate contrast.	`Color`	— none

Returns

Color —

The color value.

Throws

Color #{$hue}, #{$value} not found.\a Make sure arguments are strings.\a GOOD: `color(

Requires

[function] color-multiply
[function] available-names
[variable] color-palette-data
[variable] color-palette-data
[variable] color-palette-data
[variable] color-palette-data

Used by

[mixin] state

color-multiply

@function color-multiply($foreground, $background) { ... }

View source

Description

Darkens the foreground color by the background color. This is the same as the "multiply" filter in graphics apps.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$foreground`	The color to darken.	`Color`	— none
`$background`	The background to base darkening on.	`Color`	— none

Returns

Color —

The modified color.

Used by

[function] color

ms-high-contrast-color

@function ms-high-contrast-color($color) { ... }

View source

Description

Returns the color value for Windows high contrast mode

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	The name of the high-contrast color.	`String`	— none

Returns

Color —

The color value.

Throws

Color #{$color} not found.\a Make sure argument is a string.\a GOOD: ms-high-contrast-color(

Requires

[function] available-names
[variable] ms-high-contrast-color-data
[variable] ms-high-contrast-color-data

duration

@function duration($variant) { ... }

View source

Description

Returns the duration value for a given variant.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$variant`	The key for the given variant.	`String`	— none

Returns

Number —

The duration for the variant (in milliseconds).

Throws

Duration variant #{$interpolated-value} not found. Available variants: #{available-names($duration-data)}

Requires

[function] available-names

Used by

[mixin] focus-ring

easing

@function easing($variant) { ... }

View source

Description

Returns the timing-function value for a given variant.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$variant`	The key for the given variant.	`String`	— none

Returns

String —

The cubic-bezier function (string) for the variant.

Throws

Easing variant #{$variant} not found. Available variants: #{available-names($easing-data)}

Requires

[function] available-names

filter

@function filter($hue, $value) { ... }

View source

Description

Returns the filter list for a given color name and group.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$hue`	The color’s hue.	`String`	— none
`$value`	The darkness/lightness of the color. Defaults to base.	`String`	— none

Returns

List —

The filter list.

Throws

Filter #{$hue}, #{$value} not found.\a Make sure arguments are strings.\a GOOD: `filter(

Requires

[function] available-names
[variable] color-filter-palette-data
[variable] color-filter-palette-data
[variable] color-filter-palette-data
[variable] color-filter-palette-data

shadow

@function shadow($depth: base) { ... }

View source

Description

Returns the shadow for the specified depth

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$depth`	The shadow’s depth.	`String`	`base`

Returns

List —

The shadow value.

Throws

Shadow variant #{$depth} not found. Available variants: #{available-names($shadows-data)}

Requires

[function] available-names

spacing

@function spacing($variant) { ... }

View source

Description

Returns the spacing value for a given variant.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$variant`	The key for the given variant.	`String`	— none

Returns

Number —

The spacing for the variant.

Throws

Spacing variant #{$variant} not found. Available variants: #{available-names($spacing-data)}

Requires

[function] rem
[function] available-names

font-family

@function font-family($family) { ... }

View source

Description

Returns the font stack for a given family.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$family`	The key for the given family.	`String`	— none

Returns

Number —

The font stack for the family.

Throws

Font family #{$family} not found. Available font families: #{available-names($font-family-data)}

Requires

[function] available-names

line-height

@function line-height($style, $variant: base) { ... }

View source

Description

Returns the line height for a given text style and variant.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$style`	The font style.	`String`	— none
`$variant`	The variant on the font-size.	`String`	`base`

Returns

Number —

The line-height for the text-style.

Throws

Line height #{$style} - #{$variant} not found. Available line heights: #{available-names($line-height-data)}

Requires

[function] available-names

font-size

@function font-size($style, $variant: base) { ... }

View source

Description

Returns the font size for a given text style and variant.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$style`	The font style.	`String`	— none
`$variant`	The variant on the font-size.	`String`	`base`

Returns

Number —

The font-size for the text-style.

Throws

Font size #{$style} - #{$variant} not found. Available font sizes: #{available-names($line-height-data)}

Requires

[function] available-names

rem

@function rem($value) { ... }

View source

Description

Returns the value in rem for a given pixel value.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The pixel value to be converted.	`Number`	— none

Returns

Number —

The converted value in rem.

Throws

Value must be in px, em, or rem.

Used by

[mixin] focus-ring
[mixin] focus-ring
[mixin] focus-ring
[function] spacing
[mixin] state
[mixin] state

px

@function px($value) { ... }

View source

Description

Returns the value in pixels for a given rem value.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The rem value to be converted.	`Number`	— none

Returns

Number —

The converted value in pixels.

Throws

Value must be in rem, em, or px.

em

@function em($value) { ... }

View source

Description

Returns the value in ems for a given pixel value. Note that this only works for elements that have had no font-size changes.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$value`	The pixel value to be converted.	`Number`	— none

Returns

Number —

The converted value in ems.

Throws

Value must be in px, rem, or em.

available-names

@function available-names($map, $map) { ... }

View source

Description

Returns the list of available names in a given map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$map`	The map of data to list the names from.	`Map`	— none
`$map`	The level of depth to get names from.	`Number`	— none

Returns

String —

The list of names in the map.

Used by

[function] layout-width
[function] border-width
[function] border
[function] color
[function] ms-high-contrast-color
[function] duration
[function] easing
[function] filter
[function] shadow
[function] spacing
[function] font-family
[function] line-height
[function] font-size

z-index

@function z-index($element, $context) { ... }

View source

Description

Returns the z-index of the specified element.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$element`	The key for the element.	`String`	— none
`$context`	The map in which to search for the element.	`Map`	— none

Returns

Number —

The z-index for the element.

Throws

z-index #{$element} in #{$context} not found.

variables

color-palette-data

$color-palette-data: $polaris-colors;

View source

Description

Color data

Shopify color palette, extended specifically for polaris-react.

Type

Map

Used by

[function] color
[function] color
[function] color
[function] color

ms-high-contrast-color-data

$ms-high-contrast-color-data: (
  'text': windowText,
  'disabled-text': grayText,
  'selected-text': highlightText,
  'selected-text-background': highlight,
  'button-text': buttonText,
  'button-text-background': buttonFace,
  'background': window,
);

View source

Description

Color palette for Windows high-contrast mode See https://bit.ly/2vN9aGO

Type

Map

Used by

[function] ms-high-contrast-color
[function] ms-high-contrast-color

color-filter-palette-data

$color-filter-palette-data: $polaris-color-filters;

View source

Description

Color filter data

Shopify color filter palette, extended specifically for polaris-react.

Type

Map

Used by

[function] filter
[function] filter
[function] filter
[function] filter

skeleton-shimmer-duration

$skeleton-shimmer-duration: duration(slower) * 2;

View source

Description

Used to create the shimmer effect of skeleton components

mixins

focus-ring

@mixin focus-ring($size, $style, $border-width) { ... }

View source

Description

Sets the focus ring for an interactive element

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	The size of the border radius on the focus ring.	`String`	— none
`$style`	Focus ring state.	`String`	— none
`$border-width`	The border width of your element in rems.	`Number`	— none

Requires

[function] rem
[function] rem
[function] duration
[function] rem

state

@mixin state($interaction-states......) { ... }

View source

Description

Sets the background-image and box-shadow for single or multiple given interaction states.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$interaction-states...`	Accepts single or multiple interactions states.	`Arglist`	— none

Requires

[function] color
[function] rem
[function] rem

layout-flex-fix

@mixin layout-flex-fix() { ... }

View source

Description

To be used on flex items. Resolves some common layout issues, such as text truncation not respecting padding or breaking out of container. https://css-tricks.com/flexbox-truncated-text/

Parameters

None.

safe-area-for

@mixin safe-area-for($property, $spacing, $area) { ... }

View source

Description

Returns a safe-area-inset for iPhone X screen obtrusions.

Parameters

parameter Name parameter Description parameter Type parameter Default value

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	The property name i.e. padding-left.	`String`	— none
`$spacing`	The spacing value to be added to the safe-area value. i.e. spacing().	`Space`	— none
`$area`	The area where the inset is to be added. i.e. left If overriding an existing padding / margin that value should be used as $spacing.	`String`	— none

$property

The property name i.e. padding-left.

String

—

$spacing

The spacing value to be added to the safe-area value. i.e. spacing().

Space

—

$area

The area where the inset is to be added. i.e. left

If overriding an existing padding / margin that value should be used as $spacing.

String

—