ada-ui 2.9.4 → 3.0.0

package/css/ada.blue.css

@@ -0,0 +1 @@
+.warn,.accent,:root{--l-dark: calc(var(--l) - 16%);--l-light: calc(var(--l) + 38%);--bg: hsl(var(--h), var(--s), var(--l-dark));--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}:root{--h: 205;--s: 80%;--l: 23%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}

package/css/ada.css

@@ -0,0 +1 @@
+html{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:400}@media screen and (max-width: 1199px){html{font-size:12px}}html,body{height:100%;min-height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}h1{font-size:3rem;margin:1rem 0 2rem 0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}.panel>header,.tile>header,h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h4{font-weight:400;font-size:1.2rem;margin:.5rem 0 .5rem 0}h1,h2,.panel>header,.tile>header,h3,h4{font-weight:300;text-shadow:0 0 4px var(--light-alpha40);color:var(--fg)}h1.m-0,h2.m-0,.panel>header,.tile>header,h3.m-0,h4.m-0{margin:0}body{font-size:1rem;-webkit-tap-highlight-color:transparent;box-sizing:border-box;padding:.5rem}.panel>footer:after,.tile>footer:after,.panel>footer:before,.tile>footer:before,.panel>header:after,.tile>header:after,.panel>header:before,.tile>header:before{content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2}.tile>footer:after,.tile>footer:before,.tile>header:after,.tile>header:before{border-color:var(--light-alpha40);height:.75rem;width:.75rem}.button-group{margin:.8rem}.button,.button.icon{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;cursor:pointer;user-select:none;background-color:transparent;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;min-height:min-content;min-width:8rem;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.button.small,.button.icon{display:grid;justify-items:center;align-items:center;min-width:0;padding:.8rem}.button.icon{border:1px solid transparent;box-shadow:none;background:none}.button.icon>i.material-icons{font-size:20px}.button-group>.button.icon{margin:1px}.button.fill{background-color:var(--default)}.button:focus{border:1px solid var(--light-alpha70)}.button:active{background-color:var(--light-alpha70);border:1px solid var(--default-alpha40)}.button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.input{border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.input:focus{border:1px solid var(--light-alpha70)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.panel,.tile{background:var(--default-alpha10);box-shadow:0 0 20px 1px rgba(0,0,0,.4);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header,.tile>header{position:relative;text-align:left;padding:.4rem .6rem}.panel>header:before,.tile>header:before{border-width:2px 0 0 2px;border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after,.tile>header:after{border-width:2px 2px 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>header:empty,.tile>header:empty{padding:.2rem}.panel>article,.tile>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar{width:2px;background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:2px 2px 1px 2px;background:var(--default);box-sizing:border-box;background-clip:padding-box}.panel>footer,.tile>footer{position:relative;text-align:right;padding:.4rem .6rem;font-size:.75rem;color:var(--fg-alpha60)}.panel>footer:before,.tile>footer:before{border-width:0 0 2px 2px;border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after,.tile>footer:after{border-width:0 2px 2px 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.panel>footer:empty,.tile>footer:empty{padding:.2rem}.tile{margin:.8rem}.tile>header:before{border-width:1px 0 0 1px}.tile>header:after{border-width:1px 1px 0 0}.tile>article{color:var(--fg);text-shadow:0 0 4px var(--light-alpha40)}.tile>footer:before{border-width:0 0 1px 1px}.tile>footer:after{border-width:0 1px 1px 0}.tile.inset{box-shadow:inset 0 0 20px 1px rgba(0,0,0,.4)}.tile.inset>header{color:var(--fg-alpha80)}.tile.inset>header:before,.tile.inset>header:after{opacity:.6}.tile.inset>article{color:var(--fg-alpha80)}.tile.inset footer:before,.tile.inset footer:after{opacity:.6}.spinner{width:100%;height:100%;box-sizing:border-box;position:relative;border-style:solid;border-width:.3em;border-radius:50%;border-color:transparent var(--default);animation:4s rotateOuter linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.4) inset}.spinner:before{content:"";position:absolute;top:.2em;left:.2em;right:.2em;bottom:.2em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha70);border-radius:inherit;animation:2s rotateInner linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.6) inset}.spinner:after{content:"";position:absolute;top:.7em;left:.7em;right:.7em;bottom:.7em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha40);border-radius:inherit;animation:4s rotateCenter linear infinite}@keyframes rotateOuter{0%{transform:rotate(45deg)}100%{transform:rotate(225deg)}}@keyframes rotateInner{0%{transform:rotate(-90deg)}100%{transform:rotate(-270deg)}}@keyframes rotateCenter{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}

package/css/ada.green.css

@@ -0,0 +1 @@
+.warn,.accent,:root{--l-dark: calc(var(--l) - 16%);--l-light: calc(var(--l) + 38%);--bg: hsl(var(--h), var(--s), var(--l-dark));--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}:root{--h: 132;--s: 92%;--l: 22%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 64;--s: 87%;--l: 25%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}

package/index.html

@@ -10,6 +10,7 @@
       name="viewport"
       content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
     />
+    <link rel="stylesheet" href="css/ada.blue.css" />
     <link rel="stylesheet" href="css/ada.css" />
     <link
       href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
@@ -108,10 +109,10 @@
           <article>Tile</article>
           <footer>Footer</footer>
         </div>
-        <div class="tile">
-          <header></header>
-          <article>Tile</article>
-          <footer></footer>
+        <div class="tile inset">
+          <header>Header</header>
+          <article>Inset Tile</article>
+          <footer>Footer</footer>
         </div>
         <div class="tile">
           <header></header>

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ada-ui",
-  "version": "2.9.4",
+  "version": "3.0.0",
   "scripts": {
-    "dev": "sass scss/ada.scss:css/ada.css --watch",
-    "build": "rm -rf css && sass scss/ada.scss:css/ada.min.css -s compressed --no-source-map"
+    "dev": "sass scss:css --watch",
+    "build": "rm -rf css && sass scss:css -s compressed --no-source-map"
   },
   "repository": {
     "type": "git",

package/scss/_ada.theme-base.scss

@@ -0,0 +1,18 @@
+%colourShades {
+  --l-dark: calc(var(--l) - 16%);
+  --l-light: calc(var(--l) + 38%);
+
+  --bg: hsl(var(--h), var(--s), var(--l-dark));
+
+  --fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));
+  --fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);
+  --fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);
+
+  --default: hsl(var(--h), var(--s), var(--l));
+  --default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);
+  --default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);
+
+  --light: hsl(var(--h), var(--s), var(--l-light));
+  --light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);
+  --light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7);
+}

package/scss/ada.blue.scss

@@ -0,0 +1,37 @@
+@import "ada.theme-base";
+
+:root {
+  @extend %colourShades;
+
+  --h: 205;
+  --s: 80%;
+  --l: 23%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.accent {
+  @extend %colourShades;
+
+  --h: 146;
+  --s: 58%;
+  --l: 20%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.warn {
+  @extend %colourShades;
+
+  --h: 0;
+  --s: 75%;
+  --l: 29%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}

package/scss/ada.green.scss

@@ -0,0 +1,50 @@
+@import "ada.theme-base";
+
+:root {
+  @extend %colourShades;
+
+  --h: 132;
+  --s: 92%;
+  --l: 22%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.accent {
+  @extend %colourShades;
+
+  //TODO which accent color???
+
+  //another green tone
+  --h: 64;
+  --s: 87%;
+  --l: 25%;
+
+  //orange
+  //--h: 32;
+  //--s: 85%;
+  //--l: 34%;
+
+  //blue
+  //--h: 212;
+  //--s: 50%;
+  //--l: 19%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}
+
+.warn {
+  @extend %colourShades;
+
+  --h: 0;
+  --s: 75%;
+  --l: 29%;
+
+  --h-fg: var(--h);
+  --s-fg: 100%;
+  --l-fg: 89%;
+}

package/scss/ada.scss

@@ -1,58 +1,3 @@
-:root {
-  @extend %colourShades;
-
-  --h: 205;
-  --s: 80%;
-  --l: 23%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
-
-.accent {
-  @extend %colourShades;
-
-  --h: 146;
-  --s: 58%;
-  --l: 20%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
-
-.warn {
-  @extend %colourShades;
-
-  --h: 0;
-  --s: 75%;
-  --l: 29%;
-
-  --h-fg: var(--h);
-  --s-fg: 100%;
-  --l-fg: 89%;
-}
-
-%colourShades {
-  --l-dark: calc(var(--l) - 16%);
-  --l-light: calc(var(--l) + 38%);
-
-  --bg: hsl(var(--h), var(--s), var(--l-dark));
-
-  --fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));
-  --fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);
-  --fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);
-
-  --default: hsl(var(--h), var(--s), var(--l));
-  --default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);
-  --default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);
-
-  --light: hsl(var(--h), var(--s), var(--l-light));
-  --light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);
-  --light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7);
-}
-
 $font-family: "Open Sans", sans-serif !default;
 
 @mixin desktop() {
@@ -112,8 +57,6 @@ body {
 }
 
 %header {
-  @extend %colourShades;
-
   font-weight: 300;
   text-shadow: 0 0 4px var(--light-alpha40);
   color: var(--fg);
@@ -167,8 +110,6 @@ body {
 }
 
 .button {
-  @extend %colourShades;
-
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -233,8 +174,6 @@ body {
 }
 
 .input {
-  @extend %colourShades;
-
   border-radius: 0.3rem;
   box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
   outline: none;
@@ -261,8 +200,6 @@ body {
 }
 
 .panel {
-  @extend %colourShades;
-
   background: var(--default-alpha10);
   box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.4);
   border-radius: 0.3rem;
@@ -369,11 +306,32 @@ body {
       border-width: 0 1px 1px 0;
     }
   }
+
+  &.inset {
+    box-shadow: inset 0 0 20px 1px rgba(0, 0, 0, 0.4);
+
+    > header {
+      color: var(--fg-alpha80);
+      &:before,
+      &:after {
+        opacity: 0.6;
+      }
+    }
+
+    > article {
+      color: var(--fg-alpha80);
+    }
+
+    footer {
+      &:before,
+      &:after {
+        opacity: 0.6;
+      }
+    }
+  }
 }
 
 .spinner {
-  @extend %colourShades;
-
   width: 100%;
   height: 100%;
   box-sizing: border-box;

package/css/ada.min.css

@@ -1 +0,0 @@
-:root{--h: 205;--s: 80%;--l: 23%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.spinner,.panel,.tile,.input,.button,.button.icon,h1,h2,.panel>header,.tile>header,h3,h4,:root,.accent,.warn{--l-dark: calc(var(--l) - 16%);--l-light: calc(var(--l) + 38%);--bg: hsl(var(--h), var(--s), var(--l-dark));--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);--default: hsl(var(--h), var(--s), var(--l));--default-alpha10: hsla(var(--h), var(--s), var(--l), 0.1);--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--light: hsl(var(--h), var(--s), var(--l-light));--light-alpha40: hsla(var(--h), var(--s), var(--l-light), 0.4);--light-alpha70: hsla(var(--h), var(--s), var(--l-light), 0.7)}html{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:400}@media screen and (max-width: 1199px){html{font-size:12px}}html,body{height:100%;min-height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}h1{font-size:3rem;margin:1rem 0 2rem 0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}.panel>header,.tile>header,h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h4{font-weight:400;font-size:1.2rem;margin:.5rem 0 .5rem 0}h1,h2,.panel>header,.tile>header,h3,h4{font-weight:300;text-shadow:0 0 4px var(--light-alpha40);color:var(--fg)}h1.m-0,h2.m-0,.panel>header,.tile>header,h3.m-0,h4.m-0{margin:0}body{font-size:1rem;-webkit-tap-highlight-color:transparent;box-sizing:border-box;padding:.5rem}.panel>footer:after,.tile>footer:after,.panel>footer:before,.tile>footer:before,.panel>header:after,.tile>header:after,.panel>header:before,.tile>header:before{content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2}.tile>footer:after,.tile>footer:before,.tile>header:after,.tile>header:before{border-color:var(--light-alpha40);height:.75rem;width:.75rem}.button-group{margin:.8rem}.button,.button.icon{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;cursor:pointer;user-select:none;background-color:transparent;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;min-height:min-content;min-width:8rem;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.button.small,.button.icon{display:grid;justify-items:center;align-items:center;min-width:0;padding:.8rem}.button.icon{border:1px solid transparent;box-shadow:none;background:none}.button.icon>i.material-icons{font-size:20px}.button-group>.button.icon{margin:1px}.button.fill{background-color:var(--default)}.button:focus{border:1px solid var(--light-alpha70)}.button:active{background-color:var(--light-alpha70);border:1px solid var(--default-alpha40)}.button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.input{border-radius:.3rem;box-shadow:0 0 10px 0px rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);text-shadow:0 0 4px var(--light-alpha40);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.input:focus{border:1px solid var(--light-alpha70)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;color:var(--fg-alpha80);pointer-events:none}.panel,.tile{background:var(--default-alpha10);box-shadow:0 0 20px 1px rgba(0,0,0,.4);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header,.tile>header{position:relative;text-align:left;padding:.4rem .6rem}.panel>header:before,.tile>header:before{border-width:2px 0 0 2px;border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after,.tile>header:after{border-width:2px 2px 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>header:empty,.tile>header:empty{padding:.2rem}.panel>article,.tile>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar{width:2px;background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:2px 2px 1px 2px;background:var(--default);box-sizing:border-box;background-clip:padding-box}.panel>footer,.tile>footer{position:relative;text-align:right;padding:.4rem .6rem;font-size:.75rem;color:var(--fg-alpha60)}.panel>footer:before,.tile>footer:before{border-width:0 0 2px 2px;border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after,.tile>footer:after{border-width:0 2px 2px 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.panel>footer:empty,.tile>footer:empty{padding:.2rem}.tile{margin:.8rem}.tile>header:before{border-width:1px 0 0 1px}.tile>header:after{border-width:1px 1px 0 0}.tile>article{color:var(--fg);text-shadow:0 0 4px var(--light-alpha40)}.tile>footer:before{border-width:0 0 1px 1px}.tile>footer:after{border-width:0 1px 1px 0}.spinner{width:100%;height:100%;box-sizing:border-box;position:relative;border-style:solid;border-width:.3em;border-radius:50%;border-color:transparent var(--default);animation:4s rotateOuter linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.4) inset}.spinner:before{content:"";position:absolute;top:.2em;left:.2em;right:.2em;bottom:.2em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha70);border-radius:inherit;animation:2s rotateInner linear infinite;box-shadow:0 0 10px 0px rgba(0,0,0,.6) inset}.spinner:after{content:"";position:absolute;top:.7em;left:.7em;right:.7em;bottom:.7em;border-style:inherit;border-width:inherit;border-color:transparent var(--light-alpha40);border-radius:inherit;animation:4s rotateCenter linear infinite}@keyframes rotateOuter{0%{transform:rotate(45deg)}100%{transform:rotate(225deg)}}@keyframes rotateInner{0%{transform:rotate(-90deg)}100%{transform:rotate(-270deg)}}@keyframes rotateCenter{0%{transform:rotate(0)}100%{transform:rotate(180deg)}}