MuchMoony Color Pallete

by joplomacedo

HTML

<div class="group" >
    <div class="type">Main</div>
    <div class="colors">
        <div class="color" data-clipboard-text="#E6D4FC" style="background-color: var(--color-primary-100)"></div>
        <div class="color" data-clipboard-text="#CBABF9" style="background-color: var(--color-primary-200)"></div>
        <div class="color" data-clipboard-text="#A97EEF" style="background-color: var(--color-primary-300)"></div>
        <div class="color" data-clipboard-text="#895BE0" style="background-color: var(--color-primary-400)"></div>
        <div class="color" data-clipboard-text="#5E2BCC" style="background-color: var(--color-primary-500)"></div>
        <div class="color" data-clipboard-text="#481FAF" style="background-color: var(--color-primary-600)"></div>
        <div class="color" data-clipboard-text="#351592" style="background-color: var(--color-primary-700)"></div>
        <div class="color" data-clipboard-text="#240D76" style="background-color: var(--color-primary-800)"></div>
        <div class="color" data-clipboard-text="#180861" style="background-color: var(--color-primary-900)"></div>
    </div>
</div>

<div class="group">
    <div class="type">Success</div>
    <div class="colors">
        <div class="color" data-clipboard-text="#F3FCCE" style="background-color: var(--color-success-100)"></div>
        <div class="color" data-clipboard-text="#E5FA9F" style="background-color: var(--color-success-200)"></div>
        <div class="color" data-clipboard-text="#CEF16D" style="background-color: var(--color-success-300)"></div>
        <div class="color" data-clipboard-text="#B5E448" style="background-color: var(--color-success-400)"></div>
        <div class="color" data-clipboard-text="#93D313" style="background-color: var(--color-success-500)"></div>
        <div class="color" data-clipboard-text="#77B50D" style="background-color: var(--color-success-600)"></div>
        <div class="color" data-clipboard-text="#5E9709" style="background-color:...

CSS

:root {
  --color-primary-100: #E6D4FC;
  --color-primary-200: #CBABF9;
  --color-primary-300: #A97EEF;
  --color-primary-400: #895BE0;
  --color-primary-500: #5E2BCC;
  --color-primary-600: #481FAF;
  --color-primary-700: #351592;
  --color-primary-800: #240D76;
  --color-primary-900: #180861;
  --color-success-100: #F3FCCE;
  --color-success-200: #E5FA9F;
  --color-success-300: #CEF16D;
  --color-success-400: #B5E448;
  --color-success-500: #93D313;
  --color-success-600: #77B50D;
  --color-success-700: #5E9709;
  --color-success-800: #477A06;
  --color-success-900: #376503;
  --color-info-100: #DAF6FE;
  --color-info-200: #B5E9FE;
  --color-info-300: #90D7FC;
  --color-info-400: #74C5FA;
  --color-info-500: #47A8F8;
  --color-info-600: #3383D5;
  --color-info-700: #2362B2;
  --color-info-800: #16458F;
  --color-info-900: #0D3077;
  --color-warning-100: #FEF3CD;
  --color-warning-200: #FEE39B;
  --color-warning-300: #FECE69;
  --color-warning-400: #FDBA44;
  --color-warning-500: #FC9A07;
  --color-warning-600: #D87B05;
  --color-warning-700: #B55F03;
  --color-warning-800: #924702;
  --color-warning-900: #783501;
  --color-danger-100: #FEE2D3;
  --color-danger-200: #FDBEA8;
  --color-danger-300: #FB927C;
  --color-danger-400: #F8695B;
  --color-danger-500: #F42727;
  --color-danger-600: #D11C2C;
  --color-danger-700: #AF132E;
  --color-danger-800: #8D0C2D;
  --color-danger-900: #75072D;
}


body {
	padding: 2em;
	font-family: helveticaneue, helvetica, arial;
	display: flex;
}

.group {
	margin-bottom: 2em;
	flex: 20%;
}

.type {
	color: #222;
	margin-bottom: .2em;
}

.color {
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	text-shadow: 1px 1px #fff;
	cursor: pointer;
}

JavaScript

var clipboard = new ClipboardJS('div'),
	current_timeout,
	current_timeout_cb = function () {};

clipboard.on('success', function(e) {
	clearTimeout(current_timeout);
	current_timeout_cb();

	e.trigger.innerText = 'Copied!';

	current_timeout_cb = function () {
		e.trigger.innerText = '';
	};
	
	current_timeout = setTimeout(current_timeout_cb, 2000);
});