colors
CSS custom properties and Sass variables for the D2L color palette
[ This description is mirrored from README.md at github.com/BrightspaceUI/colors on 2019-05-22 ]
d2l-colors
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.
Links
Compatibility
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 - 2
- Released
- 2019-05-17
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 2.4.0
- Browser
- Browser Independent