colors | Vaadin

CSS custom properties and Sass variables for the D2L color palette

[ This description is mirrored from at on 2019-05-22 ]


Published on Bower version Build status

This component contains Polymer web component and Sass variables, either of which can be used to consume the D2L color palette in your application.

For further information on this and other components, refer to The Brightspace UI Guide.


d2l-colors can be installed from Bower:

bower install d2l-colors


Polymer Web Component Variables

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-colors.html.

	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="../d2l-colors/d2l-colors.html">

You can then reference the color variables from inside custom-style blocks:

		div {
			background-color: var(--d2l-color-carnelian);

'''Note:''' if you're writing a web component, the custom-style block can be omitted.

The full list of available color variable names can be found in d2l-colors.html.

Sass Variables

Alternatively, you can reference the same variables from Sass:

@import 'bower_components/d2l-colors/d2l-colors.scss';

div {
	background-color: $d2l-color-carnelian;

The full list of available color variable names can be found in d2l-colors.scss.

Coding styles

See the Best Practices & Style Guide for information on naming conventions, plus information about the EditorConfig rules used in this repo.


Commits and PR merges to master will automatically do a minor version bump which will:

  • Update the version in package.json
  • Add a tag matching the new version
  • Create a github release matching the new version

By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.


Link to this version
ImportedReleased 17 May 2019Apache License 2.0
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (2.4.0)
Browser Independent
Install with
bower install --save BrightspaceUI/colors"#3.1.4"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 3.1.4


  • polymer#1 - 2