foundation/layout
functions
layout-width
@function layout-width($name) { ... }
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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.
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
color-multiply
@function color-multiply($foreground, $background) { ... }
View sourceDescription
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 sourceDescription
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.
Requires
- [function]
available-names
- [variable]
ms-high-contrast-color-data
- [variable]
ms-high-contrast-color-data
duration
@function duration($variant) { ... }
View sourceDescription
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 miliseconds).
Throws
Duration variant
#{$interpolated-value}
not found. Available variants: #{available-names($duration-data)}
Requires
- [function]
available-names
easing
@function easing($variant) { ... }
View sourceDescription
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 sourceDescription
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.
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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
- [function]
spacing
- [mixin]
state
- [mixin]
state
px
@function px($value) { ... }
View sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
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 sourceDescription
Used to create the shimmer effect of skeleton components
mixins
focus-ring
@mixin focus-ring($size) { ... }
View sourceDescription
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 |
Requires
state
@mixin state($interaction-states......) { ... }
View sourceDescription
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
layout-flex-fix
@mixin layout-flex-fix() { ... }
View sourceDescription
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 sourceDescription
Returns a safe-area-inset for iPhone X screen obtrusions.
Parameters
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 |