Skip to content

Instantly share code, notes, and snippets.

@robrez

robrez/SassMeister-input-HTML.html

Last active January 22, 2020 23:20
Show Gist options
  • Save robrez/76eb6e2ecd7b64de4b42140f7d2b6560 to your computer and use it in GitHub Desktop.
Save robrez/76eb6e2ecd7b64de4b42140f7d2b6560 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<h2>Semantic-UI Color Gist</h2>
<section>
<!-- this markup is render by script, but sassmeister seems to have trouble with that -->
<!-- type anything here to force sassmeister to render!! -->
asd
<div id="demo">
</div>
</section>
</html>
<script>
var colors = [
"primary",
"secondary",
"positive",
"info",
"warning",
"negative",
"create",
"red",
"orange",
"yellow",
"olive",
"green",
"teal",
"blue",
"violet",
"purple",
"pink",
"brown"
];
var content = '';
colors.forEach( (color) => {
var example = `
<div class="example ${color}">${color}</div>
<div class="example muted ${color}">${color}</div>
`;
content = content + example + '\n'
} );
document.getElementById('demo').innerHTML = content;
</script>
Raw
SassMeister-input.scss
// ----
// libsass (v3.5.4)
// ----
// High level gist of how semantic ui color system works
// Unlike bootstrap, where all variations of a color come from a formula
// Semantic UI system requires that multiple variables for each color are
// defined explicitly. There are still some subsequent color computations
// .. it's just that the computations require constants be declared
// .. This also makes adding new colors more subjective
// Note in the examples herein, each color requires 4 variables be declared
// this is also paired down from what is actually required
// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@return if($yiq >= $yiq-contrasted-threshold, $dark, $light);
}
// Equivalenct to less's "relative" saturation option
@function saturate-relative($color, $amt) {
$h: hue($color);
$s: saturation($color);
$l: lightness($color);
$sRel: $s + ($s * ($amt / 100));
@return hsl($h, $sRel, $l);
}
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;
$red: #db2828;
$red-muted: #ffe8e6;
$red-text-color: $red;
$red-border: $red-text-color;
$orange: #f2711c;
$orange-muted: #ffedde;
$orange-text-color: $orange;
$orange-border: $orange-text-color;
$yellow: #fbbd08;
$yellow-muted: #fff8db;
$yellow-text-color: #b58105; // Yellow text is difficult to read
$yellow-border: $yellow-text-color;
$olive: #b5cc18;
$olive-muted: #fbfdef;
$olive-text-color: #8abc1e; // Olive is difficult to read
$olive-border: $olive-text-color;
$green: #21ba45;
$green-muted: #e5f9e7;
$green-text-color: #1ebc30; // Green is difficult to read
$green-border: $green-text-color;
$teal: #00b5ad;
$teal-muted: #e1f7f7;
$teal-text-color: #10a3a3; // Teal text is difficult to read
$teal-border: $teal-text-color;
$blue: #2185d0;
$blue-muted: #dff0ff;
$blue-text-color: $blue;
$blue-border: $blue-text-color;
$violet: #6435c9;
$violet-muted: #eae7ff;
$violet-text-color: $violet;
$violet-border: $violet-text-color;
$purple: #a333c8;
$purple-muted: #f6e7ff;
$purple-text-color: $purple;
$purple-border: $purple-text-color;
$pink: #e03997;
$pink-muted: #ffe3fb;
$pink-text-color: $pink;
$pink-border: $pink-text-color;
$brown: #a5673f;
$brown-muted: #f1e2d3;
$brown-text-color: $brown;
$brown-border: $brown-text-color;
$grey: #767676;
$grey-muted: $gray-300; // todo compute -- borrowed
$grey-text-color: $grey;
$grey-border: $grey-text-color;
$black: #1b1c1d;
$black-muted: $gray-400; // TODO compute -- borrowed
$black-text-color: $black;
$black-border: $black-text-color;
//semantic coloring
$primary: #106cc8;
$primary-muted: $blue-muted; //todo
$primary-border: $primary;
$primary-text-color: #00458b;
// secondary is grey
$secondary: $grey;
$secondary-muted: $grey-muted;
$secondary-border: $grey-border;
$secondary-text-color: $grey-text-color;
$positive: #19ACA4;
$positive-muted: #EDFFFB;
$positive-border: $positive;
$positive-text-color: #006551;
$negative: #ED5565;
$negative-muted: #FFEDF1;
$negative-border: $negative;
$negative-text-color: #B72333;
$info: #31ccec;
$info-muted: #f8ffff;
$info-border: #a9d5de;
$info-text-color: #276f86;
$warning: #da882e;
$warning-muted: #fff1d1;
$warning-border: $warning;
$warning-text-color: #b75400;
$create: #9EDA2E;
$create-muted: #D4F29D;
$create-border: $create;
$create-text-color: #6B9124;
$colors: () !default;
$colors: map-merge(
(
"red": $red,
"red-muted": $red-muted,
"red-border": $red-border,
"red-text-color": $red-text-color,
"orange": $orange,
"orange-muted": $orange-muted,
"orange-border": $orange-border,
"orange-text-color": $orange-text-color,
"yellow": $yellow,
"yellow-muted": $yellow-muted,
"yellow-border": $yellow-border,
"yellow-text-color": $yellow-text-color,
"olive": $olive,
"olive-muted": $olive-muted,
"olive-border": $olive-border,
"olive-text-color": $olive-text-color,
"green": $green,
"green-muted": $green-muted,
"green-border": $green-border,
"green-text-color": $green-text-color,
"teal": $teal,
"teal-muted": $teal-muted,
"teal-border": $teal-border,
"teal-text-color": $teal-text-color,
"blue": $blue,
"blue-muted": $blue-muted,
"blue-border": $blue-border,
"blue-text-color": $blue-text-color,
"violet": $violet,
"violet-muted": $violet-muted,
"violet-border": $violet-border,
"violet-text-color": $violet-text-color,
"purple": $purple,
"purple-muted": $purple-muted,
"purple-border": $purple-border,
"purple-text-color": $purple-text-color,
"pink": $pink,
"pink-muted": $pink-muted,
"pink-border": $pink-border,
"pink-text-color": $pink-text-color,
"brown": $brown,
"brown-muted": $brown-muted,
"brown-border": $brown-border,
"brown-text-color": $brown-text-color,
"primary": $primary,
"primary-muted": $primary-muted,
"primary-border": $primary-border,
"primary-text-color": $primary-text-color,
"secondary": $secondary,
"secondary-muted": $secondary-muted,
"secondary-border": $secondary-border,
"secondary-text-color": $secondary-text-color,
"positive": $positive,
"positive-muted": $positive-muted,
"positive-border": $positive-border,
"positive-text-color": $positive-text-color,
"info": $info,
"info-muted": $info-muted,
"info-border": $info-border,
"info-text-color": $info-text-color,
"warning": $warning,
"warning-muted": $warning-muted,
"warning-border": $warning-border,
"warning-text-color": $warning-text-color,
"negative": $negative,
"negative-muted": $negative-muted,
"negative-border": $negative-border,
"negative-text-color": $negative-text-color,
"create": $create,
"create-muted": $create-muted,
"create-border": $create-border,
"create-text-color": $create-text-color,
),
$colors
);
$colorNames: (
"primary",
"secondary",
"positive",
"info",
"warning",
"negative",
"create",
"red",
"orange",
"yellow",
"olive",
"green",
"teal",
"blue",
"violet",
"purple",
"pink",
"brown"
);
html {
--color-names: #{$colorNames};
@each $name in $colorNames {
// HERE IS WHERE COMPUTATIONS HAPPEN!
// HERE IS WHERE COMPUTATIONS HAPPEN!
// HERE IS WHERE COMPUTATIONS HAPPEN!
$value: map-get($colors, #{$name});
$border: map-get($colors, #{$name}-border);
$contrast: color-yiq($value);
$hover: saturate-relative(darken($value, 5), 10);
$hover-border: $hover;
$active: darken($value, 10%);
$active-border: $active;
$muted: map-get($colors, #{$name}-muted);
$muted-border: $muted;
$muted-contrast: map-get($colors, #{$name}-text-color);
--#{$name}-color: #{$value};
--#{$name}-border: #{$border};
--#{$name}-contrast: #{$contrast};
--#{$name}-hover: #{$hover};
--#{$name}-hover-border: #{$hover-border};
--#{$name}-active: #{$active};
--#{$name}-active-border: #{$active-border};
--#{$name}-muted: #{$muted};
--#{$name}-muted-border: #{$muted-border};
--#{$name}-muted-contrast: #{$muted-contrast};
}
}
@each $name in $colorNames {
.#{$name} {
--example-color: var(--#{$name}-color);
--example-border: var(--#{$name}-border);
--example-contrast: var(--#{$name}-contrast);
--example-hover: var(--#{$name}-hover);
--example-hover-border: var(--#{$name}-hover-border);
--example-active: var(--#{$name}-active);
--example-active-border: var(--#{$name}-active-border);
--example-muted: var(--#{$name}-muted);
--example-muted-border: var(--#{$name}-muted-border);
--example-muted-contrast: var(--#{$name}-muted-contrast);
}
}
#demo {
display: flex;
flex-wrap: wrap;
}
div.example {
display: flex;
padding: 2px 4px;
align-items:center;
justify-content: center;
height: 64px;
width: 64px;
max-width: 128px;
background-color: var(--example-color);
border: 1px solid var(--example-border);
color: var(--example-contrast);
margin: 2px;
border-radius: 2px;
}
div.example.muted {
background-color: var(--example-muted);
border: 1px solid var(--example-muted-border);
color: var(--example-muted-contrast);
}
div.example:hover {
background-color: var(--example-hover);
border: 1px solid var(--example-hover-border);
color: var(--example-contrast);
}
div.example:active {
background-color: var(--example-active);
border: 1px solid var(--example-active-border);
color: var(--example-contrast);
}
Raw
SassMeister-output.css
html {
--color-names: primary, secondary, positive, info, warning, negative, create, red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown;
--primary-color: #106cc8;
--primary-border: #106cc8;
--primary-contrast: #fff;
--primary-hover: #065fb9;
--primary-hover-border: #065fb9;
--primary-active: #0c5399;
--primary-active-border: #0c5399;
--primary-muted: #dff0ff;
--primary-muted-border: #dff0ff;
--primary-muted-contrast: #00458b;
--secondary-color: #767676;
--secondary-border: #767676;
--secondary-contrast: #fff;
--secondary-hover: dimgray;
--secondary-hover-border: dimgray;
--secondary-active: #5d5d5d;
--secondary-active-border: #5d5d5d;
--secondary-muted: #dee2e6;
--secondary-muted-border: #dee2e6;
--secondary-muted-contrast: #767676;
--positive-color: #19ACA4;
--positive-border: #19ACA4;
--positive-contrast: #fff;
--positive-hover: #0f9c94;
--positive-hover-border: #0f9c94;
--positive-active: #137f7a;
--positive-active-border: #137f7a;
--positive-muted: #EDFFFB;
--positive-muted-border: #EDFFFB;
--positive-muted-contrast: #006551;
--info-color: #31ccec;
--info-border: #a9d5de;
--info-contrast: #212529;
--info-hover: #0fcdf4;
--info-hover-border: #0fcdf4;
--info-active: #14b5d6;
--info-active-border: #14b5d6;
--info-muted: #f8ffff;
--info-muted-border: #f8ffff;
--info-muted-contrast: #276f86;
--warning-color: #da882e;
--warning-border: #da882e;
--warning-contrast: #212529;
--warning-hover: #d37c1c;
--warning-hover-border: #d37c1c;
--warning-active: #b56e20;
--warning-active-border: #b56e20;
--warning-muted: #fff1d1;
--warning-muted-border: #fff1d1;
--warning-muted-contrast: #b75400;
--negative-color: #ED5565;
--negative-border: #ED5565;
--negative-contrast: #fff;
--negative-hover: #f33549;
--negative-hover-border: #f33549;
--negative-active: #e8273b;
--negative-active-border: #e8273b;
--negative-muted: #FFEDF1;
--negative-muted-border: #FFEDF1;
--negative-muted-contrast: #B72333;
--create-color: #9EDA2E;
--create-border: #9EDA2E;
--create-contrast: #212529;
--create-hover: #93d31c;
--create-hover-border: #93d31c;
--create-active: #81b520;
--create-active-border: #81b520;
--create-muted: #D4F29D;
--create-muted-border: #D4F29D;
--create-muted-contrast: #6B9124;
--red-color: #db2828;
--red-border: #db2828;
--red-contrast: #fff;
--red-hover: #d01919;
--red-hover-border: #d01919;
--red-active: #b21e1e;
--red-active-border: #b21e1e;
--red-muted: #ffe8e6;
--red-muted-border: #ffe8e6;
--red-muted-contrast: #db2828;
--orange-color: #f2711c;
--orange-border: #f2711c;
--orange-contrast: #fff;
--orange-hover: #f26202;
--orange-hover-border: #f26202;
--orange-active: #cf590c;
--orange-active-border: #cf590c;
--orange-muted: #ffedde;
--orange-muted-border: #ffedde;
--orange-muted-contrast: #f2711c;
--yellow-color: #fbbd08;
--yellow-border: #b58105;
--yellow-contrast: #212529;
--yellow-hover: #eaae00;
--yellow-hover-border: #eaae00;
--yellow-active: #cd9903;
--yellow-active-border: #cd9903;
--yellow-muted: #fff8db;
--yellow-muted-border: #fff8db;
--yellow-muted-contrast: #b58105;
--olive-color: #b5cc18;
--olive-border: #8abc1e;
--olive-contrast: #212529;
--olive-hover: #a7bd0d;
--olive-hover-border: #a7bd0d;
--olive-active: #8d9e13;
--olive-active-border: #8d9e13;
--olive-muted: #fbfdef;
--olive-muted-border: #fbfdef;
--olive-muted-contrast: #8abc1e;
--green-color: #21ba45;
--green-border: #1ebc30;
--green-contrast: #fff;
--green-hover: #16ab39;
--green-hover-border: #16ab39;
--green-active: #198f35;
--green-active-border: #198f35;
--green-muted: #e5f9e7;
--green-muted-border: #e5f9e7;
--green-muted-contrast: #1ebc30;
--teal-color: #00b5ad;
--teal-border: #10a3a3;
--teal-contrast: #fff;
--teal-hover: #009c95;
--teal-hover-border: #009c95;
--teal-active: #00827c;
--teal-active-border: #00827c;
--teal-muted: #e1f7f7;
--teal-muted-border: #e1f7f7;
--teal-muted-contrast: #10a3a3;
--blue-color: #2185d0;
--blue-border: #2185d0;
--blue-contrast: #fff;
--blue-hover: #1678c2;
--blue-hover-border: #1678c2;
--blue-active: #1a69a4;
--blue-active-border: #1a69a4;
--blue-muted: #dff0ff;
--blue-muted-border: #dff0ff;
--blue-muted-contrast: #2185d0;
--violet-color: #6435c9;
--violet-border: #6435c9;
--violet-contrast: #fff;
--violet-hover: #5829bb;
--violet-hover-border: #5829bb;
--violet-active: #502aa1;
--violet-active-border: #502aa1;
--violet-muted: #eae7ff;
--violet-muted-border: #eae7ff;
--violet-muted-contrast: #6435c9;
--purple-color: #a333c8;
--purple-border: #a333c8;
--purple-contrast: #fff;
--purple-hover: #9627ba;
--purple-hover-border: #9627ba;
--purple-active: #82299f;
--purple-active-border: #82299f;
--purple-muted: #f6e7ff;
--purple-muted-border: #f6e7ff;
--purple-muted-contrast: #a333c8;
--pink-color: #e03997;
--pink-border: #e03997;
--pink-contrast: #fff;
--pink-hover: #e61a8d;
--pink-hover-border: #e61a8d;
--pink-active: #c71f7e;
--pink-active-border: #c71f7e;
--pink-muted: #ffe3fb;
--pink-muted-border: #ffe3fb;
--pink-muted-contrast: #e03997;
--brown-color: #a5673f;
--brown-border: #a5673f;
--brown-contrast: #fff;
--brown-hover: #975b33;
--brown-hover-border: #975b33;
--brown-active: #805031;
--brown-active-border: #805031;
--brown-muted: #f1e2d3;
--brown-muted-border: #f1e2d3;
--brown-muted-contrast: #a5673f;
}
.primary {
--example-color: var(--primary-color);
--example-border: var(--primary-border);
--example-contrast: var(--primary-contrast);
--example-hover: var(--primary-hover);
--example-hover-border: var(--primary-hover-border);
--example-active: var(--primary-active);
--example-active-border: var(--primary-active-border);
--example-muted: var(--primary-muted);
--example-muted-border: var(--primary-muted-border);
--example-muted-contrast: var(--primary-muted-contrast);
}
.secondary {
--example-color: var(--secondary-color);
--example-border: var(--secondary-border);
--example-contrast: var(--secondary-contrast);
--example-hover: var(--secondary-hover);
--example-hover-border: var(--secondary-hover-border);
--example-active: var(--secondary-active);
--example-active-border: var(--secondary-active-border);
--example-muted: var(--secondary-muted);
--example-muted-border: var(--secondary-muted-border);
--example-muted-contrast: var(--secondary-muted-contrast);
}
.positive {
--example-color: var(--positive-color);
--example-border: var(--positive-border);
--example-contrast: var(--positive-contrast);
--example-hover: var(--positive-hover);
--example-hover-border: var(--positive-hover-border);
--example-active: var(--positive-active);
--example-active-border: var(--positive-active-border);
--example-muted: var(--positive-muted);
--example-muted-border: var(--positive-muted-border);
--example-muted-contrast: var(--positive-muted-contrast);
}
.info {
--example-color: var(--info-color);
--example-border: var(--info-border);
--example-contrast: var(--info-contrast);
--example-hover: var(--info-hover);
--example-hover-border: var(--info-hover-border);
--example-active: var(--info-active);
--example-active-border: var(--info-active-border);
--example-muted: var(--info-muted);
--example-muted-border: var(--info-muted-border);
--example-muted-contrast: var(--info-muted-contrast);
}
.warning {
--example-color: var(--warning-color);
--example-border: var(--warning-border);
--example-contrast: var(--warning-contrast);
--example-hover: var(--warning-hover);
--example-hover-border: var(--warning-hover-border);
--example-active: var(--warning-active);
--example-active-border: var(--warning-active-border);
--example-muted: var(--warning-muted);
--example-muted-border: var(--warning-muted-border);
--example-muted-contrast: var(--warning-muted-contrast);
}
.negative {
--example-color: var(--negative-color);
--example-border: var(--negative-border);
--example-contrast: var(--negative-contrast);
--example-hover: var(--negative-hover);
--example-hover-border: var(--negative-hover-border);
--example-active: var(--negative-active);
--example-active-border: var(--negative-active-border);
--example-muted: var(--negative-muted);
--example-muted-border: var(--negative-muted-border);
--example-muted-contrast: var(--negative-muted-contrast);
}
.create {
--example-color: var(--create-color);
--example-border: var(--create-border);
--example-contrast: var(--create-contrast);
--example-hover: var(--create-hover);
--example-hover-border: var(--create-hover-border);
--example-active: var(--create-active);
--example-active-border: var(--create-active-border);
--example-muted: var(--create-muted);
--example-muted-border: var(--create-muted-border);
--example-muted-contrast: var(--create-muted-contrast);
}
.red {
--example-color: var(--red-color);
--example-border: var(--red-border);
--example-contrast: var(--red-contrast);
--example-hover: var(--red-hover);
--example-hover-border: var(--red-hover-border);
--example-active: var(--red-active);
--example-active-border: var(--red-active-border);
--example-muted: var(--red-muted);
--example-muted-border: var(--red-muted-border);
--example-muted-contrast: var(--red-muted-contrast);
}
.orange {
--example-color: var(--orange-color);
--example-border: var(--orange-border);
--example-contrast: var(--orange-contrast);
--example-hover: var(--orange-hover);
--example-hover-border: var(--orange-hover-border);
--example-active: var(--orange-active);
--example-active-border: var(--orange-active-border);
--example-muted: var(--orange-muted);
--example-muted-border: var(--orange-muted-border);
--example-muted-contrast: var(--orange-muted-contrast);
}
.yellow {
--example-color: var(--yellow-color);
--example-border: var(--yellow-border);
--example-contrast: var(--yellow-contrast);
--example-hover: var(--yellow-hover);
--example-hover-border: var(--yellow-hover-border);
--example-active: var(--yellow-active);
--example-active-border: var(--yellow-active-border);
--example-muted: var(--yellow-muted);
--example-muted-border: var(--yellow-muted-border);
--example-muted-contrast: var(--yellow-muted-contrast);
}
.olive {
--example-color: var(--olive-color);
--example-border: var(--olive-border);
--example-contrast: var(--olive-contrast);
--example-hover: var(--olive-hover);
--example-hover-border: var(--olive-hover-border);
--example-active: var(--olive-active);
--example-active-border: var(--olive-active-border);
--example-muted: var(--olive-muted);
--example-muted-border: var(--olive-muted-border);
--example-muted-contrast: var(--olive-muted-contrast);
}
.green {
--example-color: var(--green-color);
--example-border: var(--green-border);
--example-contrast: var(--green-contrast);
--example-hover: var(--green-hover);
--example-hover-border: var(--green-hover-border);
--example-active: var(--green-active);
--example-active-border: var(--green-active-border);
--example-muted: var(--green-muted);
--example-muted-border: var(--green-muted-border);
--example-muted-contrast: var(--green-muted-contrast);
}
.teal {
--example-color: var(--teal-color);
--example-border: var(--teal-border);
--example-contrast: var(--teal-contrast);
--example-hover: var(--teal-hover);
--example-hover-border: var(--teal-hover-border);
--example-active: var(--teal-active);
--example-active-border: var(--teal-active-border);
--example-muted: var(--teal-muted);
--example-muted-border: var(--teal-muted-border);
--example-muted-contrast: var(--teal-muted-contrast);
}
.blue {
--example-color: var(--blue-color);
--example-border: var(--blue-border);
--example-contrast: var(--blue-contrast);
--example-hover: var(--blue-hover);
--example-hover-border: var(--blue-hover-border);
--example-active: var(--blue-active);
--example-active-border: var(--blue-active-border);
--example-muted: var(--blue-muted);
--example-muted-border: var(--blue-muted-border);
--example-muted-contrast: var(--blue-muted-contrast);
}
.violet {
--example-color: var(--violet-color);
--example-border: var(--violet-border);
--example-contrast: var(--violet-contrast);
--example-hover: var(--violet-hover);
--example-hover-border: var(--violet-hover-border);
--example-active: var(--violet-active);
--example-active-border: var(--violet-active-border);
--example-muted: var(--violet-muted);
--example-muted-border: var(--violet-muted-border);
--example-muted-contrast: var(--violet-muted-contrast);
}
.purple {
--example-color: var(--purple-color);
--example-border: var(--purple-border);
--example-contrast: var(--purple-contrast);
--example-hover: var(--purple-hover);
--example-hover-border: var(--purple-hover-border);
--example-active: var(--purple-active);
--example-active-border: var(--purple-active-border);
--example-muted: var(--purple-muted);
--example-muted-border: var(--purple-muted-border);
--example-muted-contrast: var(--purple-muted-contrast);
}
.pink {
--example-color: var(--pink-color);
--example-border: var(--pink-border);
--example-contrast: var(--pink-contrast);
--example-hover: var(--pink-hover);
--example-hover-border: var(--pink-hover-border);
--example-active: var(--pink-active);
--example-active-border: var(--pink-active-border);
--example-muted: var(--pink-muted);
--example-muted-border: var(--pink-muted-border);
--example-muted-contrast: var(--pink-muted-contrast);
}
.brown {
--example-color: var(--brown-color);
--example-border: var(--brown-border);
--example-contrast: var(--brown-contrast);
--example-hover: var(--brown-hover);
--example-hover-border: var(--brown-hover-border);
--example-active: var(--brown-active);
--example-active-border: var(--brown-active-border);
--example-muted: var(--brown-muted);
--example-muted-border: var(--brown-muted-border);
--example-muted-contrast: var(--brown-muted-contrast);
}
#demo {
display: flex;
flex-wrap: wrap;
}
div.example {
display: flex;
padding: 2px 4px;
align-items: center;
justify-content: center;
height: 64px;
width: 64px;
max-width: 128px;
background-color: var(--example-color);
border: 1px solid var(--example-border);
color: var(--example-contrast);
margin: 2px;
border-radius: 2px;
}
div.example.muted {
background-color: var(--example-muted);
border: 1px solid var(--example-muted-border);
color: var(--example-muted-contrast);
}
div.example:hover {
background-color: var(--example-hover);
border: 1px solid var(--example-hover-border);
color: var(--example-contrast);
}
div.example:active {
background-color: var(--example-active);
border: 1px solid var(--example-active-border);
color: var(--example-contrast);
}
Raw
SassMeister-rendered.html
<html>
<h2>Semantic-UI Color Gist</h2>
<section>
<!-- this markup is render by script, but sassmeister seems to have trouble with that -->
<!-- type anything here to force sassmeister to render!! -->
asd
<div id="demo">
</div>
</section>
</html>
<script>
var colors = [
"primary",
"secondary",
"positive",
"info",
"warning",
"negative",
"create",
"red",
"orange",
"yellow",
"olive",
"green",
"teal",
"blue",
"violet",
"purple",
"pink",
"brown"
];
var content = '';
colors.forEach( (color) => {
var example = `
<div class="example ${color}">${color}</div>
<div class="example muted ${color}">${color}</div>
`;
content = content + example + '\n'
} );
document.getElementById('demo').innerHTML = content;
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment