geoff
/
grayscale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shorten var names

This commit is contained in:
Geoff Doty 2021-10-14 17:23:32 -05:00
parent c068e25b6a
commit 7de1f65ab8
4 changed files with 102 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/scales.min.css vendored
View File

@ -1,2 +1,2 @@
/* Scales CSS v:0.1 | MIT LICENSE | https://github.com/n2geoff/scales */ /* Scales CSS v:0.3 | MIT LICENSE | https://github.com/n2geoff/scales */
:root{--theme-h:207;--theme-s:50%;--theme-l:50%;--theme:hsl(var(--theme-h), var(--theme-s), var(--theme-l));--muted:hsl(var(--theme-h), 15%, 15%);--font-family:sans-serif,"Roboto";--line-height:1.5;--font-weight:400;--font-size:20px;--border-color:var(--theme);--border-radius:0rem;--border-width:1px;--spacing:1rem}:root:not([data-theme=dark]),[data-theme=light]{--theme-light:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));--theme-dark:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));--background:hsl(var(--theme-h), 0%, 95%);--foreground:hsl(var(--theme-h), 0%, 5%);--muted:hsl(var(--theme-h), 15%, 75%)}[data-theme=dark]{--theme-light:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%));--theme-dark:hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%));--background:hsl(var(--theme-h), 50%, 5%);--foreground:hsl(var(--theme-h), 20%, 90%)}*,:after,:before{box-sizing:border-box}body,html{background:var(--background);color:var(--foreground);margin:0;padding:0;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);box-sizing:border-box;padding:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:none}main{margin:calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5);padding:var(--spacing);height:100vh}table{background-color:var(--background);border-collapse:collapse;border-spacing:0;width:100%}tbody{border-top:2px solid var(--theme);border-top:2px solid var(--theme)}th{text-align:left;color:var(--theme-dark)}td,th{padding:calc(var(--spacing)/ 2);border-bottom:1px solid var(--theme)}a{color:var(--theme)}a:hover{color:var(--foreground)}blockquote{margin:var(--spacing) 0;border-left:calc(var(--spacing)/ 2) solid var(--theme-dark);background:hsl(var(--theme-h) var(--theme-s) var(--theme-l));color:var(--background);padding:var(--spacing)}code,kbd,pre{font-family:monospace;display:inline-block;white-space:pre;margin:0;padding:0}code{margin:0 calc(var(--spacing)/ 4);padding:0 calc(var(--spacing)/ 4);background:var(--background)}hr{color:var(--theme);border:1px solid}h1,h2,h3,h4,h5,h6{text-transform:capitalize}h1{font-size:calc(var(--font-size) * 2);color:var(--theme-dark)}h2{color:var(--theme)}h3{border-bottom:1px solid var(--theme)}small{color:var(--muted)}section{margin-bottom:var(--spacing)}article{padding:var(--spacing);background-color:var(--theme-light)}label{font-size:var(--font-size);font-weight:600;text-transform:capitalize;color:var(--foreground);margin:0 calc(var(--spacing)/ 2)}input{display:block;outline:0;box-sizing:border-box;font-size:var(--font-size);background-color:var(--background);color:var(--foreground);width:100%;height:calc(var(--font-size) * 3);border:1px solid var(--theme);border-radius:var(--border-radius);padding:var(--spacing);margin-bottom:var(--spacing);margin-right:var(--spacing)}input:disabled{background:var(--muted);color:var(--background);cursor:not-allowed}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0;width:var(--spacing);height:var(--spacing)}input[type=submit]{font-size:var(--font-size);height:calc(var(--font-size) * 3);padding:var(--spacing) calc(var(--spacing)/ 2);margin:var(--spacing) 0;cursor:pointer}input[type=submit]{background-color:var(--theme);color:var(--background)}button,select,textarea{display:inline-block;outline:0;font-family:var(--font-family);font-size:var(--font-size);height:calc(var(--font-size) * 3);width:100%;border:1px solid var(--theme);color:var(--theme);background-color:var(--background);border-radius:var(--border-radius);padding:var(--spacing);margin-bottom:var(--spacing);cursor:pointer}select{background:var(--background) no-repeat 100%;color:var(--foreground);appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>")}textarea{overflow:auto;resize:vertical;border:1px solid var(--theme);height:calc(var(--line-height) * 6rem);cursor:text;color:var(--foreground)}.grid{display:grid;gap:var(--spacing);grid-template-columns:repeat(auto-fit,minmax(0,1fr))} :root{--Hsl:207;--hSl:50%;--hsL:50%;--theme:hsl(var(--Hsl), var(--hSl), var(--hsL));--font:Arial, Helvetica, san-serif;--line:1.5;--weight:400;--size:20px;--radius:0rem;--space:1rem}:root:not([data-theme=dark]),[data-theme=light]{--light:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));--dark:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));--gray:hsl(var(--Hsl), 15%, 75%);--bg:hsl(var(--Hsl), 0%, 95%);--fg:hsl(var(--Hsl), 0%, 5%)}[data-theme=dark]{--light:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));--dark:hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));--gray:hsl(var(--Hsl), 15%, 15%);--bg:hsl(var(--Hsl), 50%, 5%);--fg:hsl(var(--Hsl), 20%, 90%)}*,:after,:before,body,html{box-sizing:border-box}body,html{background:var(--bg);margin:0;font-family:var(--font);font-weight:var(--weight);line-height:var(--line);padding:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}main{margin:0 auto;height:100vh;max-width:1140px}table{background-color:var(--bg);border-collapse:collapse;border-spacing:0;width:100%}tbody{border-top:2px solid var(--theme)}th{text-align:left;color:var(--dark)}td,th{padding:calc(var(--space)/2);border-bottom:1px solid var(--theme)}a{color:var(--theme)}a:hover,body,html,input,label{color:var(--fg)}article,blockquote,main{padding:var(--space)}blockquote{margin:var(--space) 0;border-left:calc(var(--space)/2) solid var(--dark);background:hsl(var(--Hsl) var(--hSl) var(--hsL));color:var(--bg)}code,kbd,pre{font-family:monospace;display:inline-block;white-space:pre;margin:0;padding:0}code{margin:0 calc(var(--space)/4);padding:0 calc(var(--space)/4);background:var(--bg)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{text-transform:capitalize}h1{font-size:calc(var(--size)*2);color:var(--dark)}h2,hr{color:var(--theme)}h3{border-bottom:1px solid var(--theme)}small{color:var(--gray)}section{margin-bottom:var(--space)}article{background-color:var(--light)}body,html,input,label{font-size:var(--size)}label{font-weight:600;text-transform:capitalize;margin:0 calc(var(--size)/2)}input{display:block;outline:0;box-sizing:border-box;background-color:var(--bg);width:100%;height:calc(var(--size)*3);border:1px solid var(--theme);border-radius:var(--radius);padding:var(--space);margin-bottom:var(--space);margin-right:var(--space)}input:disabled{background:var(--gray);color:var(--bg);cursor:not-allowed}input[type=checkbox],input[type=radio]{background:red;display:inline-block;padding:0;margin:0;width:calc(var(--size)*.8);height:calc(var(--size)*.8)}button,input[type=submit],select,textarea{font-size:var(--size);height:calc(var(--size)*3)}input[type=submit]{background-color:var(--theme);color:var(--bg);padding:0;margin:var(--space) 0;cursor:pointer}button,select,textarea{display:inline-block;outline:0;font-family:var(--font);width:100%;border:1px solid var(--theme);color:var(--theme);background-color:var(--bg);border-radius:var(--radius);margin-bottom:var(--space)}select,textarea{color:var(--fg)}button,select{padding:0 var(--space);cursor:pointer}select{background:var(--bg) no-repeat 100%;appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>")}textarea{overflow:auto;resize:vertical;height:calc(var(--line)*6rem);padding:var(--space);cursor:text}.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}

20
example/example.html
View File

@ -24,26 +24,26 @@
<section> <section>
<section class="grid"> <section class="grid">
<div> <div>
<div class="box" style="background: var(--foreground);">&nbsp;</div> <div class="box" style="background: var(--fg);">&nbsp;</div>
<div class="box" style="background: var(--theme-dark);">&nbsp;</div> <div class="box" style="background: var(--dark);">&nbsp;</div>
<div class="box" style="background: var(--theme);">&nbsp;</div> <div class="box" style="background: var(--theme);">&nbsp;</div>
<div class="box" style="background: var(--theme-light);">&nbsp;</div> <div class="box" style="background: var(--light);">&nbsp;</div>
<div class="box" style="background: var(--muted);">&nbsp;</div> <div class="box" style="background: var(--gray);">&nbsp;</div>
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<div class="box" style="background: var(--background); color: var(--theme)"> <div class="box" style="background: var(--bg); color: var(--theme)">
SCALES SCALES
</div> </div>
<div class="box" style="background:var(--muted); padding: 0 .5em 0 .5em;">CSS</div> <div class="box" style="background:var(--gray); padding: 0 .5em 0 .5em;">CSS</div>
</div> </div>
<div style="text-align: right;"> <div style="text-align: right;">
<em>A Minimalist Dream of CSS</em> <em>Minimalist CSS Dream</em>
</div> </div>
</section> </section>
<article> <article>
<section> <section>
<h2>Customize CSS</h2> <h2>Customize CSS</h2>
<form id="settings" name="settings" style="background: var(--background); padding: var(--spacing);"> <form id="settings" name="settings" style="background: var(--bg); padding: 1rem;">
<div> <div>
<label for="theme">Theme Color <small>(default: steelblue)</small></label> <label for="theme">Theme Color <small>(default: steelblue)</small></label>
<span style="float: right"> <span style="float: right">
@ -57,7 +57,7 @@
<div class="grid"> <div class="grid">
<div> <div>
<label for="font">Font Family</label> <label for="font">Font Family</label>
<input type="text" id="font" name="font" value="sans-sarif, Roboto"> <input type="text" id="font" name="font" value="Arial, Helvetica, san-serif">
</div> </div>
</div> </div>
<div class="grid"> <div class="grid">
@ -77,7 +77,7 @@
</div> </div>
<div> <div>
<label for="spacing">Element Spacing</label> <label for="spacing">Element Spacing</label>
<input type="range" id="spacing" name="spacing" min="0" max="4" step="0.05" value="1.5" list="tickmarks"> <input type="range" id="spacing" name="spacing" min="0" max="4" step="0.05" value="1" list="tickmarks">
</div> </div>
</div> </div>
<div> <div>

16
example/js/example.js
View File

@ -71,14 +71,14 @@ function update() {
const style = document.createElement('style'); const style = document.createElement('style');
style.innerHTML = ` style.innerHTML = `
:root { :root {
--theme-h: ${hsl.h}; --Hsl: ${hsl.h};
--theme-s: ${hsl.s}%; --hSl: ${hsl.s}%;
--theme-l: ${hsl.l}%; --hsL: ${hsl.l}%;
--font-family: ${form.elements['font'].value}; --font: ${form.elements['font'].value};
--font-size: ${form.elements['size'].value}px; --size: ${form.elements['size'].value}px;
--spacing: ${form.elements['spacing'].value}rem; --space: ${form.elements['spacing'].value}rem;
--line-height: ${form.elements['line'].value}; --line: ${form.elements['line'].value};
--border-radius: ${form.elements['radius'].value}rem; --radius: ${form.elements['radius'].value}rem;
} }
`; `;

168
src/scales.css
View File

@ -1,51 +1,47 @@
/* Scales CSS v:0.3 | MIT LICENSE | https://github.com/n2geoff/scales */
:root { :root {
--theme-h: 207; --Hsl: 207;
--theme-s: 50%; --hSl: 50%;
--theme-l: 50%; --hsL: 50%;
--theme: hsl(var(--theme-h), var(--theme-s), var(--theme-l)); --theme: hsl(var(--Hsl), var(--hSl), var(--hsL));
--muted: hsl(var(--theme-h), 15%, 15%);
--font-family: sans-serif, "Roboto"; --font: Arial, Helvetica, san-serif;
--line-height: 1.5; --line: 1.5;
--font-weight: 400; --weight: 400;
--font-size: 20px; --size: 20px;
--border-color: var(--theme); --radius: 0rem;
--border-radius: 0rem; --space: 1rem;
--border-width: 1px;
--spacing: 1rem;
} }
[data-theme="light"], [data-theme="light"],
:root:not([data-theme="dark"]) { :root:not([data-theme="dark"]) {
--theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%)); --light: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));
--theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%)); --dark: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));
--gray: hsl(var(--Hsl), 15%, 75%);
--background: hsl(var(--theme-h), 0%, 95%); --bg: hsl(var(--Hsl), 0%, 95%);
--foreground: hsl(var(--theme-h), 0%, 5%); --fg: hsl(var(--Hsl), 0%, 5%);
--muted: hsl(var(--theme-h), 15%, 75%);
} }
[data-theme="dark"] { [data-theme="dark"] {
--theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%)); --light: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) - 35%));
--theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%)); --dark: hsl(var(--Hsl), var(--hSl), calc(var(--hsL) + 35%));
--gray: hsl(var(--Hsl), 15%, 15%);
--background: hsl(var(--theme-h), 50%, 5%); --bg: hsl(var(--Hsl), 50%, 5%);
--foreground: hsl(var(--theme-h), 20%, 90%); --fg: hsl(var(--Hsl), 20%, 90%);
} }
*, *:before, *:after { box-sizing: border-box; } *, *:before, *:after { box-sizing: border-box; }
html,body { html,body {
background: var(--background); background: var(--bg);
color: var(--foreground); color: var(--fg);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: var(--font-family); font-family: var(--font);
font-size: var(--font-size); font-size: var(--size);
font-weight: var(--font-weight); font-weight: var(--weight);
line-height: var(--line-height); line-height: var(--line);
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
@ -57,13 +53,14 @@ img,embed,iframe,object,audio,video {
} }
main { main {
margin: calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5); margin: 0 auto;
padding: var(--spacing); padding: var(--space);
height:100vh; height:100vh;
max-width: 1140px;
} }
table { table {
background-color: var(--background); background-color: var(--bg);
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
width: 100%; width: 100%;
@ -74,22 +71,22 @@ tbody {
border-top: 2px solid var(--theme); border-top: 2px solid var(--theme);
} }
th {text-align: left;color: var(--theme-dark)} th {text-align: left;color: var(--dark)}
th, td { th, td {
padding: calc(var(--spacing) / 2); padding: calc(var(--space) / 2);
border-bottom: 1px solid var(--theme) border-bottom: 1px solid var(--theme)
} }
a {color: var(--theme)} a {color: var(--theme)}
a:hover {color: var(--foreground)} a:hover {color: var(--fg)}
blockquote { blockquote {
margin: var(--spacing) 0; margin: var(--space) 0;
border-left: calc(var(--spacing) / 2) solid var(--theme-dark); border-left: calc(var(--space) / 2) solid var(--dark);
background: hsl(var(--theme-h) var(--theme-s) var(--theme-l)); background: hsl(var(--Hsl) var(--hSl) var(--hsL));
color: var(--background); color: var(--bg);
padding: var(--spacing); padding: var(--space);
} }
pre, code, kbd { pre, code, kbd {
@ -101,9 +98,9 @@ pre, code, kbd {
} }
code { code {
margin: 0 calc(var(--spacing) / 4); margin: 0 calc(var(--space) / 4);
padding: 0 calc(var(--spacing) / 4); padding: 0 calc(var(--space) / 4);
background: var(--background); background: var(--bg);
} }
hr { hr {
@ -112,92 +109,90 @@ hr {
} }
h1,h2,h3,h4,h5,h6 {text-transform: capitalize;} h1,h2,h3,h4,h5,h6 {text-transform: capitalize;}
h1 {font-size: calc(var(--font-size) * 2); color: var(--theme-dark)} h1 {font-size: calc(var(--size) * 2); color: var(--dark)}
h2 {color: var(--theme)} h2 {color: var(--theme)}
h3 {border-bottom: 1px solid var(--theme);} h3 {border-bottom: 1px solid var(--theme);}
small {color: var(--muted)} small {color: var(--gray)}
section { section {
margin-bottom: var(--spacing); margin-bottom: var(--space);
} }
article { article {
padding: var(--spacing); padding: var(--space);
background-color: var(--theme-light); background-color: var(--light);
} }
label { label {
font-size: var(--font-size); font-size: var(--size);
font-weight: 600; font-weight: 600;
text-transform: capitalize; text-transform: capitalize;
color: var(--foreground); color: var(--fg);
margin: 0 calc(var(--spacing) / 2); margin: 0 calc(var(--size) / 2);
} }
input { input {
display: block; display: block;
outline: none; outline: none;
box-sizing: border-box; box-sizing: border-box;
font-size: var(--font-size); font-size: var(--size);
background-color: var(--background); background-color: var(--bg);
color: var(--foreground); color: var(--fg);
width: 100%; width: 100%;
height: calc(var(--font-size) * 3); height: calc(var(--size) * 3);
border: 1px solid var(--theme); border: 1px solid var(--theme);
border-radius: var(--border-radius); border-radius: var(--radius);
padding: var(--spacing); padding: var(--space);
margin-bottom: var(--spacing); margin-bottom: var(--space);
margin-right: var(--spacing); margin-right: var(--space);
} }
input:disabled { input:disabled {
background: var(--muted); background: var(--gray);
color: var(--background); color: var(--bg);
cursor:not-allowed; cursor:not-allowed;
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
background: red;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
margin: 0; margin: 0;
width: var(--spacing); width: calc(var(--size) * .8);
height: var(--spacing); height: calc(var(--size) * .8);
}
input[type="submit"] {
font-size: var(--font-size);
height: calc(var(--font-size) * 3);
padding: var(--spacing) calc(var(--spacing) / 2);
margin: var(--spacing) 0;
cursor: pointer;
} }
input[type="submit"] { input[type="submit"] {
background-color: var(--theme); background-color: var(--theme);
color: var(--background); color: var(--bg);
font-size: var(--size);
height: calc(var(--size) * 3);
padding: 0;
margin: var(--space) 0;
cursor: pointer;
} }
button, select, textarea { button, select, textarea {
display: inline-block; display: inline-block;
outline: none; outline: none;
font-family: var(--font-family); font-family: var(--font);
font-size: var(--font-size); font-size: var(--size);
height: calc(var(--font-size) * 3); height: calc(var(--size) * 3);
width: 100%; width: 100%;
border: 1px solid var(--theme); border: 1px solid var(--theme);
color: var(--theme); color: var(--theme);
background-color: var(--background); background-color: var(--bg);
border-radius: var(--border-radius); border-radius: var(--radius);
padding: var(--spacing); padding: 0 var(--space);
margin-bottom: var(--spacing); margin-bottom: var(--space);
cursor: pointer; cursor: pointer;
} }
select { select {
background: var(--background) no-repeat 100%; background: var(--bg) no-repeat 100%;
color: var(--foreground); color: var(--fg);
appearance: none; appearance: none;
background-size: 1ex; background-size: 1ex;
background-origin: content-box; background-origin: content-box;
@ -208,13 +203,14 @@ textarea {
overflow: auto; overflow: auto;
resize: vertical; resize: vertical;
border: 1px solid var(--theme); border: 1px solid var(--theme);
height: calc(var(--line-height) * 6rem); height: calc(var(--line) * 6rem);
padding: var(--space);
cursor: text; cursor: text;
color: var(--foreground); color: var(--fg);
} }
.grid { .grid {
display: grid; display: grid;
gap: var(--spacing); gap: var(--space);
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
} }