Kristofer Joseph kristoferjoseph

View Color proposal
1 2 3 4 5 6 7 8 9 10
Current proposal for the contrast(< percentage >) function
http://dev.w3.org/csswg/css-color/#contrast-adjuster
 
Is there a way I could request that you consider adding a way to adjust a color’s contrast to another color?
As in:
contrast(desiredContrastRatio, foregroundColor, backgroundColor);
 
I find that this is my use case more times than not. I hardly ever know the percent needed to increase or decrease by in the real world. Even better would be the ability to pass the minimum accessibility level desired as in
 
contrast(‘AA’, foregroundColor, backgroundColor);
View index.js
1 2 3 4 5 6 7 8 9
var express = require('express'),
instant = require('instant'),
colors = require('colors'),
app = express();
 
app.use(instant(__dirname));
app.listen(3000,
console.log('Navigate to ' + 'http://localhost:3000'.green + ' to view your page')
);
View nodemodule.js
1 2 3 4 5 6
var awesomeModule = require('awesome-module');
 
module.exports = function() {
var myThing = {};
return awesomeModule.doStuff(myThing);
};
View namespace-bem.css
1 2 3 4 5 6 7 8 9 10
<div class="topcoat-button-bar">
<div class="topcoat-button-bar__item">
<button class="topcoat-button">One</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button">Two</button>
</div>
<div class="topcoat-button-bar__item">
<button class="topcoat-button">Three</button>
</div>
View suit-ButtonGroup.html
1 2 3 4 5 6 7 8 9 10
<div class="ButtonGroup">
<div class="ButtonGroup-item">
<button class="Button">One</button>
</div>
<div class="ButtonGroup-item">
<button class="Button">Two</button>
</div>
<div class="ButtonGroup-item">
<button class="Button">Three</button>
</div>
View bem-button-bar.html
1 2 3 4 5 6 7 8 9 10
<div class="button-bar">
<div class="button-bar__item">
<button class="button">One</button>
</div>
<div class="button-bar__item">
<button class="button">Two</button>
</div>
<div class="button-bar__item">
<button class="button">Three</button>
</div>
View !fuggit.css
1 2 3 4 5 6 7 8 9 10
/* Somtimes you don't control the order fo concatination for multiple files */
/* <button class="button button--burly">Burly?</button> */
 
.button--burly {
background-color: BurlyWood !important;
}
 
/* Some thousand lines later */
 
.button {
View cssement.css
1 2 3 4 5 6 7 8 9 10
header > p {
/* Styles for all <p> in a <header> */
}
 
/* Wait, you have to style a <p> differently based on context!? */
 
section > header > p {
/* Styles for all <p> in a header, in a section */
/* Because you never need to style it differently right!? */
}
View cssscope.css
1 2 3 4 5 6 7 8 9
.button {
background-color: Aqua;
}
 
/* Some thousand lines later */
 
.button {
background-color: BurlyWood;
}
View flexbox-fallback.css
1 2 3 4 5 6 7 8 9 10
/* normal flexbox */
.flexbox .flex-container {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
}
.flexbox .flex-container.vertical {
display: -webkit-flex;
display: -moz-flex;
Something went wrong with that request. Please try again.