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/69b21576c34a111544c241d09c85f8dd to your computer and use it in GitHub Desktop.
Save robrez/69b21576c34a111544c241d09c85f8dd to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<!-- this markup is render by script, but sassmeister seems to have trouble with that -->
<!-- type anything here to force sassmeister to render!! -->
<h2>Bootstrap Color Gist</h2>
<section>
<div id="demo"></div>
</section>
<script>
var colors = [
'primary',
'secondary',
'success',
'info',
'warning',
'danger',
'create',
'light',
'dark',
'blue',
'indigo',
'purple',
'pink',
'red',
'orange',
'yellow',
'green',
'teal',
'cyan'
];
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>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.5.4)
// ----
// high-level gist of how bootstrap colors work..
// a color is defined
// for a given color, a number of tints (mix w/ white), shades (mix w/ black), lightnesses/darknesses (the L in HSL)
// are computed and used as needed
// Color contrast
// Covert color to yiq color space to determine if contrast color should be "white" or "black"
@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);
}
// Request a color level
// Mixes a color with white or black at a certain percentage
@function color-level($color: $primary, $level: 0) {
$color-base: if($level > 0, $black, $white);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}
$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;
$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
//CPSI CUSTOMIZATIONS
//CPSI CUSTOMIZATIONS
//CPSI CUSTOMIZATIONS
$primary: #106cc8;
$success: #19ACA4;
$danger: #ED5565;
$info: #31ccec;
$warning: #da882e;
$create: #9EDA2E;
$colors: () !default;
$colors: map-merge(
(
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"create": $create,
"light": $light,
"dark": $dark
),
$colors
);
$muted-bg-level: -10 !default;
$muted-border-level: -9 !default;
$muted-contrast-level: 6 !default;
html {
@each $name, $value in $colors {
// HERE IS WHERE COMPUTATIONS HAPPEN!
// HERE IS WHERE COMPUTATIONS HAPPEN!
// HERE IS WHERE COMPUTATIONS HAPPEN!
$border: $value;
$contrast: color-yiq($value);
$hover: darken($value, 7.5%);
$hover-border: darken($border, 10%);
$active: darken($value, 10%);
$active-border: darken($border, 12.5%);
$muted: color-level($value, $muted-bg-level); // mix w/ white at (8% * 10) = 80%
$muted-border: color-level($value, $muted-border-level); // mix w/ white at (8% * 9) = 72%
$muted-contrast: color-level($value, $muted-contrast-level); // mix w/ black at (8% * 6) = 48%
--#{$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, $value in $colors {
.#{$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 {
--blue-color: #0d6efd;
--blue-border: #0d6efd;
--blue-contrast: #fff;
--blue-hover: #025ce2;
--blue-hover-border: #0257d5;
--blue-active: #0257d5;
--blue-active-border: #0252c9;
--blue-muted: #cfe2ff;
--blue-muted-border: #bbd6fe;
--blue-muted-contrast: #073984;
--indigo-color: #6610f2;
--indigo-border: #6610f2;
--indigo-contrast: #fff;
--indigo-hover: #560bd0;
--indigo-hover-border: #510bc4;
--indigo-active: #510bc4;
--indigo-active-border: #4c0ab8;
--indigo-muted: #e0cffc;
--indigo-muted-border: #d4bcfb;
--indigo-muted-contrast: #35087e;
--purple-color: #6f42c1;
--purple-border: #6f42c1;
--purple-contrast: #fff;
--purple-hover: #5e37a6;
--purple-hover-border: #59339d;
--purple-active: #59339d;
--purple-active-border: #533093;
--purple-muted: #e2d9f3;
--purple-muted-border: #d7caee;
--purple-muted-contrast: #3a2264;
--pink-color: #d63384;
--pink-border: #d63384;
--pink-contrast: #fff;
--pink-hover: #bd2671;
--pink-hover-border: #b2246b;
--pink-active: #b2246b;
--pink-active-border: #a82264;
--pink-muted: #f7d6e6;
--pink-muted-border: #f4c6dd;
--pink-muted-contrast: #6f1b45;
--red-color: #dc3545;
--red-border: #dc3545;
--red-contrast: #fff;
--red-hover: #c82333;
--red-hover-border: #bd2130;
--red-active: #bd2130;
--red-active-border: #b21f2d;
--red-muted: #f8d7da;
--red-muted-border: #f5c6cb;
--red-muted-contrast: #721c24;
--orange-color: #fd7e14;
--orange-border: #fd7e14;
--orange-contrast: #212529;
--orange-hover: #e96b02;
--orange-hover-border: #dc6502;
--orange-active: #dc6502;
--orange-active-border: #cf5f02;
--orange-muted: #ffe5d0;
--orange-muted-border: #fedbbd;
--orange-muted-contrast: #84420a;
--yellow-color: #ffc107;
--yellow-border: #ffc107;
--yellow-contrast: #212529;
--yellow-hover: #e0a800;
--yellow-hover-border: #d39e00;
--yellow-active: #d39e00;
--yellow-active-border: #c69500;
--yellow-muted: #fff3cd;
--yellow-muted-border: #ffeeba;
--yellow-muted-contrast: #856404;
--green-color: #28a745;
--green-border: #28a745;
--green-contrast: #fff;
--green-hover: #218838;
--green-hover-border: #1e7e34;
--green-active: #1e7e34;
--green-active-border: #1c7430;
--green-muted: #d4edda;
--green-muted-border: #c3e6cb;
--green-muted-contrast: #155724;
--teal-color: #20c997;
--teal-border: #20c997;
--teal-contrast: #fff;
--teal-hover: #1ba87e;
--teal-hover-border: #199d76;
--teal-active: #199d76;
--teal-active-border: #17926e;
--teal-muted: #d2f4ea;
--teal-muted-border: #c1f0e2;
--teal-muted-contrast: #11694f;
--cyan-color: #17a2b8;
--cyan-border: #17a2b8;
--cyan-contrast: #fff;
--cyan-hover: #138496;
--cyan-hover-border: #117a8b;
--cyan-active: #117a8b;
--cyan-active-border: #10707f;
--cyan-muted: #d1ecf1;
--cyan-muted-border: #bee5eb;
--cyan-muted-contrast: #0c5460;
--primary-color: #106cc8;
--primary-border: #106cc8;
--primary-contrast: #fff;
--primary-hover: #0d59a5;
--primary-hover-border: #0c5399;
--primary-active: #0c5399;
--primary-active-border: #0b4c8d;
--primary-muted: #cfe2f4;
--primary-muted-border: #bcd6f0;
--primary-muted-contrast: #083868;
--secondary-color: #6c757d;
--secondary-border: #6c757d;
--secondary-contrast: #fff;
--secondary-hover: #5a6268;
--secondary-hover-border: #545b62;
--secondary-active: #545b62;
--secondary-active-border: #4e555b;
--secondary-muted: #e2e3e5;
--secondary-muted-border: #d6d8db;
--secondary-muted-contrast: #383d41;
--success-color: #19ACA4;
--success-border: #19ACA4;
--success-contrast: #fff;
--success-hover: #148b84;
--success-hover-border: #137f7a;
--success-active: #137f7a;
--success-active-border: #11746f;
--success-muted: #d1eeed;
--success-muted-border: #bfe8e6;
--success-muted-contrast: #0d5955;
--info-color: #31ccec;
--info-border: #31ccec;
--info-contrast: #212529;
--info-hover: #15bfe2;
--info-hover-border: #14b5d6;
--info-active: #14b5d6;
--info-active-border: #13abcb;
--info-muted: #d6f5fb;
--info-muted-border: #c5f1fa;
--info-muted-contrast: #196a7b;
--warning-color: #da882e;
--warning-border: #da882e;
--warning-contrast: #212529;
--warning-hover: #c07522;
--warning-hover-border: #b56e20;
--warning-active: #b56e20;
--warning-active-border: #aa671e;
--warning-muted: #f8e7d5;
--warning-muted-border: #f5dec4;
--warning-muted-contrast: #714718;
--danger-color: #ED5565;
--danger-border: #ED5565;
--danger-contrast: #fff;
--danger-hover: #e93246;
--danger-hover-border: #e8273b;
--danger-active: #e8273b;
--danger-active-border: #e71b31;
--danger-muted: #fbdde0;
--danger-muted-border: #facfd4;
--danger-muted-contrast: #7b2c35;
--create-color: #9EDA2E;
--create-border: #9EDA2E;
--create-contrast: #212529;
--create-hover: #89c022;
--create-hover-border: #81b520;
--create-active: #81b520;
--create-active-border: #79aa1e;
--create-muted: #ecf8d5;
--create-muted-border: #e4f5c4;
--create-muted-contrast: #527118;
--light-color: #f8f9fa;
--light-border: #f8f9fa;
--light-contrast: #212529;
--light-hover: #e2e6ea;
--light-hover-border: #dae0e5;
--light-active: #dae0e5;
--light-active-border: #d3d9df;
--light-muted: #fefefe;
--light-muted-border: #fdfdfe;
--light-muted-contrast: #818182;
--dark-color: #343a40;
--dark-border: #343a40;
--dark-contrast: #fff;
--dark-hover: #23272b;
--dark-hover-border: #1d2124;
--dark-active: #1d2124;
--dark-active-border: #171a1d;
--dark-muted: #d6d8d9;
--dark-muted-border: #c6c8ca;
--dark-muted-contrast: #1b1e21;
}
.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);
}
.indigo {
--example-color: var(--indigo-color);
--example-border: var(--indigo-border);
--example-contrast: var(--indigo-contrast);
--example-hover: var(--indigo-hover);
--example-hover-border: var(--indigo-hover-border);
--example-active: var(--indigo-active);
--example-active-border: var(--indigo-active-border);
--example-muted: var(--indigo-muted);
--example-muted-border: var(--indigo-muted-border);
--example-muted-contrast: var(--indigo-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);
}
.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);
}
.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);
}
.cyan {
--example-color: var(--cyan-color);
--example-border: var(--cyan-border);
--example-contrast: var(--cyan-contrast);
--example-hover: var(--cyan-hover);
--example-hover-border: var(--cyan-hover-border);
--example-active: var(--cyan-active);
--example-active-border: var(--cyan-active-border);
--example-muted: var(--cyan-muted);
--example-muted-border: var(--cyan-muted-border);
--example-muted-contrast: var(--cyan-muted-contrast);
}
.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);
}
.success {
--example-color: var(--success-color);
--example-border: var(--success-border);
--example-contrast: var(--success-contrast);
--example-hover: var(--success-hover);
--example-hover-border: var(--success-hover-border);
--example-active: var(--success-active);
--example-active-border: var(--success-active-border);
--example-muted: var(--success-muted);
--example-muted-border: var(--success-muted-border);
--example-muted-contrast: var(--success-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);
}
.danger {
--example-color: var(--danger-color);
--example-border: var(--danger-border);
--example-contrast: var(--danger-contrast);
--example-hover: var(--danger-hover);
--example-hover-border: var(--danger-hover-border);
--example-active: var(--danger-active);
--example-active-border: var(--danger-active-border);
--example-muted: var(--danger-muted);
--example-muted-border: var(--danger-muted-border);
--example-muted-contrast: var(--danger-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);
}
.light {
--example-color: var(--light-color);
--example-border: var(--light-border);
--example-contrast: var(--light-contrast);
--example-hover: var(--light-hover);
--example-hover-border: var(--light-hover-border);
--example-active: var(--light-active);
--example-active-border: var(--light-active-border);
--example-muted: var(--light-muted);
--example-muted-border: var(--light-muted-border);
--example-muted-contrast: var(--light-muted-contrast);
}
.dark {
--example-color: var(--dark-color);
--example-border: var(--dark-border);
--example-contrast: var(--dark-contrast);
--example-hover: var(--dark-hover);
--example-hover-border: var(--dark-hover-border);
--example-active: var(--dark-active);
--example-active-border: var(--dark-active-border);
--example-muted: var(--dark-muted);
--example-muted-border: var(--dark-muted-border);
--example-muted-contrast: var(--dark-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>
<!-- this markup is render by script, but sassmeister seems to have trouble with that -->
<!-- type anything here to force sassmeister to render!! -->
<h2>Bootstrap Color Gist</h2>
<section>
<div id="demo"></div>
</section>
<script>
var colors = [
'primary',
'secondary',
'success',
'info',
'warning',
'danger',
'create',
'light',
'dark',
'blue',
'indigo',
'purple',
'pink',
'red',
'orange',
'yellow',
'green',
'teal',
'cyan'
];
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>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment