Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Topic Color Idea
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Bourbon (v4.2.3)
// ----
@import "bourbon/bourbon";
$topics: (
html: #39ADD1,
css: #3079AB,
javascript: #c25975,
ruby: #e15258,
business: #F9845B,
wordpress: #838CC7,
php: #7D669E,
ios: #53BBB4,
android: #5cb860,
design: #e59a13,
devtools: #637a91,
java: #2c9676,
python: #f092b0,
diglit: #c38cd4,
game-development: #20898c,
csharp: #9e4d83,
undefined: #717b85
);
@function topic-color($key) {
@if map-has-key($topics, $key) {
@return map-get($topics, $key);
}
@warn "Unknown `#{$key}` in $topics.";
@return null;
}
@each $topic_name, $topic in $topics {
$properties: fill stroke color border-color background-color;
@each $property in $properties {
.add-#{$topic_name}-#{$property} {
#{$property}: topic-color(#{$topic_name});
}
}
}
.add-html-fill {
fill: #39ADD1;
}
.add-html-stroke {
stroke: #39ADD1;
}
.add-html-color {
color: #39ADD1;
}
.add-html-border-color {
border-color: #39ADD1;
}
.add-html-background-color {
background-color: #39ADD1;
}
.add-css-fill {
fill: #3079AB;
}
.add-css-stroke {
stroke: #3079AB;
}
.add-css-color {
color: #3079AB;
}
.add-css-border-color {
border-color: #3079AB;
}
.add-css-background-color {
background-color: #3079AB;
}
.add-javascript-fill {
fill: #c25975;
}
.add-javascript-stroke {
stroke: #c25975;
}
.add-javascript-color {
color: #c25975;
}
.add-javascript-border-color {
border-color: #c25975;
}
.add-javascript-background-color {
background-color: #c25975;
}
.add-ruby-fill {
fill: #e15258;
}
.add-ruby-stroke {
stroke: #e15258;
}
.add-ruby-color {
color: #e15258;
}
.add-ruby-border-color {
border-color: #e15258;
}
.add-ruby-background-color {
background-color: #e15258;
}
.add-business-fill {
fill: #F9845B;
}
.add-business-stroke {
stroke: #F9845B;
}
.add-business-color {
color: #F9845B;
}
.add-business-border-color {
border-color: #F9845B;
}
.add-business-background-color {
background-color: #F9845B;
}
.add-wordpress-fill {
fill: #838CC7;
}
.add-wordpress-stroke {
stroke: #838CC7;
}
.add-wordpress-color {
color: #838CC7;
}
.add-wordpress-border-color {
border-color: #838CC7;
}
.add-wordpress-background-color {
background-color: #838CC7;
}
.add-php-fill {
fill: #7D669E;
}
.add-php-stroke {
stroke: #7D669E;
}
.add-php-color {
color: #7D669E;
}
.add-php-border-color {
border-color: #7D669E;
}
.add-php-background-color {
background-color: #7D669E;
}
.add-ios-fill {
fill: #53BBB4;
}
.add-ios-stroke {
stroke: #53BBB4;
}
.add-ios-color {
color: #53BBB4;
}
.add-ios-border-color {
border-color: #53BBB4;
}
.add-ios-background-color {
background-color: #53BBB4;
}
.add-android-fill {
fill: #5cb860;
}
.add-android-stroke {
stroke: #5cb860;
}
.add-android-color {
color: #5cb860;
}
.add-android-border-color {
border-color: #5cb860;
}
.add-android-background-color {
background-color: #5cb860;
}
.add-design-fill {
fill: #e59a13;
}
.add-design-stroke {
stroke: #e59a13;
}
.add-design-color {
color: #e59a13;
}
.add-design-border-color {
border-color: #e59a13;
}
.add-design-background-color {
background-color: #e59a13;
}
.add-devtools-fill {
fill: #637a91;
}
.add-devtools-stroke {
stroke: #637a91;
}
.add-devtools-color {
color: #637a91;
}
.add-devtools-border-color {
border-color: #637a91;
}
.add-devtools-background-color {
background-color: #637a91;
}
.add-java-fill {
fill: #2c9676;
}
.add-java-stroke {
stroke: #2c9676;
}
.add-java-color {
color: #2c9676;
}
.add-java-border-color {
border-color: #2c9676;
}
.add-java-background-color {
background-color: #2c9676;
}
.add-python-fill {
fill: #f092b0;
}
.add-python-stroke {
stroke: #f092b0;
}
.add-python-color {
color: #f092b0;
}
.add-python-border-color {
border-color: #f092b0;
}
.add-python-background-color {
background-color: #f092b0;
}
.add-diglit-fill {
fill: #c38cd4;
}
.add-diglit-stroke {
stroke: #c38cd4;
}
.add-diglit-color {
color: #c38cd4;
}
.add-diglit-border-color {
border-color: #c38cd4;
}
.add-diglit-background-color {
background-color: #c38cd4;
}
.add-game-development-fill {
fill: #20898c;
}
.add-game-development-stroke {
stroke: #20898c;
}
.add-game-development-color {
color: #20898c;
}
.add-game-development-border-color {
border-color: #20898c;
}
.add-game-development-background-color {
background-color: #20898c;
}
.add-csharp-fill {
fill: #9e4d83;
}
.add-csharp-stroke {
stroke: #9e4d83;
}
.add-csharp-color {
color: #9e4d83;
}
.add-csharp-border-color {
border-color: #9e4d83;
}
.add-csharp-background-color {
background-color: #9e4d83;
}
.add-undefined-fill {
fill: #717b85;
}
.add-undefined-stroke {
stroke: #717b85;
}
.add-undefined-color {
color: #717b85;
}
.add-undefined-border-color {
border-color: #717b85;
}
.add-undefined-background-color {
background-color: #717b85;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.