- 🏠 INTERNAL: Remove documentation from npm package
- 🏠 INTERNAL: Upgrade dev dependencies
- BUGFIX: Fixed a bug with
tokens.get()
that didn't allow per-property inline functional adjustments -- #117
- BUGFIX: Fixed a bug with
tokens.get()
memorization -- #112 - INTERNAL: Upgrade dev dependencies.
- Tokens:
- NEW: Add
$ignore-cache
parameter totokens.get()
function, in order to override the cached value of a token.
- NEW: Add
- Sass Utilities:
- NEW: Removed unnecessary string length checks in the
split()
function.
- NEW: Removed unnecessary string length checks in the
- INTERNAL: Upgrade dev dependencies.
- DOCS: Update modules list -- #111
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
andpadding
of block elements to remove unwanted vertical space. And SVGs and other media may stack instead of displaying inline since CSS Remedy sets these todisplay: 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 alladd-*
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.
-
- NEW:
compile-*
functions provide an export option for respective token maps (see:compile-changes()
,compile-easing()
, andcompile-times()
). - NEW: Named default easings are now available as
individual variables,
(without the
_
prefix that is applied in token maps).
- NEW:
-
- 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.
- NEW:
-
- 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'ssplit()
method. - NEW:
trim()
function trims whitespace from the start and end of a string.
-
- 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.
- NEW:
-
- NEW: A module just for the custom map syntax parser & function registration.
- NEW:
map-compile()
andmap-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 tonull
, and no longer supports the legacysilent
option. - BREAKING:
get-token()
is renamedget()
, and only accepts bare token names (no#
prefix), including theouter->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 theouter->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.
- NEW:
-
- 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.
- NEW:
-
- 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.
- NEW:
-
- 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.
- BREAKING: Removed
- INTERNAL: Upgrade dev dependencies.
- DOCS: Fix changelog typo.
- BREAKING: Change to
get-token()
return value when the key path cannot be resolved, and$handle-missing-keys
is unset orsilent
: 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 setfont-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 orsilent
. 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
isnull
,warn
, orerror
. (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.
- NEW: (#41) Global
$handle-missing-keys
allows you to control exactly what should happen when a key look-up fails. The defaultsilent
provides backwards-compatible silent-failure. Other options include:null
:get-token()
will returnnull
, similar to Sassmap.get()
warn
:get-token()
will returnnull
, and also throw a warningerror
: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.
- DOCS (#54): Fix broken links in docs
- INTERNAL: Upgrade dev dependencies.
- Core:
- BUGFIX (#46): Fixes
register-function()
usage with Sass module syntax
- BUGFIX (#46): Fixes
- Upgrade dev dependencies.
- Core:
- BUGFIX (#36): Fixes an issue with
quote()
in dart-sass. - BUGFIX (#38): Fixes an issue with
false
values in maps.
- BUGFIX (#36): Fixes an issue with
- Core:
- BUGFIX (#31): Fixes an issue with longhand map memoization
- Plugin: Color
- NEW:
contrast()
,contrasted()
,var-contrast()
, andvar-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 fromshades-of()
- NEW:
- Plugin: Color
- NEW:
var-contrast()
andvar-contrasted()
provide CSS variable parallels tocontrast()
andcontrasted()
- NEW: User-defined contrast defaults
(
contrast-light
andcontrast-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)
- NEW:
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
- BREAKING: Explicit value/adjustments maps require a
- 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()
andis-alias-for()
are now public functions, to help with token-inspection - BREAKING: Support for nested-map tokens with
->
syntax, both in#hash->references
andget-token($source, 'function->calls')
(thanks to @joelschou)
- NEW:
- 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--()
, andvar-ease()
- NEW: Support for time CSS variables with
times--()
,time--()
, andvar-time()
- NEW: Support for change CSS variables with
changes--()
,change--()
, andvar-change()
- BREAKING: Default easing tokens are now prefixed with
- Plugin: Color
- BREAKING:
_contrast-light
and_contrast-dark
colors are used for mixingtint()
andshade()
, 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--()
, andvar-color()
- BREAKING:
- Plugin: Layout
- BREAKING: Default ratio tokens are now prefixed with
_
, see core for details
- BREAKING: Default ratio tokens are now prefixed with
- Plugin: Scale
- BREAKING: Default ratio tokens are now prefixed with
_
, see core for details - NEW: Support for size CSS Variables with
sizes--()
,size--()
, andvar-size()
- NEW: Support for ratio variables with
ratios--()
,ratio--()
, andvar-ratio()
- BREAKING: Default ratio tokens are now prefixed with
- 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--()
, andvar-font()
- Core:
- BUGFIX: Typos, including the
cinema
ratio spelling (thanks to @joelschou) - BUGFIX: Improved consistency of nested-map parser (thanks to @joelschou)
- BUGFIX: Typos, including the
- The stable 1.0 release is identical to
-beta.3
, see change details below
- Plugin: Scale
- BUGFIX:
size()
function removes quotes from string (calc) sizes
- BUGFIX:
- Core:
- NEW:
ratio()
function accepts$source
argument, for passing in a custom source map - NEW: Improved error-handling and messages
- NEW: Added
str-trim
andstr-split
aliases in addition to the existingtrim
andsplit
- NEW:
- Plugin: Animate
- NEW:
ease()
,time()
, andchange()
functions all accept$source
argument, for passing in a custom source map
- NEW:
- 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
- NEW:
- Plugin: Scale
- BREAKING:
negative()
function andsquare()
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, butnegative('root', 'em', 10px)
should be changed tonegative('root', 'em' 10px)
(with all unit args in a single list) - NEW:
size()
/negative()
functions andsquare()
mixin accept$source
argument, for passing in a custom source map
- BREAKING:
- Plugin: Type
- NEW:
font()
/font-family()
functions andfont-family()
/font-face()
mixins accept$source
argument, for passing in a custom font-source map
- NEW:
- NEW: Add
_index.scss
to simplify default "tools" import (core + plugins) in Eyeglass:@import 'accoutrement';
- Core:
- NEW:
get-token()
andratio()
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 tostring
-type when appropriate, allowing e.g.calc(16px + 1vw) ('str-replace': 1vw 2vw)
- NEW:
- Plugin: Animate
- NEW:
change()
,time()
, andease()
functions all accept$do
arg for on-the-fly adjustments
- NEW:
- 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
- BREAKING:
- Plugin: Layout
- NEW:
break()
function accept$do
arg for on-the-fly adjustments
- NEW:
- 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, butsize('root', 'em', 10px)
should be changed tosize('root', 'em' 10px)
(with all unit args in a single list)
- BREAKING:
- 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'
- BREAKING:
- 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
- BREAKING: Internal map-reference now uses
- 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, andratio()
function. The old$aspect-ratios
andaspect-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