- 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. Learn the new syntax. - 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 core module syntax changes
- BREAKING: Removed
merge-colors()
function
- Plugin: Layout:
- BREAKING: See core module 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 core module 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 core module 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