Threads foundation
Foundational styles for the threads design system.
Getting started
npm install --save-dev threads-foundation
And to use the foundation in your Sass file
@import 'threads-foundation'
using node-sass-import
or
@import '~threads-foundation/foundation'
using sass-loader
Usage
Animations
@function animation-duration(variant)
Returns the animation duration for a given variant
@param {String} $variant The key for the variant. Defaults to base.
@return {Number} The animation duration for the variant
Example:
.default-component .slow-component .fast-component
@function animation-timing(variant)
Returns the animation timing function for a given variant
@param {String} $variant The key for the variant. Defaults to base.
@return {String} The spacing for the variant
Example:
.default-component
Border radius
@function border-radius()
Returns the default border radius value
@return {Number} The default border radius
Example:
.default-component
Borders
@function border(variant)
Returns the default border radius value
@param {String} $variant The key for the border variant
@return {List} The border value.
Example:
.default-component .another-component
Colors
@function color(name)
Returns the color value for a given color name
@param {String} $name The name of the color
@return {Number} The color value
Example:
.some-basic-text .some-error-text
Forms
@mixin label
Include the default label styles
Example:
.label
@mixin focus
Include the default focus styles
Example:
:focus
Layout
@mixin max-width
Include the default max-width for layouts
Example:
.component
Spacing
@function spacing(style)
Returns the spacing value for a given variant
@param {String} $variant The key for the style. Defaults to base.
@return {Number} The spacing for the variant
Example:
.some-component .some-other-component
Utilities
@function rem(value)
Returns the value in rem for a given pixel value.
@param {Number} $value - The pixel value to be converted.
@return {Number} The converted value in rem.
Example:
.some-component
@function px(value)
Returns the value in pixels for a given rem value.
@param {Number} $value - The rem value to be converted.
@return {Number} The converted value in pixels.
Example:
.some-component
Testing
npm test