- @colors = ['blue', 'indigo', 'purple', 'pink', 'red', 'orange', 'yellow', 'green', 'teal', 'cyan', 'gray', 'gray-dark'];
- @variants = ['100', '200', '300', '400', '500', '600', '700', '800', '900'];
.container.text-center
%h1{:class=>"py-4"}
Bootstrap 5 Color Palette Generator
%br
%small{:class=>"text-muted"} Including Color Variants
%hr
- @colors.each do |color|
.row
%div{:class=>"bg-#{color} col py-2 text-uppercase"} #{color}
.row.mb-3
- @variants.each do |variant|
%div{:class=>"bg-#{color}-#{variant} col py-3"}
%small= "#{color}-#{variant}"
- @colors.each do |color|
.row
%div{:class=>"text-#{color} col py-2 text-uppercase"} #{color}
.row.mb-3.no-gutters
- @variants.each do |variant|
%div{:class=>" col "}
%div{:class=>"text-#{color}-#{variant} border border-#{color}-#{variant} mx-1 py-3"}
%small= "#{color}-#{variant}"
View Compiled
$white: #fff !default;
$black: #000 !default;
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$gray: #BAB1AD !default;
$gray-dark: #403734 !default;
$color-variants: (
100: -10%,
200: -25%,
300: -50%,
400: -75%,
500: 100%,
600: 75%,
700: 50%,
800: 25%,
900: 15%
);
$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,
"white": $white,
"gray": $gray,
"gray-dark": $gray-dark
), $colors);
// Add color variants to $colors
@each $color-name, $color in $colors {
@each $variant-name, $percent in $color-variants {
$mix-color: if($percent < 0%, white, black);
$colors: map-merge($colors, ($color-name+'-'+$variant-name: mix($color, $mix-color, abs($percent))));
}
}
/* remap grays */
$gray-100: map-get($colors, gray-100);
$gray-200: map-get($colors, gray-200);
$gray-300: map-get($colors, gray-300);
$gray-400: map-get($colors, gray-400);
$gray-500: map-get($colors, gray-500);
$gray-600: map-get($colors, gray-600);
$gray-700: map-get($colors, gray-700);
$gray-800: map-get($colors, gray-800);
$gray-900: map-get($colors, gray-900);
$enable-hover-media-query: true;
/* Bootstrap 4 mixins - no change */
@mixin hover {
// TODO: re-enable along with mq4-hover-shim
// @if $enable-hover-media-query {
// // See Media Queries Level 4: https://drafts.csswg.org/mediaqueries/#hover
// // Currently shimmed by https://github.com/twbs/mq4-hover-shim
// @media (hover: hover) {
// &:hover { @content }
// }
// }
// @else {
&:hover { @content; }
// }
}
@mixin hover-focus {
@if $enable-hover-media-query {
&:focus {
@content;
}
@include hover { @content; }
} @else {
&:focus,
&:hover {
@content;
}
}
}
@mixin text-emphasis-variant($parent, $color) {
#{$parent} {
color: $color !important;
}
a#{$parent} {
@include hover-focus {
color: darken($color, 10%) !important;
}
}
}
@mixin bg-variant($parent, $color) {
#{$parent} {
background-color: $color !important;
}
a#{$parent} {
@include hover-focus {
background-color: darken($color, 10%) !important;
}
}
}
// Color contrast - from Bootstrap 4 utilities - no change
@function color-yiq($color) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= 150) {
@return #111;
} @else {
@return #fff;
}
}
/* from Bootstrap 4 utilities - replaced $theme-colors with $colors */
// text colors
@each $color, $value in $colors {
@include text-emphasis-variant(".text-#{$color}", $value);
}
// background colors
@each $color, $value in $colors {
@include bg-variant(".bg-#{$color}", $value);
}
// background text contrast
@each $color, $value in $colors {
.bg-#{$color} {
color: color-yiq($value);
}
}
// border colors
@each $color, $value in $colors {
.border-#{$color} {
border-color: $value !important;
}
}
View Compiled