MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Normalize generator

Browse source
This commit is contained in:
MeowcaTheoRange 2023-12-21 12:14:12 -06:00
parent 016c988c73
commit 4060e6d324
9 changed files with 286 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
views/projects/item/hex/scripts/index.js
View file

@ -21,20 +21,14 @@ function getData() {
size_height.value,
flag_type.value
);
var ac = averageColors(hexValue);
console.log(ac);
root.style.setProperty(
"--background-color",
arrayToColor(darkenColor(ac, 70))
);
root.style.setProperty("--color", arrayToColor(lightenColor(ac, 70)));
root.style.setProperty("--accent-color", arrayToColor(ac));
root.style.setProperty(
"--accent-color-fg",
arrayToColor(lightenColor(ac, 90))
);
// var ac = averageColors(hexValue);
// console.log(ac);
// root.style.setProperty(
// "--base-color",
// arrayToColor(darkenColor(ac, 70))
// );
propagateStyles(getComputedStyle(root));
// propagateStyles(getComputedStyle(root));
}
generateButton.addEventListener("click", getData);

7
views/projects/item/normalize/index.html
View file

@ -5,7 +5,6 @@
<title>Normalize</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/style.css" />
<style>
:root {
--base-color: 0, 0%;
@ -17,7 +16,6 @@
<section>
<h1>Normalize</h1>
</section>
<section id="accessibility" hidden></section>
</header>
<main>
<section>
@ -157,9 +155,10 @@
spirit of HTML - just keeping it vanilla, but extending it in a way
that is infinitely useful.
</p>
<h3><a href="https://jquery.com/">jQuery</a></h3>
</section>
<section id="generator"></section>
</main>
<script src="/scripts/accessibility.js"></script>
<script src="/scripts/interface.js"></script>
<script src="./scripts/generator.js"></script>
</body>
</html>

208
views/projects/item/normalize/scripts/generator.js Normal file
View file

@ -0,0 +1,208 @@
const generator = document.getElementById("generator");
generator.innerHTML = `<h2>Generator</h2>
<fieldset>
<legend>Sizes</legend>
<label for="g_base-scale">Base scale:
<input
id="g_base-scale"
type="number"
style="width: 8ch"
value="16"
min="8"
/>
</label><br />
<label for="g_document-width">Document width:
<input
id="g_document-width"
type="number"
style="width: 8ch"
value="50"
min="1"
/>
</label>
</fieldset>
<fieldset>
<legend>Base color</legend>
<label for="g_base-color_hue">Page hue:
<input
id="g_base-color_hue"
type="range"
min="0"
max="360"
value="0"
step="30"
/>
</label><br />
<label for="g_base-color_sat">Page saturation:
<input
id="g_base-color_sat"
type="range"
min="0"
max="100"
value="100"
step="10"
/>
</label>
</fieldset>
<fieldset>
<legend>Fonts</legend>
<label for="g_font-family">Page font:
<input
id="g_font-family"
type="text"
style="width: 10em"
value="sans-serif"
/>
</label><br />
<label for="g_font-weight">Font weight:
<input
id="g_font-weight"
type="range"
min="100"
max="900"
step="100"
value="400"
/>
</label><br />
<hr />
<label for="g_header-font-family">Header font:
<input
id="g_header-font-family"
type="text"
style="width: 10em"
value="sans-serif"
/>
</label><br />
<label for="g_header-font-weight">Header font weight:
<input
id="g_header-font-weight"
type="range"
min="100"
max="900"
step="100"
value="600"
/>
</label>
</fieldset>
<fieldset>
<legend>Border style</legend>
<label for="g_border-width">Width:
<input
id="g_border-width"
type="number"
style="width: 8ch"
value="1"
min="0"
/>
</label><br />
<label for="g_border-style">Style:
<input
id="g_border-style"
type="text"
style="width: 10em"
value="solid"
/>
</label><br />
<label for="g_border-radius">Radius:
<input
id="g_border-radius"
type="number"
style="width: 8ch"
value="0"
min="0"
/>
</label>
</fieldset>
<iframe id="go_view"></iframe>
<pre id="go_code"></pre>`;
const generatorFields = {
baseScale: document.getElementById("g_base-scale"),
documentWidth: document.getElementById("g_document-width"),
baseColor: {
hue: document.getElementById("g_base-color_hue"),
sat: document.getElementById("g_base-color_sat"),
},
fontFamily: document.getElementById("g_font-family"),
fontWeight: document.getElementById("g_font-weight"),
headerFontFamily: document.getElementById("g_header-font-family"),
headerFontWeight: document.getElementById("g_header-font-weight"),
borderWidth: document.getElementById("g_border-width"),
borderStyle: document.getElementById("g_border-style"),
borderRadius: document.getElementById("g_border-radius"),
};
const generatorOutputs = {
view: document.getElementById("go_view"),
code: document.getElementById("go_code"),
}
generatorFields.baseScale.addEventListener('change', preview);
generatorFields.documentWidth.addEventListener('change', preview);
generatorFields.baseColor.hue.addEventListener('input', preview);
generatorFields.baseColor.sat.addEventListener('input', preview);
generatorFields.fontFamily.addEventListener('change', preview);
generatorFields.fontWeight.addEventListener('input', preview);
generatorFields.headerFontFamily.addEventListener('change', preview);
generatorFields.headerFontWeight.addEventListener('input', preview);
generatorFields.borderWidth.addEventListener('change', preview);
generatorFields.borderStyle.addEventListener('change', preview);
generatorFields.borderRadius.addEventListener('change', preview);
function generateNormalizeCode() {
return `:root {
--base-scale: ${generatorFields.baseScale.value}px;
--document-width: ${generatorFields.documentWidth.value}em;
--base-color: ${generatorFields.baseColor.hue.value}, ${generatorFields.baseColor.sat.value}%;
--font-family: ${generatorFields.fontFamily.value};
--font-weight: ${generatorFields.fontWeight.value};
--header-font-family: ${generatorFields.headerFontFamily.value};
--header-font-weight: ${generatorFields.headerFontWeight.value};
--border-width: calc(${generatorFields.borderWidth.value}em / 16);
--border-style: ${generatorFields.borderStyle.value};
--border-radius: calc(${generatorFields.borderRadius.value}em / 16);
}`
}
generatorOutputs.view.srcdoc = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Normalize Style</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<style id="csshere"></style>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a test.</p>
<button>Wee snaw</button>
</body>
</html>`;
function preview() {
const css = generateNormalizeCode();
generatorOutputs.view.contentDocument.getElementById("csshere").innerHTML = css;
generatorOutputs.code.textContent = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Normalize Style</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<style>${css}</style>
</head>
<body>
</body>
</html>`;
}
generatorOutputs.view.addEventListener("load", preview);

21
views/scripts/accessibility.js
View file

@ -54,30 +54,32 @@ function createAccessibilityNodes() {
</select>
</label><br />
<label for="acc-hue">Page hue:
<label for="acc-hue-over" class="checkbox" title="Enable override">
<input id="acc-hue-over" type="checkbox" />
<span class="checkbox">✓</span>
</label>
<input
id="acc-hue"
type="range"
min="0"
max="360"
value="0"
step="30"
/>
<label for="acc-hue-over" class="checkbox">
<input id="acc-hue-over" type="checkbox" />
<span class="checkbox">✓</span>
</label>
</label><br />
<label for="acc-sat">Page saturation:
<label for="acc-sat-over" class="checkbox" title="Enable override">
<input id="acc-sat-over" type="checkbox" />
<span class="checkbox">✓</span>
</label>
<input
id="acc-sat"
type="range"
min="0"
max="100"
value="100"
step="10"
/>
<label for="acc-sat-over" class="checkbox">
<input id="acc-sat-over" type="checkbox" />
<span class="checkbox">✓</span>
</label>
</label><br />
<label for="acc-base" class="checkbox">Base style:
<input id="acc-base" type="checkbox" />
@ -85,7 +87,8 @@ function createAccessibilityNodes() {
(requires reload)
</label>
</fieldset>
</details>`;
</details>
<style>`;
document.querySelector("#accessibility").hidden = false;
accScale = document.getElementById("acc-scale");

14
views/scripts/interface.js
View file

@ -2,19 +2,9 @@ function propagateStyles(rootStyles, parent) {
if (parent == null && window.frameElement == null) return;
const wfParent = parent ?? window.frameElement.parentElement;
wfParent.style.setProperty(
"--background-color",
rootStyles.getPropertyValue("--background-color")
"--base-color",
rootStyles.getPropertyValue("--base-color")
);
wfParent.style.setProperty("--color", rootStyles.getPropertyValue("--color"));
wfParent.style.setProperty(
"--accent-color",
rootStyles.getPropertyValue("--accent-color")
);
wfParent.style.setProperty(
"--accent-color-fg",
rootStyles.getPropertyValue("--accent-color-fg")
);
wfParent.style.setProperty("--border-color", "var(--color)");
}
window.addEventListener("DOMContentLoaded", () => {

29
views/styles/normal.css
View file

@ -78,6 +78,25 @@
--border-radius: 0;
}
@media (prefers-color-scheme: light) {
:root {
/* The underlay color of the document. */
--underlay-color: hsl(var(--base-color), 90%);
/* The page color. */
--background-color: hsl(var(--base-color), 80%);
/* The foreground color of the page. */
--color: hsl(var(--base-color), 15%);
/* The accent color of the page. */
--accent-color: hsl(var(--base-color), 60%);
/* The background-adjacent accent color of the page. */
--accent-color-bg: hsl(var(--base-color), 30%);
/* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 5%);
/* The color of the borders used on certain elements. */
--border-color: var(--color);
}
}
html.base {
--base-color: 0, 0% !important;
@ -102,8 +121,6 @@ html.base {
--border-style: solid;
--border-color: var(--color);
--border-radius: 0;
transition: none;
}
@media (prefers-color-scheme: dark) {
@ -123,10 +140,6 @@ html.base body {
margin: 0;
}
html.base * {
transition: none;
}
/* Size and type normalize */
html {
@ -447,8 +460,6 @@ input[type="range"]:focus {
outline: none;
}
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
@ -465,8 +476,6 @@ input[type="range"]:focus::-webkit-slider-thumb {
outline: 2px solid var(--accent-color-bg);
}
/******** Firefox styles ********/
input[type="range"]::-moz-range-thumb {
border: var(--border-width) var(--border-style) var(--border-color);
border-radius: var(--border-radius);

1
views/styles/normal_print.css
View file

@ -12,7 +12,6 @@
--document-width: 100% !important;
--border-style: calc(1em / 16) solid var(--color);
transition: none;
}
body {
margin: 0;

4
views/styles/style.css
View file

@ -35,10 +35,6 @@
-moz-osx-font-smoothing: grayscale;
} */
* {
transition: background-color 0.25s, color 0.25s, opacity 0.25s;
}
.nav {
max-width: 38em;
margin: auto;

37
views/styles/windows.css
View file

@ -29,9 +29,6 @@ div.window-object {
resize: both;
overflow: hidden;
padding: 0.25em;
/* padding: 0.5em; */
/* transition: background-color 0.25s, color 0.25s, opacity 0.25s; */
transition: none;
scale: 1;
opacity: 1;
@ -39,6 +36,40 @@ div.window-object {
animation-duration: 0.25s;
}
div.window-object {
/* The underlay color of the document. */
--underlay-color: hsl(var(--base-color), 10%);
/* The page color. */
--background-color: hsl(var(--base-color), 15%);
/* The foreground color of the page. */
--color: hsl(var(--base-color), 85%);
/* The accent color of the page. */
--accent-color: hsl(var(--base-color), 40%);
/* The background-adjacent accent color of the page. */
--accent-color-bg: hsl(var(--base-color), 50%);
/* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 95%);
}
@media (prefers-color-scheme: light) {
div.window-object {
/* The underlay color of the document. */
--underlay-color: hsl(var(--base-color), 90%);
/* The page color. */
--background-color: hsl(var(--base-color), 80%);
/* The foreground color of the page. */
--color: hsl(var(--base-color), 15%);
/* The accent color of the page. */
--accent-color: hsl(var(--base-color), 60%);
/* The background-adjacent accent color of the page. */
--accent-color-bg: hsl(var(--base-color), 30%);
/* The foreground accent color of the page. */
--accent-color-fg: hsl(var(--base-color), 5%);
/* The color of the borders used on certain elements. */
--border-color: var(--color);
}
}
div.window-object.unfocused {
opacity: 0.5;
}