Contact us Create app

Directory

← Back

colors

CSS custom properties and Sass variables for the D2L color palette

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/BrightspaceUI/colors on 2019-05-22 ]

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 components, refer to The Brightspace UI Guide.

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.

Versioning

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.

Compatibility

(Loading compatibility data...)

Last updated: 2018-01-10

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#^1.7.0
Released
2017-06-21
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 1.0+
Polymer 2.0+ in 3.0.0
Browser
Browser Independent

colors - Vaadin Add-on Directory

CSS custom properties and Sass variables for the D2L color palette colors - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/BrightspaceUI/colors](https://github.com//BrightspaceUI/colors/blob/v4.3.1/README.md) on 2019-05-22 ]** # d2l-colors [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/colors) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] This component contains [Polymer](https://www.polymer-project.org/) web component and [Sass](http://sass-lang.com/) 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](https://github.com/BrightspaceUI/guide/wiki). ## Installation `d2l-colors` can be installed from [Bower][bower-url]: ```shell bower install d2l-colors ``` ## Usage ### Polymer Web Component Variables Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-colors.html`. ```html ``` You can then reference the color variables from inside [custom-style](https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style) blocks: ```html 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](https://github.com/BrightspaceUI/colors/tree/master/d2l-colors.html). ### Sass Variables Alternatively, you can reference the same variables from Sass: ```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](https://github.com/BrightspaceUI/colors/tree/master/d2l-colors.scss). ## Coding styles See the [Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo. ## Versioning 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. [bower-url]: http://bower.io/search/?q=d2l-colors [bower-image]: https://badge.fury.io/bo/d2l-colors.svg [ci-url]: https://travis-ci.org/BrightspaceUI/colors [ci-image]: https://travis-ci.org/BrightspaceUI/colors.svg?branch=master
Online