CSS custom properties and Sass variables for the D2L color palette
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
test
.editorconfig
.eslintignore
.eslintrc.json
.gitattributes
.gitignore
.travis.yml
CODEOWNERS
LICENSE
README.md
d2l-colors.js
d2l-colors.scss
package.json
polymer.json

README.md

d2l-colors

Published on webcomponents.org 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 Brightspace UI components, see the docs at ui.developers.brightspace.com.

Installation

d2l-colors can be installed from Bower:

bower install d2l-colors

Usage

Polymer Web Component Variables

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

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

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

<head>
	<custom-style>
		div {
			background-color: var(--d2l-color-carnelian);
		}
	</custom-style>
</head>

'''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.