Last active
January 22, 2020 23:20
-
-
Save robrez/76eb6e2ecd7b64de4b42140f7d2b6560 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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