Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Export palette as CSS Variables #11

Merged
merged 4 commits into from
Jul 27, 2023
Merged

Export palette as CSS Variables #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
694a82d
Export palette as CSS Variables
HotFr1dge Jul 27, 2023
da2108d
Fix mobile UI Bug
HotFr1dge Jul 27, 2023
c79491f
Fix misprint and code formatting
HotFr1dge Jul 27, 2023
deaa421
Fix code formatting
HotFr1dge Jul 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@ Just some local overrides so Google's original stylesheet (main.css) can remain
*/

@keyframes octocat-wave {

0%,
100% {
transform: rotate(0);
}

20%,
60% {
transform: rotate(-25deg);
}

40%,
80% {
transform: rotate(10deg);
Expand Down Expand Up @@ -143,8 +146,7 @@ img {
display: none;
}

.utility-panel {
}
.utility-panel {}

.utility-panel__label {
cursor: default;
Expand Down Expand Up @@ -219,6 +221,8 @@ img {
padding: 20px;
max-width: 600px;
border-radius: 4px;
display: flex;
flex-direction: column;
}

.modal-header {
Expand All @@ -229,6 +233,10 @@ img {
height: 40px;
}

.modal-control {
padding-block: 5px;
}

.modal-header h3 {
margin: 0;
font-weight: 500;
Expand Down Expand Up @@ -391,4 +399,4 @@ img {
.modal-text {
height: calc(100% - 60px);
}
}
}
107 changes: 64 additions & 43 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-152202722-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'UA-152202722-1');
Expand Down Expand Up @@ -40,49 +41,69 @@
</head>

<body>
<a href="https://github.com/edelstone/material-palette-generator" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#212121; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
<div class="page-content">
<h1 class="page-title">
<a href="/">Material Design Palette Generator</a>
</h1>
<div class="mp-ad">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7DKK37&placement=materialpalettescom" id="_carbonads_js"></script>
</div>
<a href="https://github.com/edelstone/material-palette-generator" class="github-corner"
aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
style="fill:#212121; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg></a>
<div class="page-content">
<h1 class="page-title">
<a href="/">Material Design Palette Generator</a>
</h1>
<div class="mp-ad">
<script async type="text/javascript"
src="//cdn.carbonads.com/carbon.js?serve=CE7DKK37&placement=materialpalettescom" id="_carbonads_js"></script>
</div>
<div class="palettes" id="root-container"></div>
</div>
<div class="palettes" id="root-container"></div>

<div class="page-footer">
<p>
<a class="standard-link" href="/about">About</a>
<a class="standard-link" href="/about#support">Support this project</a>
</p>
</div>
<div class="page-footer">
<p>
<a class="standard-link" href="/about">About</a>
<a class="standard-link" href="/about#support">Support this project</a>
</p>
</div>

<!-- Modal -->
<dialog id="exportModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>JSON color palette</h3>
<button class="close" type="reset"><i class="material-icons">highlight_off</i></button>
</div>
<div class="modal-text">
<textarea name="exportedPalettes" onclick="this.select()" readonly id="jsonText"></textarea>
</div>
<!-- Modal -->
<dialog id="exportModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Color palette</h3>
<button class="close" type="reset"><i class="material-icons">highlight_off</i></button>
</div>
<div class="modal-control">
<label for="export-type">Type:</label>
<select name="type" id="export-type" onchange="ExportColor()">
<option value="json" selected>JSON</option>
<option value="css">CSS</option>
</select>
</div>
<div class="modal-text">
<textarea name="exportedPalettes" onclick="this.select()" readonly id="jsonText"></textarea>
</div>
</dialog>
<script src="/js/main.js" defer></script>
<script src="/js/export.js" defer></script>
<script src="/js/jquery-3.5.1.min.js"></script>
<script>
// Show a new Carbon ad every time when certain elements are clicked
$(document).on('click', '.color-palette__cell, .utility-panel__color-entry, .color-picker, .exportButton, .carbon-img, .carbon-text, .carbon-poweredby', function() {
// If the ad hasn't loaded yet, don't refresh it while it's still loading, or it will return two (or more) ads
if (!$("#carbonads")[0]) return;
// If the script hasn't loaded, don't try calling it
if (typeof _carbonads !== 'undefined') _carbonads.refresh();
});
</script>
<!-- Empty script tags below keep CSS transitions from firing on page load. It's a Chrome bug. See here: https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load/42969608#42969608 -->
<script> </script>
</body>
</html>
</div>
</dialog>
<script src="/js/main.js" defer></script>
<script src="/js/export.js" defer></script>
<script src="/js/jquery-3.5.1.min.js"></script>
<script>
// Show a new Carbon ad every time when certain elements are clicked
$(document).on('click', '.color-palette__cell, .utility-panel__color-entry, .color-picker, .exportButton, .carbon-img, .carbon-text, .carbon-poweredby', function () {
// If the ad hasn't loaded yet, don't refresh it while it's still loading, or it will return two (or more) ads
if (!$("#carbonads")[0]) return;
// If the script hasn't loaded, don't try calling it
if (typeof _carbonads !== 'undefined') _carbonads.refresh();
});
</script>
<!-- Empty script tags below keep CSS transitions from firing on page load. It's a Chrome bug. See here: https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load/42969608#42969608 -->
<script> </script>
</body>

</html>
39 changes: 37 additions & 2 deletions js/export.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const modal = document.querySelector(".modal");

function ExportColor() {
const exportType = document.querySelector('select#export-type')?.value;
const colorPalettes = document.querySelectorAll(".color-palette__row");
const colorSelector = document.querySelectorAll(
".color-palette__cell-hex-value"
Expand Down Expand Up @@ -132,14 +133,48 @@ function ExportColor() {
});
}

textArea.textContent = JSON.stringify(exported, null, " ");
switch (exportType) {
case 'css':
textArea.textContent = convertJSONtoCSS(exported);
break;
case 'json':
textArea.textContent = JSON.stringify(exported, null, " ");
break;
default:
textArea.textContent = JSON.stringify(exported, null, " ")
}

modal.style.display = "block";

}

function convertJSONtoCSS(paletteJSON) {
const paletteCSS = [];
const mainColors = [];

[...document.querySelectorAll('.color-palette__cell--selected')].forEach(mainColorElement => {
mainColors.push(mainColorElement.querySelector('.color-palette__cell-hex-value').textContent)
});

for (const color in paletteJSON) {
const colorName = color.replace(/ /g,'').toLowerCase();
Object.entries(paletteJSON[color]).forEach(colorShade => {
paletteCSS.push(`--clr-${colorName}-${colorShade[0]}: ${colorShade[1]};`);
if (mainColors.includes(colorShade[1])) {
paletteCSS.push(`--clr-${colorName}: var(--clr-${colorName}-${colorShade[0]});`);
}
});
}

//return paletteCSS;
return `:root {\n\t${paletteCSS.join('\n\t')}\n\n}`;
}

// Controls

const closeButton = document.querySelector(".close");
const contentArea = document.querySelector(".color-tool");
const exportTypeSelect = document.querySelector('select#export-type');

contentArea.insertAdjacentHTML(
"beforeend",
Expand All @@ -158,4 +193,4 @@ window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
};