ada-ui 3.0.1 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/ada.blue.css +1 -1
- package/css/ada.green.css +1 -1
- package/index.html +3 -3
- package/package.json +1 -1
- package/scss/_ada.theme-base.scss +0 -5
- package/scss/ada.blue.scss +5 -0
- package/scss/ada.green.scss +9 -17
package/css/ada.blue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.accent,:root{--
|
|
1
|
+
.warn,.accent,:root{--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%;--l-light: 61%;--bg: hsl(var(--h), 80%, 7%);--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--l-light: 58%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--l-light: 67%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/css/ada.green.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.accent,:root{--
|
|
1
|
+
.warn,.accent,:root{--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%;--l-light: 40%;--bg: hsl(var(--h), 20%, 15%);--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 24;--s: 91%;--l: 34%;--l-light: 60%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 75%;--l: 29%;--l-light: 60%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/index.html
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
name="viewport"
|
|
11
11
|
content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
|
|
12
12
|
/>
|
|
13
|
-
<link rel="stylesheet" href="css/ada.
|
|
13
|
+
<link rel="stylesheet" href="css/ada.green.css" />
|
|
14
14
|
<link rel="stylesheet" href="css/ada.css" />
|
|
15
15
|
<link
|
|
16
16
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
|
@@ -114,9 +114,9 @@
|
|
|
114
114
|
<article>Inset Tile</article>
|
|
115
115
|
<footer>Footer</footer>
|
|
116
116
|
</div>
|
|
117
|
-
<div class="tile">
|
|
117
|
+
<div class="tile accent">
|
|
118
118
|
<header></header>
|
|
119
|
-
<article>Tile</article>
|
|
119
|
+
<article>Tile Accent</article>
|
|
120
120
|
<footer></footer>
|
|
121
121
|
</div>
|
|
122
122
|
<div class="tile">
|
package/package.json
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
%colourShades {
|
|
2
|
-
--l-dark: calc(var(--l) - 16%);
|
|
3
|
-
--l-light: calc(var(--l) + 38%);
|
|
4
|
-
|
|
5
|
-
--bg: hsl(var(--h), var(--s), var(--l-dark));
|
|
6
|
-
|
|
7
2
|
--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));
|
|
8
3
|
--fg-alpha60: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);
|
|
9
4
|
--fg-alpha80: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.8);
|
package/scss/ada.blue.scss
CHANGED
|
@@ -6,6 +6,9 @@
|
|
|
6
6
|
--h: 205;
|
|
7
7
|
--s: 80%;
|
|
8
8
|
--l: 23%;
|
|
9
|
+
--l-light: 61%;
|
|
10
|
+
|
|
11
|
+
--bg: hsl(var(--h), 80%, 7%);
|
|
9
12
|
|
|
10
13
|
--h-fg: var(--h);
|
|
11
14
|
--s-fg: 100%;
|
|
@@ -18,6 +21,7 @@
|
|
|
18
21
|
--h: 146;
|
|
19
22
|
--s: 58%;
|
|
20
23
|
--l: 20%;
|
|
24
|
+
--l-light: 58%;
|
|
21
25
|
|
|
22
26
|
--h-fg: var(--h);
|
|
23
27
|
--s-fg: 100%;
|
|
@@ -30,6 +34,7 @@
|
|
|
30
34
|
--h: 0;
|
|
31
35
|
--s: 75%;
|
|
32
36
|
--l: 29%;
|
|
37
|
+
--l-light: 67%;
|
|
33
38
|
|
|
34
39
|
--h-fg: var(--h);
|
|
35
40
|
--s-fg: 100%;
|
package/scss/ada.green.scss
CHANGED
|
@@ -5,7 +5,10 @@
|
|
|
5
5
|
|
|
6
6
|
--h: 132;
|
|
7
7
|
--s: 92%;
|
|
8
|
-
--l:
|
|
8
|
+
--l: 21%;
|
|
9
|
+
--l-light: 40%;
|
|
10
|
+
|
|
11
|
+
--bg: hsl(var(--h), 20%, 15%);
|
|
9
12
|
|
|
10
13
|
--h-fg: var(--h);
|
|
11
14
|
--s-fg: 100%;
|
|
@@ -15,22 +18,10 @@
|
|
|
15
18
|
.accent {
|
|
16
19
|
@extend %colourShades;
|
|
17
20
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
--
|
|
22
|
-
--s: 87%;
|
|
23
|
-
--l: 25%;
|
|
24
|
-
|
|
25
|
-
//orange
|
|
26
|
-
//--h: 32;
|
|
27
|
-
//--s: 85%;
|
|
28
|
-
//--l: 34%;
|
|
29
|
-
|
|
30
|
-
//blue
|
|
31
|
-
//--h: 212;
|
|
32
|
-
//--s: 50%;
|
|
33
|
-
//--l: 19%;
|
|
21
|
+
--h: 24;
|
|
22
|
+
--s: 91%;
|
|
23
|
+
--l: 34%;
|
|
24
|
+
--l-light: 60%;
|
|
34
25
|
|
|
35
26
|
--h-fg: var(--h);
|
|
36
27
|
--s-fg: 100%;
|
|
@@ -43,6 +34,7 @@
|
|
|
43
34
|
--h: 0;
|
|
44
35
|
--s: 75%;
|
|
45
36
|
--l: 29%;
|
|
37
|
+
--l-light: 60%;
|
|
46
38
|
|
|
47
39
|
--h-fg: var(--h);
|
|
48
40
|
--s-fg: 100%;
|