Skip to content

Commit

Permalink
reduce filesize by trimming color and layout rules, closes #746
Browse files Browse the repository at this point in the history
  • Loading branch information
@samanpwbb
samanpwbb committed Jun 2, 2017
1 parent fe1274e commit 3c68ade
Show file tree
Hide file tree
Showing 24 changed files with 1,072 additions and 2,651 deletions.
2 changes: 0 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,6 @@ The following configuration specifies an array of default colors. All components
```json
[
"red",
"teal",
"teal-dark",
"green-light"
]
```
Expand Down
141 changes: 125 additions & 16 deletions scripts/build-color-variants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,6 @@ const allColors = [
'green-light',
'green-faint',

'teal-dark',
'teal',
'teal-light',
'teal-faint',

'blue-dark',
'blue',
'blue-light',
Expand Down Expand Up @@ -73,8 +68,15 @@ function isSemitransparent(color) {
return /^(lighten|darken)/.test(color);
}

function isDark(color) {
return color === 'black' || /-dark$/.test(color);
function isNotSuitableForForms(color) {
// Do not create form elements from values that are too light or too dark,
// for accessibility and to save space.
return color === 'black' || /^(darken5|darken10|lighten5|lighten10)$/.test(color) || /(-dark|-light|-faint)$/.test(color);
}

function isNotSuitableForButtons(color) {
// Filled Buttons should be allowed to have subtle backgrounds within reason.
return color === 'black' || /(-faint|-dark)$/.test(color);
}

function buildColorVariants(variables, config) {
Expand Down Expand Up @@ -130,7 +132,7 @@ function buildColorVariants(variables, config) {

variantGenerators.buttonFill = function (colors) {
return colors.reduce((result, color) => {
if (isDark(color)) return result;
if (isNotSuitableForButtons(color)) return result;
const darkerShade = getDarkerShade(color);
return result += stripIndent(`
.btn--${color} {
Expand All @@ -147,7 +149,7 @@ function buildColorVariants(variables, config) {

variantGenerators.buttonStroke = function (colors) {
return colors.reduce((result, color) => {
if (isDark(color)) return result;
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);
return result += stripIndent(`
.btn--stroke.btn--${color} {
Expand All @@ -163,9 +165,46 @@ function buildColorVariants(variables, config) {
}, '');
};

variantGenerators.selectFill = function (colors) {
return colors.reduce((result, color) => {
if (isNotSuitableForButtons(color)) return result;
const darkerShade = getDarkerShade(color);
return result += stripIndent(`
.select--${color} {
background-color: var(--${color});
}
.select--${color}:hover {
background-color: var(--${darkerShade});
}
`);
}, '');
};

variantGenerators.selectStroke = function (colors) {
return colors.reduce((result, color) => {
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);
return result += stripIndent(`
.select--stroke-${color} {
color: var(--${color});
}
.select--stroke-${color} + .select-arrow {
border-top-color: var(--${color});
}
.select--stroke-${color}:hover {
color: var(--${darkerShade});
}
.select--stroke-${color}:hover + .select-arrow {
border-top-color: var(--${darkerShade});
}
`);
}, '');
};

variantGenerators.inputTextarea = function (colors) {
return colors.reduce((result, color) => {
if (isDark(color)) return result;
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);
return result += stripIndent(`
.textarea--border-${color},
Expand All @@ -183,9 +222,43 @@ function buildColorVariants(variables, config) {
}, '');
};

variantGenerators.checkbox = function (colors) {
return colors.reduce((result, color) => {
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);
return result += stripIndent(`
.checkbox--${color} {
color: var(--${color});
}
.checkbox-container:hover > .checkbox--${color},
input:checked + .checkbox--${color} {
color: var(--${darkerShade});
}
`);
}, '');
};

variantGenerators.radio = function (colors) {
return colors.reduce((result, color) => {
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);
return result += stripIndent(`
.radio--${color} {
color: var(--${color});
}
.radio-container:hover > .radio--${color},
input:checked + .radio--${color} {
color: var(--${darkerShade});
}
`);
}, '');
};

variantGenerators.toggle = function (colors) {
return colors.reduce((result, color) => {
if (isDark(color)) return result;
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);
// Set the text color to regular when inactive.
// Set the text color to dark when inactive on hover.
Expand All @@ -202,23 +275,59 @@ function buildColorVariants(variables, config) {
input:checked + .toggle--${color} {
background: var(--${color});
color: var(--white);
}
`);
}, '');
};

variantGenerators.toggleActive = function (colors) {
return colors.reduce((result, color) => {
if (isNotSuitableForForms(color)) return result;
// Must be below .toggle group in stylesheet
return result += stripIndent(`
input:checked + .toggle--active-${color} {
color: var(--${color});
}
`);
}, '');
};

variantGenerators.toggleActive = function (colors) {
variantGenerators.switch = function (colors) {
return colors.reduce((result, color) => {
// Must be below .toggle group in stylesheet
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);
// Darken background when hovered and when active
// Darken dot on hover when inactive only
return result += stripIndent(`
input:checked + .toggle--active-${color} {
.switch--${color} {
color: var(--${color});
}
.switch--${color}:hover {
color: var(--${darkerShade});
}
.switch--${color}:hover::after,
input:checked + .switch--${color} {
background-color: var(--${darkerShade});
}
input:checked + .switch--dot-${color}::after {
background-color: var(--${color});
}
`);
}, '');
};

variantGenerators.range = function (colors) {
return colors.reduce((result, color) => {
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);

// Set the thumb color.
return result += stripIndent(`
.range--${color} > input { color: var(--${color}); }
.range--${color}:hover > input { color: var(--${darkerShade}); }
`);
}, '');
};
Expand Down Expand Up @@ -290,7 +399,7 @@ function buildColorVariants(variables, config) {

variantGenerators.link = function (colors) {
return colors.reduce((result, color) => {
if (isDark(color)) return result;
if (isNotSuitableForForms(color)) return result;
const darkerShade = getDarkerShade(color);
return result += stripIndent(`
.link--${color} {
Expand Down
39 changes: 0 additions & 39 deletions scripts/build-layout-scales.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,26 +88,6 @@ function buildLayoutScales() {

variantGenerators.margin = function (scales) {
let css = stripIndent(`
/**
* Apply margin on all sides.
*
* @group
* @example
* <div class='m24 bg-darken10'>m24</div>
* @memberof Margins
*/
`);

scales.forEach((scale) => {
css += buildMediaRules((mediaSuffix) => stripIndent(`
.m${scale}${mediaSuffix} {
margin: ${value(scale)} !important;
}
`));
});
css += '\n/** @endgroup */\n';

css += stripIndent(`
/**
* Apply margin on the top and bottom.
*
Expand Down Expand Up @@ -232,25 +212,6 @@ function buildLayoutScales() {

variantGenerators.padding = function (scales) {
let css = stripIndent(`
/**
* Apply padding on all sides.
*
* @group
* @memberof Padding
* @example
* <div class='p24 bg-darken10'>p24</div>
*/`
);
scales.forEach((scale) => {
css += buildMediaRules((mediaSuffix) => stripIndent(`
.p${scale}${mediaSuffix} {
padding: ${value(scale)} !important;
}
`));
});
css += '\n/** @endgroup */\n';

css += stripIndent(`
/**
* Apply padding on the top and bottom.
*
Expand Down
15 changes: 8 additions & 7 deletions site/catalog/buttons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const colors = [
'orange',
'yellow',
'green',
'teal',
'blue',
'purple',
'darken5',
Expand Down Expand Up @@ -43,18 +42,20 @@ const getButtonEls = (color, i) => {
<div className='inline-block mr18'>
<button disabled className={buttonFillClass}>Fill</button>
</div>
<div className='inline-block mr18'>
<button className={buttonStrokeClass}>Stroke</button>
</div>
<div className='inline-block mr18'>
<button disabled className={buttonStrokeClass}>Stroke</button>
</div>
<div className='inline-block mr18'>
<button className={`${buttonFillClass} round`}>Less round</button>
</div>
<div className='inline-block mr18'>
<button disabled className={`${buttonFillClass} round`}>Less round</button>
</div>
{!/^(darken5|darken10|darken25|lighten5|lighten10|lighten25)$/.test(color) ? <span>
<div className='inline-block mr18'>
<button className={buttonStrokeClass}>Stroke</button>
</div>
<div className='inline-block mr18'>
<button disabled className={buttonStrokeClass}>Stroke</button>
</div>
</span> : ''}

</div>
);
Expand Down
1 change: 0 additions & 1 deletion site/catalog/checkboxes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const colors = [
'orange',
'yellow',
'green',
'teal',
'blue',
'purple'
];
Expand Down
14 changes: 0 additions & 14 deletions site/catalog/inputs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,20 @@ import React from 'react';

const colors = [
null,
'gray-faint',
'gray-light',
'gray',
'gray-dark',
'pink',
'red',
'orange',
'yellow',
'green',
'teal',
'blue',
'purple',
'lighten5',
'lighten10',
'lighten25',
'lighten50',
'lighten75',
'darken5',
'darken10',
'darken25',
'darken50',
'darken75',
'black',
'white'
];

Expand Down Expand Up @@ -54,11 +45,6 @@ class Inputs extends React.Component {
Text inputs
</h2>

<div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>Text colors</div>
<div className='mb24'>
{colors.map((c) => <InputEl key={c} color={c} />)}
</div>

<div className='mb12 txt-bold color-darken50 txt-uppercase txt-s'>Border colors</div>
<div className='mb24'>
{colors.map((c) => <InputEl key={c} border={c} />)}
Expand Down
7 changes: 0 additions & 7 deletions site/catalog/links.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,17 @@ import React from 'react';

const colors = [
null,
'gray-faint',
'gray-light',
'gray',
'pink',
'red',
'orange',
'yellow',
'green',
'teal',
'blue',
'purple',
'lighten5',
'lighten10',
'lighten25',
'lighten50',
'lighten75',
'darken5',
'darken10',
'darken25',
'darken50',
'darken75',
Expand Down
1 change: 0 additions & 1 deletion site/catalog/radios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const colors = [
'orange',
'yellow',
'green',
'teal',
'blue',
'purple'
];
Expand Down
Loading

0 comments on commit 3c68ade

Please sign in to comment.