2 files changed, 16 insertions, 122 deletions
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
index b08f5d7..f345098 100644
--- a/tpl/views/avatar.pug
+++ b/tpl/views/avatar.pug
@@ -1,125 +1,19 @@
 mixin view-avatar 
    +view('avatar', 'Avatar')
-        .c-box
+        each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
-            div(style={ display: 'flex', gap: '.3em' })
+            .c-box(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='400' href='#')
+                +avatar(size=size href='#')
                    = 'Vo'
-                +avatar(size='400' status='green' hue=45)
+                +avatar(size=size status='green' hue=45)
                    = 'lp'
-                +avatar(size='400' src='avatar.png')
+                +avatar(size=size src='avatar.png')
-                +avatar(size='400' src='avatar.png' status='red')
+                +avatar(size=size src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='300' href='#')
-                    = 'Vo'
-                +avatar(size='300' status='green' hue=45)
-                    = 'lp'
-                +avatar(size='300' src='avatar.png')
-                +avatar(size='300' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='200' href='#')
-                    = 'Vo'
-                +avatar(size='200' status='green' hue=45)
-                    = 'lp'
-                +avatar(size='200' src='avatar.png')
-                +avatar(size='200' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='150' href='#')
-                    = 'Vo'
-                +avatar(size='150' status='green' hue=45)
-                    = 'lp'
-                +avatar(size='150' src='avatar.png')
-                +avatar(size='150' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(href='#')
-                    = 'Vo'
-                +avatar(status='green' hue=45)
-                    = 'lp'
-                +avatar(src='avatar.png')
-                +avatar(src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='75' hue=90 href='#')
-                    = 'eo'
-                +avatar(size='75' status='green' hue=135)
-                    = 'n'
-                +avatar(size='75' src='avatar.png')
-                +avatar(size='75' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(size='50' hue=180 href='#')
-                    = 'V'
-                +avatar(size='50' hue=225)
-                    = 'o'
-                +avatar(size='50' src='avatar.png')
-        .c-box
+        each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
-            div(style={ display: 'flex', gap: '.3em' })
+            .c-box(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='400' href='#')
+                +avatar(circle=true size=size href='#')
-                    = 'Vo'
-                +avatar(circle=true size='400' status='green' hue=45)
-                    = 'lp'
-                +avatar(circle=true size='400' src='avatar.png')
-                +avatar(circle=true size='400' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='300' href='#')
-                    = 'Vo'
-                +avatar(circle=true size='300' status='green' hue=45)
-                    = 'lp'
-                +avatar(circle=true size='300' src='avatar.png')
-                +avatar(circle=true size='300' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='200' href='#')
-                    = 'Vo'
-                +avatar(circle=true size='200' status='green' hue=45)
-                    = 'lp'
-                +avatar(circle=true size='200' src='avatar.png')
-                +avatar(circle=true size='200' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='150' href='#')
-                    = 'Vo'
-                +avatar(circle=true size='150' status='green' hue=45)
-                    = 'lp'
-                +avatar(circle=true size='150' src='avatar.png')
-                +avatar(circle=true size='150' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true href='#')
                    = 'Vo'
-                +avatar(circle=true status='green' hue=45)
+                +avatar(circle=true size=size status='green' hue=45)
                    = 'lp'
-                +avatar(circle=true src='avatar.png')
+                +avatar(circle=true size=size src='avatar.png')
-                +avatar(circle=true src='avatar.png' status='red')
+                +avatar(circle=true size=size src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='75' hue=90 href='#')
-                    = 'eo'
-                +avatar(circle=true size='75' status='green' hue=135)
-                    = 'n'
-                +avatar(circle=true size='75' src='avatar.png')
-                +avatar(circle=true size='75' src='avatar.png' status='red')
-            br
-            br
-            div(style={ display: 'flex', gap: '.3em' })
-                +avatar(circle=true size='50' hue=180 href='#')
-                    = 'V'
-                +avatar(circle=true size='50' hue=225)
-                    = 'o'
-                +avatar(circle=true size='50' src='avatar.png')
diff --git a/tpl/views/status-indicator.pug b/tpl/views/status-indicator.pug
index 553e454..f4c8ad0 100644
--- a/tpl/views/status-indicator.pug
+++ b/tpl/views/status-indicator.pug
@@ -3,10 +3,10 @@ mixin view-status-indicator
        .c-box
            +status-indicator
            = ' '
-            +status-indicator('primary')
+            +status-indicator('accent')
            = ' '
-            +status-indicator('green')
+            +status-indicator('positive')
            = ' '
-            +status-indicator('yellow')
+            +status-indicator('warning')
            = ' '
-            +status-indicator('red')
+            +status-indicator('negative')

diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug index b08f5d7..f345098 100644 --- a/tpl/views/avatar.pug +++ b/tpl/views/avatar.pug
@@ -1,125 +1,19 @@
1	mixin view-avatar	1	mixin view-avatar
2	+view('avatar', 'Avatar')	2	+view('avatar', 'Avatar')
3	.c-box	3	each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
4	div(style={ display: 'flex', gap: '.3em' })	4	.c-box(style={ display: 'flex', gap: '.3em' })
5	+avatar(size='400' href='#')	5	+avatar(size=size href='#')
6	= 'Vo'	6	= 'Vo'
7	+avatar(size='400' status='green' hue=45)	7	+avatar(size=size status='green' hue=45)
8	= 'lp'	8	= 'lp'
9	+avatar(size='400' src='avatar.png')	9	+avatar(size=size src='avatar.png')
10	+avatar(size='400' src='avatar.png' status='red')	10	+avatar(size=size src='avatar.png' status='red')
11	br
12	br
13	div(style={ display: 'flex', gap: '.3em' })
14	+avatar(size='300' href='#')
15	= 'Vo'
16	+avatar(size='300' status='green' hue=45)
17	= 'lp'
18	+avatar(size='300' src='avatar.png')
19	+avatar(size='300' src='avatar.png' status='red')
20	br
21	br
22	div(style={ display: 'flex', gap: '.3em' })
23	+avatar(size='200' href='#')
24	= 'Vo'
25	+avatar(size='200' status='green' hue=45)
26	= 'lp'
27	+avatar(size='200' src='avatar.png')
28	+avatar(size='200' src='avatar.png' status='red')
29	br
30	br
31	div(style={ display: 'flex', gap: '.3em' })
32	+avatar(size='150' href='#')
33	= 'Vo'
34	+avatar(size='150' status='green' hue=45)
35	= 'lp'
36	+avatar(size='150' src='avatar.png')
37	+avatar(size='150' src='avatar.png' status='red')
38	br
39	br
40	div(style={ display: 'flex', gap: '.3em' })
41	+avatar(href='#')
42	= 'Vo'
43	+avatar(status='green' hue=45)
44	= 'lp'
45	+avatar(src='avatar.png')
46	+avatar(src='avatar.png' status='red')
47	br
48	br
49	div(style={ display: 'flex', gap: '.3em' })
50	+avatar(size='75' hue=90 href='#')
51	= 'eo'
52	+avatar(size='75' status='green' hue=135)
53	= 'n'
54	+avatar(size='75' src='avatar.png')
55	+avatar(size='75' src='avatar.png' status='red')
56	br
57	br
58	div(style={ display: 'flex', gap: '.3em' })
59	+avatar(size='50' hue=180 href='#')
60	= 'V'
61	+avatar(size='50' hue=225)
62	= 'o'
63	+avatar(size='50' src='avatar.png')
64		11
65	.c-box	12	each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl']
66	div(style={ display: 'flex', gap: '.3em' })	13	.c-box(style={ display: 'flex', gap: '.3em' })
67	+avatar(circle=true size='400' href='#')	14	+avatar(circle=true size=size href='#')
68	= 'Vo'
69	+avatar(circle=true size='400' status='green' hue=45)
70	= 'lp'
71	+avatar(circle=true size='400' src='avatar.png')
72	+avatar(circle=true size='400' src='avatar.png' status='red')
73	br
74	br
75	div(style={ display: 'flex', gap: '.3em' })
76	+avatar(circle=true size='300' href='#')
77	= 'Vo'
78	+avatar(circle=true size='300' status='green' hue=45)
79	= 'lp'
80	+avatar(circle=true size='300' src='avatar.png')
81	+avatar(circle=true size='300' src='avatar.png' status='red')
82	br
83	br
84	div(style={ display: 'flex', gap: '.3em' })
85	+avatar(circle=true size='200' href='#')
86	= 'Vo'
87	+avatar(circle=true size='200' status='green' hue=45)
88	= 'lp'
89	+avatar(circle=true size='200' src='avatar.png')
90	+avatar(circle=true size='200' src='avatar.png' status='red')
91	br
92	br
93	div(style={ display: 'flex', gap: '.3em' })
94	+avatar(circle=true size='150' href='#')
95	= 'Vo'
96	+avatar(circle=true size='150' status='green' hue=45)
97	= 'lp'
98	+avatar(circle=true size='150' src='avatar.png')
99	+avatar(circle=true size='150' src='avatar.png' status='red')
100	br
101	br
102	div(style={ display: 'flex', gap: '.3em' })
103	+avatar(circle=true href='#')
104	= 'Vo'	15	= 'Vo'
105	+avatar(circle=true status='green' hue=45)	16	+avatar(circle=true size=size status='green' hue=45)
106	= 'lp'	17	= 'lp'
107	+avatar(circle=true src='avatar.png')	18	+avatar(circle=true size=size src='avatar.png')
108	+avatar(circle=true src='avatar.png' status='red')	19	+avatar(circle=true size=size src='avatar.png' status='red')
109	br
110	br
111	div(style={ display: 'flex', gap: '.3em' })
112	+avatar(circle=true size='75' hue=90 href='#')
113	= 'eo'
114	+avatar(circle=true size='75' status='green' hue=135)
115	= 'n'
116	+avatar(circle=true size='75' src='avatar.png')
117	+avatar(circle=true size='75' src='avatar.png' status='red')
118	br
119	br
120	div(style={ display: 'flex', gap: '.3em' })
121	+avatar(circle=true size='50' hue=180 href='#')
122	= 'V'
123	+avatar(circle=true size='50' hue=225)
124	= 'o'
125	+avatar(circle=true size='50' src='avatar.png')


diff --git a/tpl/views/status-indicator.pug b/tpl/views/status-indicator.pug index 553e454..f4c8ad0 100644 --- a/tpl/views/status-indicator.pug +++ b/tpl/views/status-indicator.pug
@@ -3,10 +3,10 @@ mixin view-status-indicator
3	.c-box	3	.c-box
4	+status-indicator	4	+status-indicator
5	= ' '	5	= ' '
6	+status-indicator('primary')	6	+status-indicator('accent')
7	= ' '	7	= ' '
8	+status-indicator('green')	8	+status-indicator('positive')
9	= ' '	9	= ' '
10	+status-indicator('yellow')	10	+status-indicator('warning')
11	= ' '	11	= ' '
12	+status-indicator('red')	12	+status-indicator('negative')