Setup

mixins

base

@mixin base() { ... }

Description

Sets sizing and sets up :root css variables.

Parameters

None.

Example

@include base;

Requires

css-vars

@mixin css-vars($palette: null) { ... }

Description

Outputs css variables from a color palette.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$palette

A palette of colors.

Mapnull

Example

:root {
  @include css-vars($_palette-default);
}

// output
:root {
  --color-black: 0, 0, 0;
  --color-white: 255, 255, 255;
  --color-blue-50: 236, 241, 252;
  ect...
}

Requires

Used by

settings

@mixin settings($values: null) { ... }

Description

Overwrites default variabls.

Available Settings

animation-time

border-radius

color

font-sizes

font-weights

media-queries

mods

namespace

opacity

setup

space

transitions

z-index

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$values

A list of values.

Arraynull

Example

@include settings(
  "animation-time" (
    "slow": 5s
  )
);

Requires

variables

_settings

$_settings: () !global;

Description

Variable map for the base settings.

Builder

mixins

child

@mixin child($selectors: ()) { ... }

Description

Outputs correct child elements.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selectors

Input a list of selectors.

Map()

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include component("alert") {
  @include child("container") {
  }
}

// output
.sample-alert-container

Requires

component

@mixin component($component: null, $options: null) { ... }

Description

This is the root component that can output standard selectors and host selectors.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$component

The name of the component.

Stringnull
$options

A list of options.

Listnull

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include component("alert") { }
@include component("alert", "host" true) { }

// output
.sample-alert,
:host(sample-host) { }

Requires

context

@mixin context($selectors: (), $modifiers: null) { ... }

Description

Create consistent context selectors

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selectors

Input a list of selectors.

Map()
$modifiers

Searches modifiers

Listnull

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include context(class("alert"), is "focus") {
  property: value;
}

// output
.sample-alert.is-focus .child-element

Requires

host-modifier

@mixin host-modifier($component: null, $modifier: null) { ... }

Description

Modifier for a host element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$component

Input a component name.

Stringnull
$modifier

Input the modifier name.

Stringnull

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include host-modifier("alert", "success") {
}

// output
:host(sample-alert.mod-success)

Requires

has

@mixin has($modifier: null) { ... }

Description

Outputs the has modifier.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$modifier

Input a modifier name.

Stringnull

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include has("form") {
}

// output
.has-form

Requires

is

@mixin is($modifier: null, $option: "") { ... }

Description

Outputs the is modifier.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$modifier

Input a modifier name.

Stringnull
$option

If the pseudo selector has an option.

List""

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include is("focus") {
}

// output
:focus,
.is-focus

Requires

mod

@mixin mod($modifier: null, $option: null) { ... }

Description

Outputs the mod modifier with a verbose option.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$modifier

Input a modifier name.

Stringnull
$option

Options for a verbose modifier.

Listnull

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include component("alert") {
  @include mod("highlight") {
  }

  @include mod("highlight", "verbose" true) {
  }
}

// output
.sample-alert.-highlight
.sample-alert.sample-alert_highlight

Requires

nested

@mixin nested($selectors: ()) { ... }

Description

Outputs correct nested elements when using inside of a host mixin.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selectors

Input a list of selectors.

Map()

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include component("popover") {
  @include nested("button") {
  }
}

// output
.sample-popover .sample-button

Requires

Color

functions

dynamic-palette

@function dynamic-palette($color, $color) { ... }

Description

Create a list of colors from the base color then turn into a map with explicit keys

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color noneColor none
$color noneString none

Requires

Links

create-palette

@function create-palette($color) { ... }

Description

Create a palette from a base color

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color noneColor none

Requires

Used by

Links

color-diff

@function color-diff($a, $b) { ... }

Description

Defining the difference between 2 colors

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$a

Color value

String none
$b

Color value

String none

Used by

Links

apply-diff

@function apply-diff($color, $diff) { ... }

Description

Apply differences returned from 'color-diff' function to a color in order to retrieve the second color

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color noneColor none
$diff noneNumber none

Used by

Links

color

@function color($values: null, $opacity: 1, $palette: $_palette-default, $css-variable: true) { ... }

Description

Color function that calls to the $_palette-default map by default.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$values

Choose a color from a color palette or enter test case for WCAG.

Listnull
$opacity

Change the opacity of the color.

Number1
$palette

Change which palette the color call is to.

Map$_palette-default
$css-variable

Choose if it's a css variable or rgba value.

Booleantrue

Example

background: color("green-50");
color: color("gray-600", 0.8);

// output
background: rgba(var(--color-green-50), 1);
color: rgba(var(--color-gray-600), 0.8);

Requires

Used by

shadow

@function shadow($color: null, $opacity: 1, $palette: $_palette-default) { ... }

Description

Shadow function that calls to the $_palette-default map by default.

This is a Safari box-shadow fix. Safari currently does not support css variables being used for the box-shadow property.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Choose a color from a color palette.

Stringnull
$opacity

Change the opacity of the color.

Number1
$palette

Change which palette the color call is to.

Map$_palette-default

Example

box-shadow: shadow("charcoal-500");

// output
box-shadow: rgba(41, 62, 64, 1);

Requires

[private] rgba-map

@function rgba-map($palette: null) { ... }

Description

Gets the rgba values from a hex value in a map of colors.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$palette

A palette of colors.

Mapnull

Example

$colors-rgba: rgba-map($palette);

Used by

variables

_palette-core

$_palette-core: (
	"black": #000000,
	"white": #FFFFFF
);

Description

Variable map for the core color palette.

_palette-blue

$_palette-blue: (
	"blue-50": #ECF1FC,
	"blue-100": #C4D3F2,
	"blue-200": #9CB5E8,
	"blue-300": #7497DE,
	"blue-400": #4C79D4,
	"blue-500": #386ACF,
	"blue-600": #193366,
	"blue-700": #203F7B,
	"blue-800": #254990,
	"blue-900": #2B54A5
);

Description

Variable map for the blue color palette.

_palette-charcoal

$_palette-charcoal: (
	"charcoal-50": #E6E9EB,
	"charcoal-100": #D1D6D8,
	"charcoal-200": #A7B0B2,
	"charcoal-300": #7D8A8C,
	"charcoal-400": #536466,
	"charcoal-500": #293E40,
	"charcoal-600": #213234,
	"charcoal-700": #192628,
	"charcoal-800": #111A1C,
	"charcoal-900": #090E10
);

Description

Variable map for the charcoal color palette.

_palette-green

$_palette-green: (
	"green-50": #EAFDF4,
	"green-100": #B7EED8,
	"green-200": #87E0BE,
	"green-300": #57D2A4,
	"green-400": #27C48A,
	"green-500": #0FBD7D,
	"green-600": #0C9763,
	"green-700": #0A8456,
	"green-800": #087149,
	"green-900": #064B2E
);

Description

Variable map for the green color palette.

_palette-gray

$_palette-gray: (
	"gray-50": #FAFAFA,
	"gray-100": #F1F1F1,
	"gray-200": #CBCBCB,
	"gray-300": #B1B1B1,
	"gray-400": #979797,
	"gray-500": #7D7D7D,
	"gray-600": #666666,
	"gray-700": #4A4A4A,
	"gray-800": #2E2E2E,
	"gray-900": #151515
);

Description

Variable map for the gray color palette.

_palette-orange

$_palette-orange: (
	"orange-50": #FDE5D1,
	"orange-100": #FAD7B8,
	"orange-200": #F4BB86,
	"orange-300": #EE9F54,
	"orange-400": #E88323,
	"orange-500": #E57509,
	"orange-600": #B75D08,
	"orange-700": #A05108,
	"orange-800": #894509,
	"orange-900": #723906
);

Description

Variable map for the orange color palette.

_palette-purple

$_palette-purple: (
	"purple-50": #F5E9FF,
	"purple-100": #D9C3F8,
	"purple-200": #BD9DF0,
	"purple-300": #A177E8,
	"purple-400": #8551E0,
	"purple-500": #773EDC,
	"purple-600": #5F32B0,
	"purple-700": #532C9A,
	"purple-800": #472684,
	"purple-900": #3B206E
);

Description

Variable map for the purple color palette.

_palette-red

$_palette-red: (
	"red-50": #FFECF0,
	"red-100": #FCD4DC,
	"red-200": #F4A4B4,
	"red-300": #EC758C,
	"red-400": #E44464,
	"red-500": #DC143C,
	"red-600": #B01030,
	"red-700": #9A0E2A,
	"red-800": #840C24,
	"red-900": #6E0A1E
);

Description

Variable map for the red color palette.

_palette-yellow

$_palette-yellow: (
	"yellow-50": #FFF8F2,
	"yellow-100": #FBEACE,
	"yellow-200": #F7DCAA,
	"yellow-300": #FDCA6A,
	"yellow-400": #F1C774,
	"yellow-500": #EDB950,
	"yellow-600": #BD9340,
	"yellow-700": #A58038,
	"yellow-800": #8D6D2F,
	"yellow-900": #755928
);

Description

Variable map for the yellow color palette.

_palette-intent

$_palette-intent: (
	"negative": #DC143C,
	"neutral": #386ACF,
	"positive": #0FBD7D,
	"warning": #E57509,
	"primary": #59B5A0,
	"default-text": #4A4A4A
);

Description

Variable map for the intent color palette.

_palette-default

$_palette-default: map-collect(
	$_palette-core,
	$_palette-blue,
	$_palette-charcoal,
	$_palette-green,
	$_palette-gray,
	$_palette-orange,
	$_palette-purple,
	$_palette-red,
	$_palette-yellow,
	$_palette-intent
) !global;

Description

Variable map for the default color palette.

Used by

_palette-util

$_palette-util: map-collect(
	$_palette-core,
	$_palette-intent
) !global;

Description

Variable map for the util color palette.

Used by

Helpers

functions

br

@function br($radius: null) { ... }

Description

Border radius function that calls to the $_default-border-radius map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$radius

Choose the size of the border radius.

Stringnull

Example

border-radius: br("sm");

// output
border-radius: 2px;

Requires

b

@function b($color: null, $size: 1px, $palette: $_palette-default) { ... }

Description

Border function to choose a color and size for your border.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Choose a border color from the color palette or a custom color.

Stringnull
$size

Choose the border thickness.

Number1px
$palette

Change which palette the color call is to.

Map$_palette-default

Example

border: b("green-500");
border-top: b(#666666, 5px);

// output
border: rgba(var(--color-green-500), 1) 1px solid;
border-top: #666666 5px solid;

Requires

Used by

box

@function box($values: null) { ... }

Description

The box function mimics the normal css shorthand for writting padding and margin but can be used to call the the spacing sizes from the $_default-space map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$values

Choose space values.

Listnull

Example

margin: box("sm" "md" to-rm(1px));

// output
margin: 0.5rem 0.75rem 0.06rem;

Requires

class

@function class($selector: null) { ... }

Description

Call to a predefined list of class names in the $_namespace-component map but can also handle a custom name.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector

Choose a selector name.

Stringnull

Example

#{class("button")} { }

// output
.sample-btn { }

Throws

  • A selector needs to be passed in.

Requires

Used by

f

@function f($size: null, $family: default) { ... }

Description

Font function that selects font sizes from $_font-sizes and the font family from $_font-family.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Choose a font size.

Stringnull
$family

Choose a font family.

Stringdefault

Example

font: f("md");
font: f("md", "semibold");

// output
font: 1rem "SourceSansPro", "Helvetica Neue", "Helvetica", Arial, sans-serif;
font: 1rem "SourceSansProSemibold", "Helvetica Neue", "Helvetica", Arial, sans-serif;

Requires

fs

@function fs($size: null) { ... }

Description

Font size function that selects font sizes from $_font-sizes.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Choose a font size.

Stringnull

Example

font-size: fs("md");

// output
font-size: 1rem;

Requires

Used by

ff

@function ff($family: default) { ... }

Description

Font family function that selects the font family from $_font-family.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$family

Choose a font family.

Stringdefault

Example

font-family: ff("semibold");

// output
font-family: "SourceSansProSemibold", "Helvetica Neue", "Helvetica", Arial, sans-serif;

Requires

Used by

m

@function m($margin: null) { ... }

Description

If you want a shorter space function call.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$margin

Choose a margin value.

Stringnull

Example

margin: m("sm");

// output
margin: 0.5rem;

Requires

o

@function o($lightness: null) { ... }

Description

Opacity function that calls to the $_default-opacity map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$lightness

Choose an opacity setting.

Stringnull

Example

opacity: o("lighter");

// output
opacity: 0.5;

Requires

p

@function p($padding: null) { ... }

Description

If you want a shorter space function call.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$padding

Choose a padding value.

Stringnull

Example

padding: p("sm");

// output
padding: 0.5rem;

Requires

space

@function space($value: null, $options: null) { ... }

Description

Spacing function that calls to the $_default-space map.

This is primarily used for margin and padding but can be used for a variety of css properties.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Choose a space value.

Stringnull
$options

Options to modify the functions output.

Listnull

Example

padding: space("sm");

// output
padding: 0.5rem;

Requires

Used by

time

@function time($time: null) { ... }

Description

Time function that calls to the $_default-animation-time map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$time

Choose the speed.

Stringnull

Example

transition-duration: time("fast");

// output
transition-duration: 0.1s;

Requires

Used by

  • [function] t

to-rem

@function to-rem($value: null, $base: 16px) { ... }

Description

The basic width and height output.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Value to set to rem.

Numbernull
$base

Base size for the browser.

Number16px

Example

font: to-rem(16px);

// output
font: 1rem;

Requires

t

@function t($props: null, $transition: null, $time: time("base")) { ... }

Description

Transition function that calls to the $_default-transitions map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$props

The properties that need a transition applied.

Stringnull
$transition

The transition being applied.

Stringnull
$time

The time being applied.

Stringtime("base")

Example

t: transition(opacity, "link");
t: transition(opacity, "shift", "slow");

// output
transition: opacity 0.3s cubic-bezier(0.075, 0.820, 0.165, 1.000);
transition: opacity 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);

Requires

z

@function z($layer: null) { ... }

Description

Z-index function that calls to the $_default-z-index map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$layer

Choose a z-index.

Stringnull

Example

z: z-index("dropdown");

// output
z-index: 1000;

Requires

mixins

ellipsis

@mixin ellipsis($args: null) { ... }

Description

Outputs the basic ellipsis with a few options.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$args

Can handle three arguments: max-width min-width width.

Listnull

Example

@include ellipsis;
@include ellipsis(width 100%);

focus-outline

@mixin focus-outline($outline: none) { ... }

Description

Resets the focus state of an element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$outline

Resets the outline by default.

Stringnone

Example

@include focus-outline;

placeholder

@mixin placeholder($color: #92201A) { ... }

Description

Outputs input and textarea placeholder properties.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Input a color value.

String#92201A

Example

@include placeholder(color("black"));

media

@mixin media($name: null) { ... }

Description

Placeholder for media queries using the $_default-media-queries map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Choose a media size.

Stringnull

Content

This mixin allows extra content to be passed (through the @content directive).

Example

@include media("for-phone-only") {
}

Requires

position

@mixin position($position: null, $args: null) { ... }

Description

Shorthand positioning for the position property.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$position

Choose a position value.

Stringnull
$args

A list of properties to set: top right bottom left and zero.

Listnull

Example

@include position(absolute, top 0);

Used by

absolute

@mixin absolute($args: null) { ... }

Description

Leverages the position mixin to use shorthand for the position property.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$args

A list of properties to set: top right bottom left and zero.

Listnull

Example

@include absolute(top 0 left 0);

Requires

Used by

fixed

@mixin fixed($args: null) { ... }

Description

Leverages the position mixin to use shorthand for the position property.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$args

A list of properties to set: top right bottom left and zero.

Listnull

Example

@include fixed(zero);

Requires

relative

@mixin relative($args: null) { ... }

Description

Leverages the position mixin to use shorthand for the position property.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$args

A preoperty to set: float.

Listnull

Example

@include relative(float left);

Requires

sticky

@mixin sticky($args: null) { ... }

Description

Leverages the position mixin to use shorthand for the position property.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$args

A list of properties to set: top right bottom left and zero.

Listnull

Example

@include sticky(top 0 left 0 right 0);

Requires

pseudo

@mixin pseudo($args: null) { ... }

Description

Shorthand for a pseudo element using the position property.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$args

A list of properties to set: top right bottom left and zero.

Listnull

Example

@include pseudo(top 0 left 0 bottom 0);

Requires

size

@mixin size($width: null, $height: $width) { ... }

Description

The basic width and height output.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width

Set the width value.

Numbernull
$height

Set the height value but will use the $width as it's base.

Number$width

Example

@include size(2rem);

// output
width: 2rem;
height: 2rem;

Used by

Placeholders

mixins

clearfix

@mixin clearfix() { ... }

Description

Clearfix placeholder.

Parameters

None.

Example

element {
  @include clearfix;
}

reset-list

@mixin reset-list() { ... }

Description

Reset list placeholder.

Parameters

None.

Example

ul {
  @include reset-list;
}

Support

mixins

[private] component-setup

@mixin component-setup($component: "", $options: ()) { ... }

Description

Sets up the base variables for a new component.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$component

The component name.

String""
$options

Any options that need to be applied.

Map()

Example

@include component-setup("alert", ("host": true));

Requires

Used by

[private] define-modifiers

@mixin define-modifiers($local: ()) { ... }

Description

This will update a map of modifiers that are turned off by default.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$local

A list of updated mod settings from $_mods.

Map()

Example

@include define-modifiers($_mods);

Requires

Used by

[private] toggle

@mixin toggle($options: ()) { ... }

Description

Toggle options inside of the $_setup map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$options

Toggle a group of options.

Map()

Example

@include toggle((
  "child": true,
  "default-selector-stored": get-setup("default-selector")));

Requires

Used by

functions

[private] get-setup

@function get-setup($value: null) { ... }

Description

A get-map function that targets the specific map of $_setup.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The desired value to get from the map.

Stringnull

Example

@if get-setup("host")

// returns
false

Requires

Used by

[private] has-selector

@function has-selector($selector: null) { ... }

Description

Checks to see if the selector exists in a map

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector noneStringnull

Requires

Used by

[private] luminance

@function luminance($color: null) { ... }

Description

Returns the luminance of $color as a float (between 0 and 1) 1 is pure white, 0 is pure black

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color

Colornull

Returns

Number

Used by

Links

[private] map-collect

@function map-collect($maps: null) { ... }

Description

A function that compiles a group of maps into one map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$maps

A group of maps

Mapnull

Example

$map-group: map-collect(
  $map-1,
  $map-2
);

Used by

[private] set-setup

@function set-setup($property: null, $value: null) { ... }

Description

A map-merge function that targets the specific map of $_setup.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$property

The property that needs to be updated.

Stringnull
$value

The value that is being applied.

Stringnull

Example

set-setup("host", true)

Requires

Used by

[private] strip-selector

@function strip-selector($selector: null) { ... }

Description

Strip the selector of a class or ID

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$selector noneStringnull

Used by

strip-unit

@function strip-unit($number: null) { ... }

Description

Strip unit from a number value.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$number

Number value.

Numbernull

Example

strip-unit(18px)

// output
18

Requires

Used by

[private] update

@function update($map: null, $values: null) { ... }

Description

Update a values in a map as a single call.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$map

The desired map to update.

Mapnull
$values

The list of items to be updated.

Listnull

Example

$map: (
 "key1": false,
 "key2": "value"
);
$map: update($map, "key1" true "key2" "updated value")

// returns
$map: (
 "key1": true,
 "key2": "updated value"
);

Used by

Util Classes

mixins

util-colors-background

@mixin util-colors-background() { ... }

Description

Builds background color util classes.

Parameters

None.

Requires

util-colors-border

@mixin util-colors-border() { ... }

Description

Builds border color util classes.

Parameters

None.

Requires

util-colors-border

@mixin util-colors-border() { ... }

Description

Builds text color util classes.

Parameters

None.

Requires

util-display

@mixin util-display() { ... }

Description

Builds display util classes.

Parameters

None.

Requires

util-flex

@mixin util-flex() { ... }

Description

Builds flex util classes.

Parameters

None.

Requires

util-float

@mixin util-float() { ... }

Description

Builds float util classes.

Parameters

None.

Requires

util-font

@mixin util-font() { ... }

Description

Builds font util classes.

Parameters

None.

Requires

util-position

@mixin util-position() { ... }

Description

Builds display util classes.

Parameters

None.

Requires

util-screenreader

@mixin util-screenreader() { ... }

Description

Builds screen reader util classes.

Parameters

None.

Requires

util-sizing

@mixin util-sizing() { ... }

Description

Builds sizing util classes.

Parameters

None.

Requires

util-spacing

@mixin util-spacing() { ... }

Description

Builds spacing util classes.

Parameters

None.

Requires

util-static

@mixin util-static() { ... }

Description

Builds static util classes.

Parameters

None.

Requires

util-text-align

@mixin util-text-align() { ... }

Description

Builds text align util classes.

Parameters

None.

Requires

util-visibility

@mixin util-visibility() { ... }

Description

Builds visibility util classes.

Parameters

None.

Requires

util-z-index

@mixin util-z-index() { ... }

Description

Builds z-index util classes.

Parameters

None.

Requires

Variables

variables

_contexts

$_contexts: (
	"all": true,
	"sample-context": (
		"all": false,
		"sample-context": false
	)
) !global;

Description

Variable map for context. If all is true, every context will render out based on it's level.

Used by

_default-animation-time

$_default-animation-time: (
	"base": 0.3s,
	"fast": 0.1s,
	"slow": 0.5s
) !global;

Description

Variable map for animation times.

Used by

_default-border-radius

$_default-border-radius: (
	"xs": 1px,
	"sm": 2px,
	"md": 3px,
	"lg": 4px
) !global;

Description

Variable map for border radiuses.

Used by

_default-media-queries

$_default-media-queries: (
	"for-phone-only": "(max-width: 599px)",
	"for-tablet-portrait-up": "(min-width: 600px)",
	"for-tablet-landscape-up": "(min-width: 900px)",
	"for-small-desktop-up": "(min-width: 1200px)",
	"for-desktop-up": "(min-width: 1300px)",
	"for-big-desktop-up": "(min-width: 1800px)"
) !global;

Description

Variable map for media queries.

Used by

_default-opacity

$_default-opacity: (
	"visible": 1,
	"light": 0.7,
	"lighter": 0.5,
	"lightest": 0.3,
	"hidden": 0
) !global;

Description

Variable map for opacity.

Used by

_default-space

$_default-space: (
	"pf": to-rem(1px),
	"base": to-rem(4px),
	"xs": to-rem(2px),
	"sm": to-rem(8px),
	"md": to-rem(16px),
	"lg": to-rem(24px),
	"xl": to-rem(32px)
) !global;

Description

Variable map for spacing.

Used by

_default-transitions

$_default-transitions: (
	"link": cubic-bezier(0.075, 0.820, 0.165, 1.000),
	"shift": cubic-bezier(0.770, 0.000, 0.175, 1.000)
) !global;

Description

Variable map for transition animations.

Used by

_default-z-index

$_default-z-index: (
	"below": -1,
	"above": 1,
	"navbar": 980,
	"dropdown-backdrop": 990,
	"dropdown": 1000,
	"sticky": 1020,
	"fixed": 1030,
	"modal-backdrop": 1040,
	"modal": 1050,
	"popover": 1060,
	"tooltip": 1070
) !global;

Description

Variable map for z-indexs.

Used by

_font-sizes

$_font-sizes: (
	"3xl": to-rem(24px),
	"2xl": to-rem(20px),
	"xl": to-rem(18px),
	"lg": to-rem(16px),
	"md": to-rem(14px),
	"sm": to-rem(12px),
	"xs": to-rem(10px),
	"2xs": to-rem(8px),
	"default": to-rem(16px)
) !global;

Description

Variable map for font sizes.

Used by

_font-family

$_font-family: (
	"regular": "\"SourceSansPro\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif",
	"light": "\"SourceSansProLight\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif",
	"semibold": "\"SourceSansProSemibold\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif",
	"bold": "\"SourceSansProBold\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif",
	"default": "\"SourceSansPro\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif"
) !global;

Description

Variable map for font family/weight.

Used by

_mods

$_mods: (
	"all": true,
	"sample-component": (
		"all": false,
		"sample-mod": false
	)
) !global;

Description

Variable map for class modifiers. If all is true, every modifier will render out based on it's level.

Used by

_namespace-component

$_namespace-component: (
	"util": ".util"
) !global;

Description

Variable map for predefined component names.

Used by

_namespace-mod

$_namespace-mod: (
	"is": ".is",
	"has": ".has",
	"mod": "."
) !global;

Description

Variable map for predefined modifier names.

Used by

[private] _pseudo-selector

$_pseudo-selector: (
	"active": "active",
	"checked": "checked",
	"disabled": "disabled",
	"empty": "empty",
	"enabled": "enabled",
	"first-child": "first-child",
	"first-of-type": "first-of-type",
	"focus": "focus",
	"hover": "hover",
	"in-range": "in-range",
	"invalid": "invalid",
	"last-child": "last-child",
	"last-of-type": "last-of-type",
	"link": "link",
	"only-of-type": "only-of-type",
	"only-child": "only-child",
	"optional": "optional",
	"out-of-range": "out-of-range",
	"read-only": "read-only",
	"read-write": "read-write",
	"required": "required",
	"root": "root",
	"target": "target",
	"valid": "valid",
	"visited": "visited"
) !global;

Description

Variable map for pseudo selector names.

Used by

[private] _pseudo-selector-option

$_pseudo-selector-option: (
	"lang": "lang",
	"nth-child": "nth-child",
	"nth-last-child": "nth-last-child",
	"nth-last-of-type": "nth-last-of-type",
	"nth-of-type": "nth-of-type"
) !global;

Description

Variable map for pseudo selector names that have options.

Used by

  • [mixin] is

[private] _setup-prefixes

$_setup-prefixes: (
	"prefix": "teq-",
	"child-prefix": "-",
	"modifier-prefix": "_"
) !global;

Description

Variable map for prefix namespace settings.

Used by

[private] _setup-namespace

$_setup-namespace: (
	"current-component": "",
	"default-selector": "",
	"default-selector-stored": "",
	"host-element": "",
	"host-selector": "",
	"host-selector-stored": "",
	"mod-selector": "",
	"mod-selector-stored": ""
);

Description

Variable map for setup namespaces.

Used by

[private] _setup-toggles

$_setup-toggles: (
	"host": false,
	"child": false,
	"nested": false,
	"has": false,
	"is": false,
	"mod": false,
	"context": false,
	"cssvars": true,
	"debug": false,
	"verbose-mod": false
);

Description

Variable map for setup toggles.

Used by

[private] _setup

$_setup: map-collect(
	$_setup-namespace,
	$_setup-toggles,
	$_setup-prefixes
) !global;

Description

Variable map that compiles other setup maps.

Requires

Used by

WCAG

functions

[private] wcag

@function wcag($values: null, $palette: null) { ... }

Description

Checks WCAG contrast ratio

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$values noneListnull
$palette noneMapnull

Example

$wcag-contrast: wcag-contrast($values, $palette);

Requires

Used by

[private] review-hex

@function review-hex($color: null, $palette: null) { ... }

Description

Review hex from input.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Color to search for.

Colornull
$palette

A palette of colors.

Mapnull

Example

get-hex("green-500")

Requires

Used by

[private] wcag-contrast

@function wcag-contrast($color-light, $color-dark) { ... }

Description

WC3 contrast formula.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color-light noneNumber none
$color-dark noneNumber none

Example

$wcag-contrast: wcag-contrast($color-luminance, $contrast-luminance);

Used by

[private] wcag-font-size

@function wcag-font-size($value: null, $wcag-value: null) { ... }

Description

Check font size.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value noneValuenull
$wcag-value noneNumbernull

Example

wcag-font-weight(18px)

Requires

Used by

[private] wcag-font-weight

@function wcag-font-weight($weight: null, $wcag-value: null) { ... }

Description

Check font weight.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$weight noneValuenull
$wcag-value noneNumbernull

Example

wcag-font-weight(bold)
wcag-font-weight(700)

Used by