v 0.0.2

__sensible.css

@@ -0,0 +1,47 @@
+/* pico-sensible */
+/* @todo add description of what this will achieve */
+:root {
+  --form-spacing: calc(var(--spacing) / 2);
+  --form-input-max-length: 15;
+  --form-font-scale: 0.5;
+}
+
+/* max-width */
+input:not([type=checkbox],[type=radio]), 
+select, 
+textarea {
+  max-width: calc(var(--font-size) * var(--form-input-max-length));
+}
+
+/* spacing between elements */
+form.__sensible > * {
+  font-size: var(--font-size);
+  margin-left: var(--form-spacing);
+  margin-right: var(--form-spacing);
+}
+form.__sensible {
+  margin-left: calc(var(--form-spacing) * -1);
+  margin-right: calc(var(--form-spacing) * -1);
+}
+
+
+@media (min-width: 576px) {
+  form.__sensible {
+    --font-size: 17px;
+  }
+}
+@media (min-width: 768px) {
+  form.__sensible {
+    --font-size: 17px;
+  }
+}
+@media (min-width: 992px) {
+  form.__sensible {
+    --font-size: 18px;
+  }
+}
+@media (min-width: 1200px) {
+  form.__sensible {
+    --font-size: 18px;
+  }
+}

colar.css

@@ -0,0 +1,256 @@
+/* Colar */
+/* https://github.com/fchristant/colar */
+/* https://ferdychristant.com/color-for-the-color-challenged-884c7aa04a56 */
+:root {
+--colar-gray-0 : #f8fafb;
+--colar-gray-1 : #f2f4f6;
+--colar-gray-2 : #ebedef;
+--colar-gray-3 : #e0e4e5;
+--colar-gray-4 : #d1d6d8;
+--colar-gray-5 : #b1b6b9;
+--colar-gray-6 : #979b9d;
+--colar-gray-7 : #7e8282;
+--colar-gray-8 : #666968;
+--colar-gray-9 : #50514f;
+--colar-gray-10: #3a3a37;
+--colar-gray-11: #252521;
+--colar-gray-12: #121210;
+
+--colar-red-0 : #fff5f5;
+--colar-red-1 : #ffe3e3;
+--colar-red-2 : #ffc9c9;
+--colar-red-3 : #ffa8a8;
+--colar-red-4 : #ff8787;
+--colar-red-5 : #ff6b6b;
+--colar-red-6 : #fa5252;
+--colar-red-7 : #f03e3e;
+--colar-red-8 : #e03131;
+--colar-red-9 : #c92a2a;
+--colar-red-10: #b02525;
+--colar-red-11: #962020;
+--colar-red-12: #7d1a1a;
+
+--colar-pink-0 : #fff0f6;
+--colar-pink-1 : #ffdeeb;
+--colar-pink-2 : #fcc2d7;
+--colar-pink-3 : #faa2c1;
+--colar-pink-4 : #f783ac;
+--colar-pink-5 : #f06595;
+--colar-pink-6 : #e64980;
+--colar-pink-7 : #d6336c;
+--colar-pink-8 : #c2255c;
+--colar-pink-9 : #a61e4d;
+--colar-pink-10: #8c1941;
+--colar-pink-11: #731536;
+--colar-pink-12: #59102a;
+
+--colar-purple-0 : #f8f0fc;
+--colar-purple-1 : #f3d9fa;
+--colar-purple-2 : #eebefa;
+--colar-purple-3 : #e599f7;
+--colar-purple-4 : #da77f2;
+--colar-purple-5 : #cc5de8;
+--colar-purple-6 : #be4bdb;
+--colar-purple-7 : #ae3ec9;
+--colar-purple-8 : #9c36b5;
+--colar-purple-9 : #862e9c;
+--colar-purple-10: #702682;
+--colar-purple-11: #5a1e69;
+--colar-purple-12: #44174f;
+
+--colar-violet-0 : #f3f0ff;
+--colar-violet-1 : #e5dbff;
+--colar-violet-2 : #d0bfff;
+--colar-violet-3 : #b197fc;
+--colar-violet-4 : #9775fa;
+--colar-violet-5 : #845ef7;
+--colar-violet-6 : #7950f2;
+--colar-violet-7 : #7048e8;
+--colar-violet-8 : #6741d9;
+--colar-violet-9 : #5f3dc4;
+--colar-violet-10: #5235ab;
+--colar-violet-11: #462d91;
+--colar-violet-12: #3a2578;
+
+--colar-indigo-0 : #edf2ff;
+--colar-indigo-1 : #dbe4ff;
+--colar-indigo-2 : #bac8ff;
+--colar-indigo-3 : #91a7ff;
+--colar-indigo-4 : #748ffc;
+--colar-indigo-5 : #5c7cfa;
+--colar-indigo-6 : #4c6ef5;
+--colar-indigo-7 : #4263eb;
+--colar-indigo-8 : #3b5bdb;
+--colar-indigo-9 : #364fc7;
+--colar-indigo-10: #2f44ad;
+--colar-indigo-11: #283a94;
+--colar-indigo-12: #21307a;
+
+--colar-blue-0 : #e7f5ff;
+--colar-blue-1 : #d0ebff;
+--colar-blue-2 : #a5d8ff;
+--colar-blue-3 : #74c0fc;
+--colar-blue-4 : #4dabf7;
+--colar-blue-5 : #339af0;
+--colar-blue-6 : #228be6;
+--colar-blue-7 : #1c7ed6;
+--colar-blue-8 : #1971c2;
+--colar-blue-9 : #1864ab;
+--colar-blue-10: #145591;
+--colar-blue-11: #114678;
+--colar-blue-12: #0d375e;
+
+--colar-cyan-0 : #e3fafc;
+--colar-cyan-1 : #c5f6fa;
+--colar-cyan-2 : #99e9f2;
+--colar-cyan-3 : #66d9e8;
+--colar-cyan-4 : #3bc9db;
+--colar-cyan-5 : #22b8cf;
+--colar-cyan-6 : #15aabf;
+--colar-cyan-7 : #1098ad;
+--colar-cyan-8 : #0c8599;
+--colar-cyan-9 : #0b7285;
+--colar-cyan-10: #095c6b;
+--colar-cyan-11: #074652;
+--colar-cyan-12: #053038;
+
+--colar-teal-0 : #e6fcf5;
+--colar-teal-1 : #c3fae8;
+--colar-teal-2 : #96f2d7;
+--colar-teal-3 : #63e6be;
+--colar-teal-4 : #38d9a9;
+--colar-teal-5 : #20c997;
+--colar-teal-6 : #12b886;
+--colar-teal-7 : #0ca678;
+--colar-teal-8 : #099268;
+--colar-teal-9 : #087f5b;
+--colar-teal-10: #066649;
+--colar-teal-11: #054d37;
+--colar-teal-12: #033325;
+
+--colar-green-0 : #ebfbee;
+--colar-green-1 : #d3f9d8;
+--colar-green-2 : #b2f2bb;
+--colar-green-3 : #8ce99a;
+--colar-green-4 : #69db7c;
+--colar-green-5 : #51cf66;
+--colar-green-6 : #40c057;
+--colar-green-7 : #37b24d;
+--colar-green-8 : #2f9e44;
+--colar-green-9 : #2b8a3e;
+--colar-green-10: #237032;
+--colar-green-11: #1b5727;
+--colar-green-12: #133d1b;
+
+--colar-lime-0 : #f4fce3;
+--colar-lime-1 : #e9fac8;
+--colar-lime-2 : #d8f5a2;
+--colar-lime-3 : #c0eb75;
+--colar-lime-4 : #a9e34b;
+--colar-lime-5 : #94d82d;
+--colar-lime-6 : #82c91e;
+--colar-lime-7 : #74b816;
+--colar-lime-8 : #66a80f;
+--colar-lime-9 : #5c940d;
+--colar-lime-10: #4c7a0b;
+--colar-lime-11: #3c6109;
+--colar-lime-12: #2c4706;
+
+--colar-yellow-0 : #fff9db;
+--colar-yellow-1 : #fff3bf;
+--colar-yellow-2 : #ffec99;
+--colar-yellow-3 : #ffe066;
+--colar-yellow-4 : #ffd43b;
+--colar-yellow-5 : #fcc419;
+--colar-yellow-6 : #fab005;
+--colar-yellow-7 : #f59f00;
+--colar-yellow-8 : #f08c00;
+--colar-yellow-9 : #e67700;
+--colar-yellow-10: #b35c00;
+--colar-yellow-11: #804200;
+--colar-yellow-12: #663500;
+
+--colar-orange-0 : #fff4e6;
+--colar-orange-1 : #ffe8cc;
+--colar-orange-2 : #ffd8a8;
+--colar-orange-3 : #ffc078;
+--colar-orange-4 : #ffa94d;
+--colar-orange-5 : #ff922b;
+--colar-orange-6 : #fd7e14;
+--colar-orange-7 : #f76707;
+--colar-orange-8 : #e8590c;
+--colar-orange-9 : #d9480f;
+--colar-orange-10: #bf400d;
+--colar-orange-11: #99330b;
+--colar-orange-12: #802b09;
+
+--colar-choco-0 : #fff8dc;
+--colar-choco-1 : #fce1bc;
+--colar-choco-2 : #f7ca9e;
+--colar-choco-3 : #f1b280;
+--colar-choco-4 : #e99b62;
+--colar-choco-5 : #df8545;
+--colar-choco-6 : #d46e25;
+--colar-choco-7 : #bd5f1b;
+--colar-choco-8 : #a45117;
+--colar-choco-9 : #8a4513;
+--colar-choco-10: #703a13;
+--colar-choco-11: #572f12;
+--colar-choco-12: #3d210d;
+
+--colar-brown-0 : #faf4eb;
+--colar-brown-1 : #ede0d1;
+--colar-brown-2 : #e0cab7;
+--colar-brown-3 : #d3b79e;
+--colar-brown-4 : #c5a285;
+--colar-brown-5 : #b78f6d;
+--colar-brown-6 : #a87c56;
+--colar-brown-7 : #956b47;
+--colar-brown-8 : #825b3a;
+--colar-brown-9 : #6f4b2d;
+--colar-brown-10: #5e3a21;
+--colar-brown-11: #4e2b15;
+--colar-brown-12: #422412;
+
+--colar-sand-0 : #f8fafb;
+--colar-sand-1 : #e6e4dc;
+--colar-sand-2 : #d5cfbd;
+--colar-sand-3 : #c2b9a0;
+--colar-sand-4 : #aea58c;
+--colar-sand-5 : #9a9178;
+--colar-sand-6 : #867c65;
+--colar-sand-7 : #736a53;
+--colar-sand-8 : #5f5746;
+--colar-sand-9 : #4b4639;
+--colar-sand-10: #38352d;
+--colar-sand-11: #252521;
+--colar-sand-12: #121210;
+
+--colar-camo-0 : #f9fbe7;
+--colar-camo-1 : #e8ed9c;
+--colar-camo-2 : #d2df4e;
+--colar-camo-3 : #c2ce34;
+--colar-camo-4 : #b5bb2e;
+--colar-camo-5 : #a7a827;
+--colar-camo-6 : #999621;
+--colar-camo-7 : #8c851c;
+--colar-camo-8 : #7e7416;
+--colar-camo-9 : #6d6414;
+--colar-camo-10: #5d5411;
+--colar-camo-11: #4d460e;
+--colar-camo-12: #36300a;
+
+--colar-jungle-0 : #ecfeb0;
+--colar-jungle-1 : #def39a;
+--colar-jungle-2 : #d0e884;
+--colar-jungle-3 : #c2dd6e;
+--colar-jungle-4 : #b5d15b;
+--colar-jungle-5 : #a8c648;
+--colar-jungle-6 : #9bbb36;
+--colar-jungle-7 : #8fb024;
+--colar-jungle-8 : #84a513;
+--colar-jungle-9 : #7a9908;
+--colar-jungle-10: #658006;
+--colar-jungle-11: #516605;
+--colar-jungle-12: #3d4d04;
+}

mdl_shadows.css

@@ -0,0 +1,19 @@
+/* MDL shadows */
+/* https://material.io/design/environment/elevation.html */
+:root {
+  --shadow-none        : inset 0 0 0 rgba(0,0,0,0),          inset 0 0 0 rgba(0,0,0,0),          0 0 0 rgba(0,0,0,0),          0 0 0 rgba(0,0,0,0);
+
+  --shadow-border      : inset 0 0 0 rgba(10,10,10,.1),      0 0 0 0 rgba(10,10,10,.1),          0 2px 3px rgba(10,10,10,.1),  0 0 0 1px rgba(10,10,10,.1);
+  --shadow-1           : inset 0 0 0 rgba(0,0,0,0.12),       inset 0 0 0 rgba(0,0,0,0.24),       0 1px 3px rgba(0,0,0,0.12),   0 1px 2px rgba(0,0,0,0.24);
+  --shadow-2           : inset 0 0 0 rgba(0,0,0,0.16),       inset 0 0 0 rgba(0,0,0,0.23),       0 3px 6px rgba(0,0,0,0.16),   0 3px 6px rgba(0,0,0,0.23);
+  --shadow-3           : inset 0 0 0 rgba(0,0,0,0.19),       inset 0 0 0 rgba(0,0,0,0.23),       0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  --shadow-4           : inset 0 0 0 rgba(0,0,0,0.25),       inset 0 0 0 rgba(0,0,0,0.22),       0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  --shadow-5           : inset 0 0 0 rgba(0,0,0,0.30),       inset 0 0 0 rgba(0,0,0,0.22),       0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+
+  --inset-shadow-border: inset 0 2px 3px rgba(10,10,10,.1),  inset 0 0 0 1px rgba(10,10,10,.1),  0 0 0 rgba(10,10,10,.1),      0 0 0 0 rgba(10,10,10,.1);
+  --inset-shadow-1     : inset 0 1px 3px rgba(0,0,0,0.12),   inset 0 1px 2px rgba(0,0,0,0.24),   0 0 0 rgba(0,0,0,0.12),       0 0 0 rgba(0,0,0,0.24);
+  --inset-shadow-2     : inset 0 3px 6px rgba(0,0,0,0.16),   inset 0 3px 6px rgba(0,0,0,0.23),   0 0 0 rgba(0,0,0,0.16),       0 0 0 rgba(0,0,0,0.23);
+  --inset-shadow-3     : inset 0 10px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23),   0 0 0 rgba(0,0,0,0.19),       0 0 0 rgba(0,0,0,0.23);
+  --inset-shadow-4     : inset 0 14px 28px rgba(0,0,0,0.25), inset 0 10px 10px rgba(0,0,0,0.22), 0 0 0 rgba(0,0,0,0.25),       0 0 0 rgba(0,0,0,0.22);
+  --inset-shadow-5     : inset 0 19px 38px rgba(0,0,0,0.30), inset 0 15px 12px rgba(0,0,0,0.22), 0 0 0 rgba(0,0,0,0.30),       0 0 0 rgba(0,0,0,0.22);
+}