How to use color - 10 common examples
To help you get started, we’ve selected a few color examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
kubernetes / test-infra / prow / spyglass / lenses / coverage / coverage.ts View on Github 
} else {
node.style.width = '100%';
node.style.height = `${percentage}%`;
node.style.top = `${offset}%`;
node.style.left = `0`;
}
offset += percentage;
if (child.totalFiles === 1) {
node.classList.add('leaf');
const [filename, file] = child.files.entries().next().value;
node.title = `${filename}: ${(file.coveredStatements / file.totalStatements * 100).toFixed(0)}%`;
node.style.backgroundColor = NO_COVERAGE.mix(FULL_COVERAGE, file.coveredStatements / file.totalStatements).hex();
// Not having a border looks weird, but using a constant colour causes tiny boxes
// to consist entirely of that colour. By using a border colour based on the
// box colour, we still show some information.
node.style.borderColor = Color(node.style.backgroundColor).darken(0.3).hex();
} else {
renderChildren(node, child, !horizontal);
}
}
}const PublicTransportLine = ({ mode, info }) => {
// @TODO: translate
// @TODO: use network-specific iconography where possible
let type = 'ligne';
if (mode.startsWith('BUS')) {
type = `bus ${info.network}`;
} else if (mode.startsWith('SUBWAY')) {
type = 'métro';
} else if (mode.startsWith('TRAM')) {
type = 'tram';
} else if (info.network === 'RER') {
type = 'RER';
} else if (mode.indexOf('TRAIN') !== -1) {
type = `train ${info.network}`;
}
const lineColor = info.lineColor ? Color('#' + info.lineColor) : Color('white');
return <span style="{{">
{type} {info.num}
</span>;
};.string();
@def
lightAccentColor = Color(this.accentColor)
.lighten(0.3)
.string();
@def
altBackgroundColor = Color(this.backgroundColor)
.darken(0.03)
.string();
@def altBodyColor = this.altBackgroundColor; // DEPRECATED
@def
altBorderColor = Color(this.borderColor)
.opaquer(0.3)
.string();
@def
altInverseBorderColor = Color(this.inverseBorderColor)
.opaquer(1)
.string();
@def baseTextColor = '#000';
@def
textColor = Color(this.baseTextColor)
.alpha(0.87)
.string();
@def primaryTextColor = this.textColor; // DEPRECATEDprivate drawPlus() {
let iconColor = new Color(ColorService.Active.COMPLIMENTARY).ios;
//// Bezier Drawing
let bezierPath = UIBezierPath.bezierPath();
bezierPath.moveToPoint(CGPointMake(35.72, 15));
bezierPath.addLineToPoint(CGPointMake(44.35, 15));
bezierPath.addLineToPoint(CGPointMake(44.35, 35.65));
bezierPath.addLineToPoint(CGPointMake(65, 35.65));
bezierPath.addLineToPoint(CGPointMake(65, 43.89));
bezierPath.addLineToPoint(CGPointMake(44.35, 43.89));
bezierPath.addLineToPoint(CGPointMake(44.35, 65));
bezierPath.addLineToPoint(CGPointMake(35.72, 65));
bezierPath.addLineToPoint(CGPointMake(35.72, 43.89));
bezierPath.addLineToPoint(CGPointMake(15, 43.89));
bezierPath.addLineToPoint(CGPointMake(15, 35.65));
bezierPath.addLineToPoint(CGPointMake(35.72, 35.65));
bezierPath.addLineToPoint(CGPointMake(35.72, 15));function pageLoaded(args) {
// Get the event sender
var page = args.object;
page.bindingContext = new main_view_model_1.HelloWorldModel(page);
if (platform_1.isAndroid && platform_1.device.sdkVersion >= "21") {
var window_1 = application_1.android.startActivity.getWindow();
window_1.setStatusBarColor(new color_1.Color("#d32f2f").android);
}
}
exports.pageLoaded = pageLoaded;module.exports = function getThemes(passed) {
var mainColorTone = passed ? color(passed) : color.hsl(210, 100, 100);
var bgDark = mainColorTone.desaturate(0.5).darken(0.9).string();
var bgLight = 'hsl(255, 0%, 100%)';
var main = mainColorTone.darken(0.4).string();
var common = {
active: main,
error: 'rgba(205, 63, 69, 1)', // Errors, alpha, deprecated
warning: 'rgba(255, 189, 46, 1)', // Warnings, beta
info: 'rgba(80, 179, 221, 1)', // Rc
success: 'rgba(74, 165, 74, 1)', // Stable
dark: 'rgba(15, 15, 15, 1)',
light: 'rgba(220, 220, 220, 1)',
fontWeight: '100',
fontSize: '14px'
};var Menu = function () {
this.start = myFog.getStart();
this.end = myFog.getEnd();
this.density = myFog.getDensity();
this.mode = myFog.getMode();
var color = myFog.getColor();
this["color.r"] = color.r;
this["color.g"] = color.g;
this["color.b"] = color.b;
var self = this;
// This is actually quite inefficient because it continually updates
// the scene graph, forcing frames to continually re-render.
// Your GPU's not going to like it, but it's just for a quick and dirty demo.
var update = function () {
myFog.setStart(self.start);
myFog.setEnd(self.end);
myFog.setDensity(self.density);
myFog.setMode(self.mode);
myFog.setColor({
r:self["color.r"],
g:self["color.g"],
b:self["color.b"]var Menu = function () {
this.message = "Positional light";
this["dir.x"] = 5.0;
this["dir.y"] = -5.0;
this["dir.z"] = -5.0;
this["color.r"] = 1.0;
this["color.g"] = 1.0;
this["color.b"] = 1.0;
this.specular = true;
this.diffuse = true;
var self = this;
// This is actually quite inefficient because it continually updates
// the scene graph, forcing frames to continually re-render.
// Your GPU's not going to like it, but it's just for a quick and dirty demo.
var update = function () {
myLights.setLights({
"0":{
dir:{
x:self["dir.x"],var Menu = function () {
this.start = myFog.getStart();
this.end = myFog.getEnd();
this.density = myFog.getDensity();
this.mode = myFog.getMode();
var color = myFog.getColor();
this["color.r"] = color.r;
this["color.g"] = color.g;
this["color.b"] = color.b;
var self = this;
// This is actually quite inefficient because it continually updates
// the scene graph, forcing frames to continually re-render.
// Your GPU's not going to like it, but it's just for a quick and dirty demo.
var update = function () {
myFog.setStart(self.start);
myFog.setEnd(self.end);
myFog.setDensity(self.density);
myFog.setMode(self.mode);
myFog.setColor({
r:self["color.r"],
g:self["color.g"],var Menu = function () {
this.message = "Directional light";
this["dir.x"] = 5.0;
this["dir.y"] = -5.0;
this["dir.z"] = -5.0;
this["color.r"] = 1.0;
this["color.g"] = 1.0;
this["color.b"] = 1.0;
this.specular = true;
this.diffuse = true;
var self = this;
// This is actually quite inefficient because it continually updates
// the scene graph, forcing frames to continually re-render.
// Your GPU's not going to like it, but it's just for a quick and dirty demo.
var update = function () {
myLights.setLights({
"0":{
dir:{
x:self["dir.x"],color
Color conversion and manipulation with CSS string support
