foundation/layout

functions

layout-width

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

Description

Returns the widths of the specified column.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

General

functions

border-radius

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

Description

Returns the border radius of the specified size.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter Default value
$variant

The border variant key.

Stringbase

Returns

Number

The width for the border.

Throws

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

Requires

border

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

Description

Returns the default border.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variant

The border variant key.

Stringbase

Returns

List

The border value.

Throws

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

Requires

color

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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.

Requires

Used by

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 Nameparameter Descriptionparameter Typeparameter 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

ms-high-contrast-color

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

Description

Returns the color value for Windows high contrast mode

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

The name of the high-contrast color.

String none

Returns

Color

The color value.

Requires

duration

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

Description

Returns the duration value for a given variant.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variant

The key for the given variant.

String none

Returns

Number

The duration for the variant (in miliseconds).

Throws

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

Requires

easing

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

Description

Returns the timing-function value for a given variant.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

filter

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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.

Requires

shadow

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

Description

Returns the shadow for the specified depth

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$depth

The shadow’s depth.

Stringbase

Returns

List

The shadow value.

Throws

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

Requires

spacing

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

Description

Returns the spacing value for a given variant.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

font-family

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

Description

Returns the font stack for a given family.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

line-height

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$style

The font style.

String none
$variant

The variant on the font-size.

Stringbase

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

font-size

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$style

The font style.

String none
$variant

The variant on the font-size.

Stringbase

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

rem

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

Description

Returns the value in rem for a given pixel value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

px

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

Description

Returns the value in pixels for a given rem value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter 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 Nameparameter Descriptionparameter Typeparameter 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

z-index

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

Description

Returns the z-index of the specified element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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

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

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

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) { ... }
View source

Description

Sets the focus ring for an interactive element

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

The size of the border radius on the focus ring.

String none

Requires

visually-hidden

@mixin visually-hidden() { ... }
View source

Description

Used to hide an element visually, but keeping it accessible for accessibility tools.

Parameters

None.

state

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

Description

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

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$interaction-states...

Accepts single or multiple interactions states.

Arglist none

Requires

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 Nameparameter Descriptionparameter Typeparameter 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