ada-ui 3.0.0 → 3.0.2

package/README.md

@@ -4,16 +4,24 @@
 
 ## CDN
 
-~~~
-https://cdn.jsdelivr.net/gh/tklepzig/Ada@version/css/ada.min.css
-~~~
+    https://cdn.jsdelivr.net/gh/tklepzig/Ada@version/css/ada.min.css
+
 Replace `version` with the version of your desired release, see https://github.com/tklepzig/Ada/releases (e.g. `2.9.0`)
+
+> Attention: Beginning with version 3.0, the filenames don't contain `min` any longer. So the URL should be
+>
+>     https://cdn.jsdelivr.net/gh/tklepzig/Ada@3.0.0/css/ada.css
+
 ## Install
 
-~~~
-npm install ada-ui --save
-~~~
+    # Using npm
+    npm install ada-ui --save
+
+    # Using yarn
+    yarn add ada-ui
+
+## Select a Theme
+
+Beginning with version 3.0.0, you can choose between different themes. When using the CSS, ensure to include the correct theme file before the main one, e.g.:
 
-~~~
-yarn add ada-ui
-~~~
+    https://cdn.jsdelivr.net/gh/tklepzig/Ada@3.0.0/css/ada.blue.css

package/css/ada.green.css

@@ -1 +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%}
+.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: 21%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 24;--s: 91%;--l: 34%;--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,7 +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.green.css" />
     <link rel="stylesheet" href="css/ada.css" />
     <link
       href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
@@ -114,9 +114,9 @@
           <article>Inset Tile</article>
           <footer>Footer</footer>
         </div>
-        <div class="tile">
+        <div class="tile accent">
           <header></header>
-          <article>Tile</article>
+          <article>Tile Accent</article>
           <footer></footer>
         </div>
         <div class="tile">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ada-ui",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "scripts": {
     "dev": "sass scss:css --watch",
     "build": "rm -rf css && sass scss:css -s compressed --no-source-map"

package/scss/ada.green.scss

@@ -5,7 +5,7 @@
 
   --h: 132;
   --s: 92%;
-  --l: 22%;
+  --l: 21%;
 
   --h-fg: var(--h);
   --s-fg: 100%;
@@ -15,22 +15,9 @@
 .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: 24;
+  --s: 91%;
+  --l: 34%;
 
   --h-fg: var(--h);
   --s-fg: 100%;