Skip to content
This repository has been archived by the owner on Nov 17, 2021. It is now read-only.

Commit

Permalink
add o colors mix sandbox 🎉 (#155)
Browse files Browse the repository at this point in the history 
* add o colors mix sanbox

* linting
  • Loading branch information
@gvonkoss
gvonkoss authored Aug 17, 2018
1 parent 5c19b13 commit 9f59fc4
Show file tree
Hide file tree
Showing 6 changed files with 338 additions and 18 deletions.
2 changes: 1 addition & 1 deletion demos/src/contrast-ratio.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ function oColorsColorLuminance(hex) {
const colors = {
'red': decimals[0],
'green': decimals[1],
'blue':decimals[2]
'blue': decimals[2]
};

Object.keys(colors).forEach(color => {
Expand Down
89 changes: 89 additions & 0 deletions demos/src/mix-sandbox.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
const contrastRatio = require('./contrast-ratio');

document.addEventListener('DOMContentLoaded', function() {
const mixer = document.getElementById('mixer-selector');
const base = document.getElementById('base-selector');

mixer.addEventListener('change', () => {
oColorsMix(mixer.value, base.value);
});

base.addEventListener('change', () => {
oColorsMix(mixer.value, base.value);
});

oColorsMix(mixer.value, base.value);
let defaultHex = getComputedStyle(document.documentElement).getPropertyValue(`--o-colors-${mixer.value}-80`).trim();
fillCodeSnippets(defaultHex, mixer.value, base.value, 8);
});

function oColorsMix(mixer = 'black', base = 'paper') {
const mixerHex = getComputedStyle(document.documentElement).getPropertyValue(`--o-colors-${mixer}`).replace(' #','');
const baseHex = getComputedStyle(document.documentElement).getPropertyValue(`--o-colors-${base}`).replace(' #','');
const textColorRGB = getComputedStyle(document.body).getPropertyValue('color');

let textColor = textColorRGB === 'rgb(0, 0, 0)' ? '#000000' : '#f3f3f3';

let ratio = contrastRatio.oColorsGetContrastRatio(textColor, baseHex);

if (ratio <= 3) { //if it fails accessbility
textColor = textColor === '#000000' ? '#f3f3f3' : '#000000';
document.body.style.setProperty('--color', textColor);
}

const mixHex = mixColors(mixerHex, baseHex);

mixHex.forEach((hex, index) => {
let range = document.querySelector('.mix-range');
let swatch = range.querySelector(`.percent-${index}0 .sqr`);
swatch.style.backgroundColor = hex;

if (index === 0) {
document.body.style.backgroundColor = hex;
}

swatch.addEventListener('click', () => {
range.querySelectorAll(`.sqr`).forEach(sqr => {
sqr.style.borderWidth = '1px';
sqr.style.margin = '2px';
});

swatch.style.borderWidth = '3px';
swatch.style.margin = '0';

fillCodeSnippets(hex, mixer, base, index);
});
});
}

const fillCodeSnippets = (hex, mixer, base, index) => {
document.getElementById('hex-value').innerText = hex;
document.getElementById('code-snippet').innerText = `oColorsMix(${mixer}, ${base}, ${index}0)`;
};

function mixColors(mixer, base) {
const radix = 16;
const decimalToHex = decimal => decimal.toString(radix);
const hexToDecimal = hex => parseInt(hex, radix);

let percentages = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

return percentages.map(percent => {

let hexValue = "#";

for (let i = 0; i <= 5; i += 2) {
let mixPair = hexToDecimal(mixer.substr(i, 2)); // extract r, g, b pairs for mixer color
let basePair = hexToDecimal(base.substr(i, 2)); // extract r, g, b pairs for base color

// combine the r/g/b pairs from each color, based on percentage
let combinedPair = decimalToHex(Math.round(basePair + (mixPair - basePair) * (percent / 100.0)));

while (combinedPair.length < 2) { combinedPair = `0${combinedPair}`; }// prepend a '0' if combinedPair results in a single digit

hexValue += combinedPair; //add new pair to hex string
}

return hexValue;
});
}
127 changes: 127 additions & 0 deletions demos/src/mix-sandbox.mustache
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<div class="container" data-o-component="o-syntax-highlight">
<div class="color-selectors">
<div class="o-forms">
<label aria-describedby="select-box-info" for="select-standard" class="o-forms__label">Mixer</label>
<select id="mixer-selector" class="o-forms__select">

{{#primary.colors}}
<option value="{{name}}" {{#baseText}}selected {{/baseText}}>{{name}}</option>
{{/primary.colors}}

{{#secondary.colors}}
<option value={{name}}>{{name}}</option>
{{/secondary.colors}}

{{#tertiary.colors}}
<option value={{name}}>{{name}}</option>
{{/tertiary.colors}}

{{#b2c.colors}}
<option value={{name}}>{{name}}</option>
{{/b2c.colors}}

</select>
</div>
<div class="o-forms">
<label aria-describedby="select-box-info" for="select-standard" class="o-forms__label">Base color</label>
<select id="base-selector" class="o-forms__select">

{{#primary.colors}}
<option value={{name}} {{#baseBackground}}selected {{/baseBackground}}>{{name}}</option>
{{/primary.colors}}

{{#secondary.colors}}
<option value={{name}}>{{name}}</option>
{{/secondary.colors}}

{{#tertiary.colors}}
<option value={{name}}>{{name}}</option>
{{/tertiary.colors}}

{{#b2c.colors}}
<option value={{name}}>{{name}}</option>
{{/b2c.colors}}

</select>
</div>
</div>

<div class="mix-range">
<div class="percent-00">
<div class="sqr"></div>
<div class="text">
<strong>0%</strong>
</div>
</div>
<div class="percent-10">
<div class="sqr"></div>
<div class="text">
<strong>10%</strong>
</div>
</div>
<div class="percent-20">
<div class="sqr"></div>
<div class="text">
<strong>20%</strong>
</div>
</div>
<div class="percent-30">
<div class="sqr"></div>
<div class="text">
<strong>30%</strong>
</div>
</div>
<div class="percent-40">
<div class="sqr"></div>
<div class="text">
<strong>40%</strong>
</div>
</div>
<div class="percent-50">
<div class="sqr"></div>
<div class="text">
<strong>50%</strong>
</div>
</div>
<div class="percent-60">
<div class="sqr"></div>
<div class="text">
<strong>60%</strong>
</div>
</div>
<div class="percent-70">
<div class="sqr"></div>
<div class="text">
<strong>70%</strong>
</div>
</div>
<div class="percent-80">
<div class="sqr"></div>
<div class="text">
<strong>80%</strong>
</div>
</div>
<div class="percent-90">
<div class="sqr"></div>
<div class="text">
<strong>90%</strong>
</div>
</div>
<div class="percent-100">
<div class="sqr"></div>
<div class="text">
<strong>100%</strong>
</div>
</div>
</div>

<div class="details">
<label aria-describedby="hex-value" class="o-forms__label">Hex Value</label>
<div class="o-forms__additional-info">This value is a result of the Sass function below. Feel free to use this value in Sketch files, etc, but please pass on the function to the developer to use in production.</div>
<output><pre><code id="hex-value" class='o-syntax-highlight--scss'></code></pre></output>

<label aria-describedby="sass-function" class="o-forms__label">Sass function</label>
<div class="o-forms__additional-info">Returns the hex value above</div>
<output><pre><code id='code-snippet' class='o-syntax-highlight--scss'></code></pre></output>
</div>
</div>
69 changes: 69 additions & 0 deletions demos/src/mix-sandbox.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
$o-colors-is-silent: false;

// Import colors module
@import '../../main';

:root {
--color: black;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
display: grid;
grid-template-columns: repeat(2, 0.75fr) 1fr;

.o-forms__label,
.o-forms__additional-info {
color: inherit;
}
}

.color-selectors {
padding: 20px;
}

body {
font-family: MetricWeb, sans-serif;
color: var(--color);
}


.details {
pre {
margin: 10px 0;
padding: 10px;
border: 1px solid oColorsGetPaletteColor(slate-white-15);
}
}

.mix-range {
display: flex;
flex-direction: column-reverse;
justify-self: center;

[class^='percent'] {
display: flex;
justify-content: flex-start;
}

.sqr {
height: 2em;
width: 7em;
border: 1px solid var(--color);
margin: 2px;

&:hover {
cursor: pointer;
outline: 2px solid var(--color);
}
}

.text {
align-self: center;

> * {
padding-left: 0.5em;
}
}
}
57 changes: 41 additions & 16 deletions demos/src/palette.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{
"primary" : {
"primary": {
"description": "color is a fundamental attribute of the FT visual language. Consistent use of the primary palette across the platform strengthens our brand by evoking familiarity and trust.",
"colors": [
{
"colors": [{
"name": "paper",
"baseBackground": true,
"tints": false
Expand Down Expand Up @@ -30,10 +29,9 @@
}
]
},
"secondary" : {
"secondary": {
"description": "Secondary colors provide visual hierarchy to differentiate content and are brand identifiers of the FT.",
"colors": [
{
"colors": [{
"name": "wheat"
},
{
Expand All @@ -53,10 +51,9 @@
}
]
},
"tertiary" : {
"tertiary": {
"description": "Used sparingly, these colors provide contrast for highlighting and messaging.",
"colors": [
{
"colors": [{
"name": "jade"
},
{
Expand All @@ -70,10 +67,9 @@
}
]
},
"tints" : {
"tints": {
"description": "Dynamic tinting of the primary palette can be used to produce a broad spectrum of lighter and darker variations for creating scale and depth to your designs.",
"colors": [
{
"colors": [{
"name": "black",
"tint-levels": [5, 10, 20, 30, 40, 50, 60, 70, 80, 90]
},
Expand All @@ -95,10 +91,9 @@
}
]
},
"b2c" : {
"b2c": {
"description": "These colors are specifically designed for use in B2C products.",
"colors": [
{
"colors": [{
"name": "org-b2c"
},
{
Expand All @@ -108,5 +103,35 @@
"name": "org-b2c-light"
}
]
}
},
"percentages": [
{
"value": 10
},
{
"value": 20
},
{
"value": 30
},
{
"value": 40
},
{
"value": 50
},
{
"value": 60
},
{
"value": 70
},
{
"value": 80,
"default": true
},
{
"value": 90
}
]
}
Loading

0 comments on commit 9f59fc4

Please sign in to comment.