Accoutrement 4.0.4

Timing Maps: Durations & Delays

Manage all your duration & delay patterns in a single place - with explicitly documented relationships.

$times

scss 
$times: () !default;

A variable storing the map of all times globally available on your project. Any times added to the $times map will be accessible to the time() function by default.

Define each time with a name, base-value, and optional adjustments…

$times: (
  'fast': <base-value>,
  'slow': <base-value> ('<function-name>': '<arguments>'),
  // will return: function-name($base-value, $arguments...)
);
  • Name your times anything – from abstractions like fast, to concrete patterns like button-background-hover.
  • Base-values can be CSS-ready times, or references other times in the map.
  • Adjustments are a nested map of functions and arguments, for adjusting times directly in your palette.

Used By

@mixin add-times()

@function time()

Access a named time in your $times map.

Since 1.0.0:

  • NEW: Accepts $do map argument, for on-the-fly adjustments
  • NEW: Accepts $source map argument, for custom source-palette

Parameters & Return

$time: (string)

The name of a time in your configuration

$do: null (map | null)

A map of function/ratio adjustments to run on the returned value

$source: $times (map)

Optional Accoutrement-format map of times to use as the origin palette

@return (length)

The calculated length of time

Requires

@function get() [private]

@mixin add-times()

Merge individual time maps into the global $times variable, in case you want to define times in smaller groups such as duration-times, delay-times, etc before merging them into a single global times-palette.

Parameters & Output

$maps: (map...)

Pass any number of maps to be merged.

{CSS output} (code block)

  • An updated global $times variable, with new maps merged in.

Requires

@function multi-merge()

$times

@function compile-times()

Compile all the tokens in a time map. This is particularly useful for exporting a static version of the token map with all the Accoutrement syntax removed – e.g. for use in javascript or documentation.

Since 4.0.0:

  • NEW: Provides an export option for time token maps

Parameters & Return

$map: $times (map)

The map to be compiled

$source: $times (map | null)

A map of reference tokens that can be used for resolving times. (defaults to the global $times map)

@return (map)

A copy of the original map, with all token values resolved

Requires

@function map-compile-with()