Accoutrement Changelog

4.0.5 - 11/07/24

• 🐛 BUGFIX: Address Sass deprecation warnings
• 🏠 INTERNAL: Upgrade dev dependencies

4.0.4 - 12/14/22

• 🏠 INTERNAL: Remove documentation from npm package
• 🏠 INTERNAL: Upgrade dev dependencies

4.0.3 - 07/20/22

• BUGFIX: Fixed a bug with tokens.get() that didn’t allow per-property inline functional adjustments – #117

4.0.2 - 07/18/22

• BUGFIX: Fixed a bug with tokens.get() memorization – #112
• INTERNAL: Upgrade dev dependencies.
• Tokens:
  • NEW: Add $ignore-cache parameter to tokens.get() function, in order to override the cached value of a token.
• Sass Utilities:
  • NEW: Removed unnecessary string length checks in the split() function.

4.0.1 - 03/28/22

• INTERNAL: Upgrade dev dependencies.
• DOCS: Update modules list – #111

4.0.0 - 03/02/22

This is a major update, moving over to Sass modules, and removing some features that no longer seem necessary.

In addition to fixing a bug with the handling of non-alias # symbols, and implementing deep map merges where appropriate, we also added some functionality around compiling maps for export, and working with different color palettes.

• BREAKING: Requires Sass modules, and other recent features of Dart Sass. Legacy versions of Sass (Node & Ruby) are no longer supported.

• BREAKING: The old “init” module, which provided lightweight browser normalization, is no longer included. We now recommend using CSS Remedy. (Note: If making the switch from Accoutrement/Init to CSS Remedy, you may need to reset the margin and padding of block elements to remove unwanted vertical space. And SVGs and other media may stack instead of displaying inline since CSS Remedy sets these to display: block by default.)

• BREAKING: The old “core” module has been broken into individual modules for utilities (extending several Sass modules), tokens (the map syntax parser), variables (converting Sass variables & maps to CSS custom properties), and ratios (for typographic scales and layout aspect ratios).

• BREAKING: Map multi-merge() utility and all add-* functions for adding one or more token maps (e.g. add-sizes(), add-colors(), etc) now perform a deep merge of the token maps. Previously a shallow merge was performed, which could result in removing nested values from maps.

• INTERNAL: Limit files included in npm package.

• INTERNAL: Remove documentation static-site from Accoutrement repository.

• INTERNAL: Switch from Travis CI to GitHub Actions for CI.

• INTERNAL: Upgrade dev dependencies.

• Animate:

  • NEW: compile-* functions provide an export option for respective token maps (see: compile-changes(), compile-easing(), and compile-times()).
  • NEW: Named default easings are now available as individual variables, (without the _ prefix that is applied in token maps).

• Color:

  • NEW: compile-colors() function provides an export option for color token maps.
  • NEW: with-colors() mixin allows the overriding of the global color palette for a section of contents.

• Sass Utilities:

  • NEW: These functions are now available directly, as well as being registered in the map syntax.
  • NEW: multi-merge() function for merging multiple maps into a single map.
  • NEW: replace() function for replacing a substring inside a larger string, or replacing the entirety of a string.
  • NEW: interpolate() function returns a string with interpolated values replacing %s placeholders in a format string.
  • NEW: split() function for splitting a string into a list of strings, using the same logic as JavaScript’s split() method.
  • NEW: trim() function trims whitespace from the start and end of a string.

• Variables:

  • NEW: ident() function adds -- and an optional prefix to any string, in order to generate a custom property identifier.
  • NEW: custom-props() mixin generates custom properties for every key/value pair in a map.

• Tokens:

  • NEW: A module just for the custom map syntax parser & function registration.
  • NEW: map-compile() and map-compile-with() functions for compiling tokens in Accoutrement maps and formatting them for static exports.
  • BREAKING: The $functions map no longer accepts alias references or any other aspects of the token syntax.
  • BREAKING: Ratios are no longer first-class adjustments (like functions) in the token syntax.
  • BREAKING: tokens.$handle-missing-keys defaults to null, and no longer supports the legacy silent option.
  • BREAKING: get-token() is renamed get(), and only accepts bare token names (no # prefix), including the outer->inner nested token syntax.
  • NEW: The new compile() function provides direct access to parse & resolve an arbitrary token value (including aliases with # prefix), rather than calling a specific token by name.
  • NEW: All the built-in Sass module functions are registered by default, as <module-name>.<function-name>.
  • NEW: has-token() function checks a map to see if the given token is defined, and supports the outer->inner nested token syntax.
  • NEW: plus() function adds two values together in Accoutrement maps.
  • NEW: minus() function subtracts one value from another in Accoutrement maps.
  • NEW: times() function multiplies two values together in Accoutrement maps.
  • NEW: divide() function divides two values in Accoutrement maps.
  • NEW: modulo() function divides two values in Accoutrement maps and returns the remainder.

• Type:

  • NEW: compile-fonts() function provides an export option for font token maps.
  • NEW: The default value for $content in pseudo element mixins is an empty string.

• Ratios:

  • NEW: compile-ratios() function provides an export option for ratio token maps.
  • NEW: Built-in named ratios are now available as individual variables, (without the _ prefix that is applied in token maps).
  • NEW: is-ratio() function can be used to type-check ratios, including ratio tokens.

• Scale:

  • NEW: compile-sizes() function provides an export option for size token maps.
  • NEW: scale() function applies a modular scale to any value, allowing you to move up or down the scale any number of steps.

• Layout:

  • BREAKING: Removed global-box-sizing.
  • BREAKING: Removed clearfix.
  • BREAKING: Removed fluid-ratio.
  • BREAKING: Removed position. Can achieve the majority of functionality in CSS using Inset.

3.0.1 - 03/01/21

• INTERNAL: Upgrade dev dependencies.
• DOCS: Fix changelog typo.

3.0.0 - 02/22/21

• BREAKING: Change to get-token() return value when the key path cannot be resolved, and $handle-missing-keys is unset or silent: Maps along the missing key path are no longer interpolated into the returned string. This is part of the fix for #49. Use $handle-missing-keys for more precise missing subkey behavior. (Thanks to John Crim @johncrim)
• NEW/BREAKING: Font maps accept display key, which can be used to set font-display property for importing web-fonts. (thanks to André Schließer @schliesser)
• BUGFIX (#49): Using get-token() to resolve a missing key no longer errors when using dart-sass and $handle-missing-keys is unset or silent. Instead, the unresolved path is returned. (Thanks to John Crim @johncrim)
• BUGFIX (#61): Using get-token() to obtain a 2nd level or deeper submap no longer causes a fatal error when using dart-sass and $handle-missing-keys is null, warn, or error. (Thanks to John Crim @johncrim)
• INTERNAL: Run unit tests with dart-sass (in addition to node-sass, which was used prior). (Thanks to John Crim @johncrim)
• INTERNAL: Upgrade dev dependencies.
• DOCS (#53): Use html rather than :root for examples.
• DOCS: Wrong parameter name in contrast-ratio() function docs.

2.2.0 - 09/08/20

• NEW: (#41) Global $handle-missing-keys allows you to control exactly what should happen when a key look-up fails. The default silent provides backwards-compatible silent-failure. Other options include:
  • null: get-token() will return null, similar to Sass map.get()
  • warn: get-token() will return null, and also throw a warning
  • error: get-token() will throw an error if the value is not found
• NEW: \\ (an escaped backslash) can be used to ignore (\\#not-an-alias) or end (#alias\\not-part-of-alias) a # reference
• INTERNAL: (#41) Major performance improvements to the token look-up algorithm

Huge thanks to James Camilleri (@jcamilleri13) for all the improvements here.

2.1.4 - 06/30/20

• DOCS (#54): Fix broken links in docs
• INTERNAL: Upgrade dev dependencies.

2.1.3 - 01/06/20

• Core:
  • BUGFIX (#46): Fixes register-function() usage with Sass module syntax

2.1.2 - 08/26/19

• Upgrade dev dependencies.
• Core:
  • BUGFIX (#36): Fixes an issue with quote() in dart-sass.
  • BUGFIX (#38): Fixes an issue with false values in maps.

2.1.1 - 01/04/19

• Core:
  • BUGFIX (#31): Fixes an issue with longhand map memoization

2.1.0 - 12/20/18

• Plugin: Color
  • NEW: contrast(), contrasted(), var-contrast(), and var-contrasted() provide access to the lowest accessible contrast value, as well as than the (default) maximum contrast value. Pass a valid contrast ratio (0-21) or WCAG standard (aaa, aa, aa-large) to set a cutoff ratio, and return the minimum accessible color
  • NEW: shades-of() generates a range of light and dark color-shades to help build accessible themes based on a few origin colors
  • NEW: stripe-colors() function and mixin generate a color-stops or a full striped gradient background. This is useful for viewing the result from shades-of()

2.1.0-beta.1 - 12/13/18

• Plugin: Color
  • NEW: var-contrast() and var-contrasted() provide CSS variable parallels to contrast() and contrasted()
  • NEW: User-defined contrast defaults (contrast-light and contrast-dark) can be defined with or without the _ private-color prefix
  • NEW: Contrast-related functions and mixins provide a smart second light-or-dark default option when only one is defined (previously an error)

2.0.0 - 12/05/18

The 2.0 release is primarily focused on support for CSS Custom Properties (aka CSS Variables), and access to nested-map tokens with #outside->inside syntax. We’ve also added private tokens (_token), and various tools for token-inspection. All factory-default tokens (contrast-colors, named ratios, etc) are now marked as private, and will need to be called with a _ prefix. See the full details below.

Thanks to Joel Schou (@joelschou) for extensive contributions, designing and testing several of these features.

• Core:
  • BREAKING: Explicit value/adjustments maps require a '%value' key (used to be named 'value'), in order to avoid possible conflicts or false-positives
  • NEW (BREAKING alpha.1): all nested-map token references (using ->) must be absolute paths from the map root, rather than assuming the most closely related sibling or ancestor value
  • BUGFIX (from alpha.1): Major improvements to compile time when parsing -> syntax

2.0.0-alpha.1 - 10/29/18

• Core:
  • NEW: $adjust-query-overlap (max | min | false) allows you to control if and how media-queries are adjusted to avoid overlap between min/max queries (thanks to @joelschou)
  • NEW: Support for integrating accoutrement tokens & CSS variables with tokens--(), token--(), var-token(), and plugin-specific shortcuts
  • BREAKING: Token names starting with _ or - are considered “private” to Sass, and will not be output when auto-generating CSS (variables, font-names, etc.)
  • BREAKING: Default ratio tokens are now prefixed with _ (search/replace e.g. minor-third -> _minor-third) to avoid CSS-variable output
  • NEW: is-private-token() and is-alias-for() are now public functions, to help with token-inspection
  • BREAKING: Support for nested-map tokens with -> syntax, both in #hash->references and get-token($source, 'function->calls') (thanks to @joelschou)
• Plugin: Animate
  • BREAKING: Default easing tokens are now prefixed with _ (search/replace e.g. in-out-quad -> _in-out-quad) to avoid CSS-variable output
  • NEW: Support for easing CSS variables with easing--(), ease--(), and var-ease()
  • NEW: Support for time CSS variables with times--(), time--(), and var-time()
  • NEW: Support for change CSS variables with changes--(), change--(), and var-change()
• Plugin: Color
  • BREAKING: _contrast-light and _contrast-dark colors are used for mixing tint() and shade(), with optional $light/$dark override parameters (thanks to @joelschou)
  • NEW: Default _contrast-light and _contrast-dark provided, set _contrast-light/dark in $colors to override
  • NEW: Support for CSS Variables with colors--(), color--(), and var-color()
• Plugin: Layout
  • BREAKING: Default ratio tokens are now prefixed with _, see core for details
• Plugin: Scale
  • BREAKING: Default ratio tokens are now prefixed with _, see core for details
  • NEW: Support for size CSS Variables with sizes--(), size--(), and var-size()
  • NEW: Support for ratio variables with ratios--(), ratio--(), and var-ratio()
• Plugin: Type
  • BREAKING: Non-map fonts are interpreted as font-stacks
  • BREAKING: Normalized font-data uses proper name-quotation, and ignores missing or private names/stacks
  • BREAKING: import-webfonts() no longer imports private fonts, but will import a direct alias of the private font
  • NEW: import-webfonts() accepts $source parameter
  • NEW: Support for CSS Variables with fonts--(), font--(), and var-font()

1.0.1 - 09/08/18

• Core:
  • BUGFIX: Typos, including the cinema ratio spelling (thanks to @joelschou)
  • BUGFIX: Improved consistency of nested-map parser (thanks to @joelschou)

1.0.0 - 08/08/18

• The stable 1.0 release is identical to -beta.3, see change details below

1.0.0-beta.3 - 08/03/18

• Plugin: Scale
  • BUGFIX: size() function removes quotes from string (calc) sizes

1.0.0-beta.2 - 07/27/18

• Core:
  • NEW: ratio() function accepts $source argument, for passing in a custom source map
  • NEW: Improved error-handling and messages
  • NEW: Added str-trim and str-split aliases in addition to the existing trim and split
• Plugin: Animate
  • NEW: ease(), time(), and change() functions all accept $source argument, for passing in a custom source map
• Plugin: Layout
  • NEW: break() function accepts $source argument, for passing in a custom source map
  • NEW: break() function accepts $scale boolean, to turn off access to the scale-plugin $sizes map
  • NEW: fluid-ratio() function and mixin both accept $source argument, for passing in a custom source map
• Plugin: Scale
  • BREAKING: negative() function and square() mixin both accept $do argument for on-the-fly adjustments – replacing the old $units… variable argument. Non-map $do values are converted to ('convert-units': $do) before processing, to provide a shortcut for unit-conversions. negative('root', 'cm') will continue to work, but negative('root', 'em', 10px) should be changed to negative('root', 'em' 10px) (with all unit args in a single list)
  • NEW: size()/negative() functions and square() mixin accept $source argument, for passing in a custom source map
• Plugin: Type
  • NEW: font()/font-family() functions and font-family()/font-face() mixins accept $source argument, for passing in a custom font-source map

1.0.0-beta.1 - 07/18/18

• NEW: Add _index.scss to simplify default “tools” import (core + plugins) in Eyeglass: @import 'accoutrement';
• Core:
  • NEW: get-token() and ratio() functions accept $do argument, for on-the-fly adjustments
  • NEW: trim($string) utility now available in map-syntax, to trim white-space from the start and end of a string
  • NEW: str-replace() utility now forces arguments to string-type when appropriate, allowing e.g. calc(16px + 1vw) ('str-replace': 1vw 2vw)
• Plugin: Animate
  • NEW: change(), time(), and ease() functions all accept $do arg for on-the-fly adjustments
• Plugin: Color
  • BREAKING: color() functions accept $do arg for on-the-fly adjustments –  before existing $palette argument
  • BREAKING: $palette argument renamed $source for consistency across plugins
• Plugin: Layout
  • NEW: break() function accept $do arg for on-the-fly adjustments
• Plugin: Scale
  • BREAKING: size() function $units… variable argument has been replaced with $do map argument, for flexible on-the-fly adjustments. Non-map $do values are converted to ('convert-units': $do) before processing, to provide a shortcut for unit-conversions. size('root', 'cm') will continue to work, but size('root', 'em', 10px) should be changed to size('root', 'em' 10px) (with all unit args in a single list)
• Plugin: Type
  • BREAKING: import-webfonts() mixin no longer accepts any arguments
  • NEW: font() function provides access to parsed font-data
  • NEW: 'trim' string helper strips whitespace from the start and end of a string
  • NEW: Improved font-normalization handles more font-map edge-cases
  • NEW: Font-stacks can be written as comma-delimited strings, e.g. 'Helvetica Neue, Helvetica, Arial' or 'Helvetica Neue, Helvetica, Arial'

0.1.0 - 07/12/18

• BREAKING: All modules now use a shared map syntax, with explicit #tag references and the option for explicit value/adjustment maps.
• NEW: Merges all existing Accoutrement plugins
• Core:
  • BREAKING: Internal map-reference now uses #tag syntax
  • NEW: Generic map-syntax, access, and parsing tools are shared by all plugins, and can be used with un-specified data types
  • NEW: Improved function-registration options
  • NEW: Math, modular-scale, string, and list utilities combined from the individual plugins
• Plugin: Animate:
  • A totally new plugin!
• Plugin: Color:
  • BREAKING: See tokens syntax changes
  • BREAKING: Removed merge-colors() function
• Plugin: Layout:
  • BREAKING: See tokens syntax changes
  • BREAKING: Ratio functionality merged into Core, using the shared $ratios map, and ratio() function. The old $aspect-ratios and aspect-ratio() have been removed.
• Plugin: Scale:
  • BREAKING: See tokens syntax changes
  • BREAKING: String interpolation has moved into the Core using function syntax '%s and %s' ('%s': 'new1' 'new2') rather than list syntax '%s and %s' ('new1', 'new2')
  • BREAKING: Math functions have moved into the core. The actual functions are now prefixed & private, but they are made available to Accoutrement maps under the additional aliases
  • New: Ratios have moved into the core, with additional defaults
• Plugin: Type:
  • BREAKING: See tokens syntax changes
  • NEW: Allow space-separated string variants ('500 italic') for weight and style, in addition to lists (500 'italic')
  • NEW: Automatically formats font-family stacks with proper commas & quotations for CSS output

Older Changelogs, from individual modules:

• Accoutrement Init
• Accoutrement Color
• Accoutrement Layout
• Accoutrement Scale
• Accoutrement Type