Skip to content

Instantly share code, notes, and snippets.

@bathos
Last active March 17, 2016 05:32
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bathos/7ecf15829c0c615d5c97 to your computer and use it in GitHub Desktop.
Save bathos/7ecf15829c0c615d5c97 to your computer and use it in GitHub Desktop.
md color classes (.text & .background w/ contrast text)
module.run(($mdColorPalette, $mdTheming) => {
const { THEMES } = $mdTheming;
const rules = [];
for (const themeName in THEMES) {
const { colors } = THEMES[themeName];
const themeCls = themeName == 'default' ? '' : `.md-${ themeName }-theme`;
for (const intention in colors) {
const intentCls = `.md-${ intention }`;
const {
name: color,
hues: {
'default': h0,
'hue-1': h1,
'hue-2': h2,
'hue-3': h3
}
} = colors[intention];
const palette = $mdColorPalette[color];
[ h0, h1, h2, h3 ]
.map(hue => {
const { contrast, value } = palette[hue];
return [ value, contrast ].map(([ ...rgb ]) =>
`rgb${ rgb.length == 4 ? 'a' : '' }(${ rgb.join(',') })`
);
})
.forEach(([ color, contrast ], i) => {
const hueCls = i ? `.md-hue-${ i }` : '';
const selector = [ themeCls, intentCls, hueCls ]
.filter(n => n)
.join('');
const textRule = `${ selector }.text{color:${ color }}`;
const bgRule = selector +
`.background{background-color:${ color };color:${ contrast }}`;
rules.push(textRule, bgRule);
});
}
}
const style = document.createElement('style');
document.head.appendChild(style);
const { sheet } = style;
rules.forEach(::sheet.insertRule);
});
@maciej-gurban
Copy link

Usage examples would be nice for those coming from google. Perhaps also explanation what :: is (since it's not ES6 as far as I know)

Edit: FYI, I tried defining a new palette using $mdThemingProvider.definePalette(), and your function failed at line 28 with:

Uncaught TypeError: Cannot read property '500' of undefined

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment