summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug6
-rw-r--r--tpl/objects/action-button.pug36
-rw-r--r--tpl/objects/badge.pug37
-rw-r--r--tpl/objects/button.pug56
-rw-r--r--tpl/objects/dialog.pug6
-rw-r--r--tpl/objects/icon-nav.pug8
-rw-r--r--tpl/objects/lightbox.pug6
-rw-r--r--tpl/objects/menu.pug2
-rw-r--r--tpl/objects/navbar.pug2
-rw-r--r--tpl/objects/side-nav.pug2
-rw-r--r--tpl/views/action-button.pug182
-rw-r--r--tpl/views/badge.pug69
-rw-r--r--tpl/views/button.pug203
-rw-r--r--tpl/views/card.pug8
-rw-r--r--tpl/views/dialog.pug4
-rw-r--r--tpl/views/emoji.pug8
-rw-r--r--tpl/views/form.pug2
-rw-r--r--tpl/views/menu.pug2
-rw-r--r--tpl/views/popover.pug2
-rw-r--r--tpl/views/text-field.pug6
20 files changed, 215 insertions, 432 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index 7d73c75..0f1b5b0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -9,7 +9,6 @@ include layouts/container.pug
9include objects/palette.pug 9include objects/palette.pug
10include objects/heading.pug 10include objects/heading.pug
11include objects/divider.pug 11include objects/divider.pug
12include objects/badge.pug
13include objects/button.pug 12include objects/button.pug
14include objects/text-field.pug 13include objects/text-field.pug
15include objects/field-label.pug 14include objects/field-label.pug
@@ -17,7 +16,6 @@ include objects/radio.pug
17include objects/checkbox.pug 16include objects/checkbox.pug
18include objects/switch.pug 17include objects/switch.pug
19include objects/form.pug 18include objects/form.pug
20include objects/action-button.pug
21include objects/overflow-button.pug 19include objects/overflow-button.pug
22include objects/status-indicator.pug 20include objects/status-indicator.pug
23include objects/avatar.pug 21include objects/avatar.pug
@@ -62,7 +60,6 @@ include views/links.pug
62include views/code.pug 60include views/code.pug
63include views/blockquote.pug 61include views/blockquote.pug
64include views/list.pug 62include views/list.pug
65include views/badge.pug
66include views/button.pug 63include views/button.pug
67include views/text-field.pug 64include views/text-field.pug
68include views/field-label.pug 65include views/field-label.pug
@@ -70,7 +67,6 @@ include views/radio.pug
70include views/checkbox.pug 67include views/checkbox.pug
71include views/switch.pug 68include views/switch.pug
72include views/form.pug 69include views/form.pug
73include views/action-button.pug
74include views/overflow-button.pug 70include views/overflow-button.pug
75include views/status-indicator.pug 71include views/status-indicator.pug
76include views/avatar.pug 72include views/avatar.pug
@@ -110,7 +106,6 @@ html
110 +view-blockquote 106 +view-blockquote
111 +view-list 107 +view-list
112 +view-emoji 108 +view-emoji
113 +view-badge
114 +view-button 109 +view-button
115 +view-text-field 110 +view-text-field
116 +view-field-label 111 +view-field-label
@@ -118,7 +113,6 @@ html
118 +view-checkbox 113 +view-checkbox
119 +view-switch 114 +view-switch
120 +view-form 115 +view-form
121 +view-action-button
122 //+view-overflow-button 116 //+view-overflow-button
123 +view-status-indicator 117 +view-status-indicator
124 +view-avatar 118 +view-avatar
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
deleted file mode 100644
index 0e77e58..0000000
--- a/tpl/objects/action-button.pug
+++ /dev/null
@@ -1,36 +0,0 @@
1include icon.pug
2
3mixin action-button
4 -
5 let classes = {
6 'o-action-button': true,
7 'u-d-block': attributes.block,
8 'o-action-button--secondary': attributes.secondary,
9 'o-action-button--quiet': attributes.quiet,
10 'o-action-button--pill': attributes.pill,
11 'o-action-button--static': attributes.static,
12 'o-action-button--icon': !!attributes.icon && !block,
13 'is-selected': attributes.selected,
14 }
15 if (attributes.theme) {
16 classes['o-action-button--' + attributes.theme] = true
17 }
18 if (attributes.size) {
19 classes['o-action-button--' + attributes.size] = true
20 }
21 if (attributes.class) {
22 classes[attributes.class] = true;
23 }
24
25 let href = attributes.disabled ? null : '#';
26
27 a(class=classes href=href)
28 if attributes.icon
29 +icon(attributes.icon)
30 = ' '
31 if block
32 span.o-action-button__label
33 block
34 if attributes.postIcon
35 = ' '
36 +icon(attributes.postIcon)
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
deleted file mode 100644
index 48e4029..0000000
--- a/tpl/objects/badge.pug
+++ /dev/null
@@ -1,37 +0,0 @@
1mixin badge(variant)
2 -
3 let classes = {
4 'o-badge': true,
5 'o-badge--pill': !!attributes.pill,
6 'o-badge--quiet': !!attributes.quiet,
7 'o-menu__badge': !!attributes.menu,
8 }
9 if (attributes.size) {
10 classes['o-badge--' + attributes.size] = true
11 }
12 if (variant) {
13 classes['o-badge--' + variant] = true
14 }
15
16 if attributes.href
17 a(href=attributes.href class=classes)
18 if attributes.icon
19 +icon(attributes.icon)
20 = ' '
21 if block
22 span.o-badge__label
23 block
24 if attributes.postIcon
25 = ' '
26 +icon(attributes.postIcon)
27 else
28 span(class=classes)
29 if attributes.icon
30 +icon(attributes.icon)
31 = ' '
32 if block
33 span.o-badge__label
34 block
35 if attributes.postIcon
36 = ' '
37 +icon(attributes.postIcon)
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 0884c8d..b9b4cbd 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -1,28 +1,48 @@
1mixin a-button 1include icon.pug
2
3mixin button
2 - 4 -
3 let classes = { 5 let classes = {
4 'o-button': true, 6 'o-button': true,
5 'o-button--block': attributes.block, 7 'u-d-block': attributes.block,
6 'o-button--primary': attributes.primary, 8 'o-button--secondary': attributes.secondary,
7 'o-button--outline': attributes.outline, 9 'o-button--quiet': attributes.quiet,
8 'o-button--round': !!attributes.icon && !block 10 'o-button--pill': attributes.pill,
11 'o-button--static': attributes.static,
12 'o-button--icon': !!attributes.icon && !block,
13 'is-selected': attributes.selected,
9 } 14 }
10 if (attributes.variant) { 15 if (attributes.theme) {
11 classes['o-button--' + attributes.variant] = true 16 classes['o-button--' + attributes.theme] = true
12 } 17 }
13 if (attributes.size) { 18 if (attributes.size) {
14 classes['o-button--' + attributes.size] = true 19 classes['o-button--' + attributes.size] = true
15 } 20 }
21 if (attributes.class) {
22 classes[attributes.class] = true;
23 }
16 24
17 let href = attributes.disabled ? null : '#'; 25 let href = attributes.disabled ? null : '#';
18 26
19 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) 27 if attributes.badge
20 if attributes.icon 28 span(class=classes href=href)
21 +icon(attributes.icon) 29 if attributes.icon
22 = ' ' 30 +icon(attributes.icon)
23 if block 31 = ' '
24 span.o-button__label 32 if block
25 block 33 span.o-button__label
26 if attributes.postIcon 34 block
27 = ' ' 35 if attributes.postIcon
28 +icon(attributes.postIcon) 36 = ' '
37 +icon(attributes.postIcon)
38 else
39 a(class=classes href=href)
40 if attributes.icon
41 +icon(attributes.icon)
42 = ' '
43 if block
44 span.o-button__label
45 block
46 if attributes.postIcon
47 = ' '
48 +icon(attributes.postIcon)
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 3ceae69..1a2f061 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -54,13 +54,13 @@ mixin dialog(title)
54 else 54 else
55 if title 55 if title
56 +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title 56 +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title
57 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') 57 +button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')
58 58
59 section(class=bodyClass) 59 section(class=bodyClass)
60 if slots.body 60 if slots.body
61 - slots.body() 61 - slots.body()
62 62
63 footer.o-dialog__footer.l-button-group 63 footer.o-dialog__footer.l-button-group
64 +a-button(outline=true)= 'Cancel' 64 +button(outline=true)= 'Cancel'
65 = ' ' 65 = ' '
66 +a-button(variant='accent')= 'Continue' 66 +button(variant='accent')= 'Continue'
diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug
index f1c7d8a..afdf2db 100644
--- a/tpl/objects/icon-nav.pug
+++ b/tpl/objects/icon-nav.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin icon-nav 5mixin icon-nav
6 - 6 -
@@ -19,9 +19,9 @@ mixin icon-nav-item(icon)
19 - 19 -
20 let classes = { 20 let classes = {
21 'o-icon-nav__item': true, 21 'o-icon-nav__item': true,
22 'o-action-button': true, 22 'o-button': true,
23 'o-action-button--round': true, 23 'o-button--round': true,
24 'o-action-button--quiet': true, 24 'o-button--quiet': true,
25 'is-selected': attributes.selected, 25 'is-selected': attributes.selected,
26 } 26 }
27 if (attributes.class) { 27 if (attributes.class) {
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 842d44a..2d520b5 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -23,14 +23,14 @@ mixin lightbox(images)
23 header.o-lightbox__header 23 header.o-lightbox__header
24 div(class=linksClasses) 24 div(class=linksClasses)
25 block 25 block
26 +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') 26 +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
27 27
28 each img, i in images 28 each img, i in images
29 img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) 29 img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
30 30
31 if images.length > 1 31 if images.length > 1
32 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 32 +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
33 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 33 +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
34 34
35 .o-lightbox__thumbnails 35 .o-lightbox__thumbnails
36 each img, i in images 36 each img, i in images
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 578f9bc..802f9bd 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin menu 5mixin menu
6 - 6 -
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
index 5c7642c..14ec9d3 100644
--- a/tpl/objects/navbar.pug
+++ b/tpl/objects/navbar.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin navbar 5mixin navbar
6 - 6 -
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
index ccd24e4..2dcbd84 100644
--- a/tpl/objects/side-nav.pug
+++ b/tpl/objects/side-nav.pug
@@ -1,6 +1,6 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug 3include button.pug
4 4
5mixin side-nav 5mixin side-nav
6 - 6 -
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
deleted file mode 100644
index 4d2ffb6..0000000
--- a/tpl/views/action-button.pug
+++ /dev/null
@@ -1,182 +0,0 @@
1mixin view-action-button
2 +view('action-button', 'Action button')
3 .c-box
4 +action-button(size='sm')= 'Idle'
5 = ' '
6 +action-button= 'Idle'
7 = ' '
8 +action-button(size='lg')= 'Idle'
9 = ' '
10 +action-button(size='xl')= 'Idle'
11 br
12 br
13 +action-button(icon='trash' size='sm')
14 = ' '
15 +action-button(icon='trash')
16 = ' '
17 +action-button(icon='trash' size='lg')
18 = ' '
19 +action-button(icon='trash' size='xl')
20 br
21 br
22 +action-button(icon='user' size='sm')= 'Idle'
23 = ' '
24 +action-button(icon='user')= 'Idle'
25 = ' '
26 +action-button(icon='user' size='lg')= 'Idle'
27 = ' '
28 +action-button(icon='user' size='xl')= 'Idle'
29
30 .c-box
31 +action-button(pill=true size='sm')= 'Idle'
32 = ' '
33 +action-button(pill=true)= 'Idle'
34 = ' '
35 +action-button(pill=true size='lg')= 'Idle'
36 = ' '
37 +action-button(pill=true size='xl')= 'Idle'
38 br
39 br
40 +action-button(pill=true icon='trash' size='sm')
41 = ' '
42 +action-button(pill=true icon='trash')
43 = ' '
44 +action-button(pill=true icon='trash' size='lg')
45 = ' '
46 +action-button(pill=true icon='trash' size='xl')
47 br
48 br
49 +action-button(pill=true icon='user' size='sm')= 'Idle'
50 = ' '
51 +action-button(pill=true icon='user')= 'Idle'
52 = ' '
53 +action-button(pill=true icon='user' size='lg')= 'Idle'
54 = ' '
55 +action-button(pill=true icon='user' size='xl')= 'Idle'
56
57 .c-box
58 +action-button= 'Label'
59 = ' '
60 +action-button(icon='trash')= 'Label'
61 = ' '
62 +action-button(icon='trash')
63 br
64 br
65 +action-button(quiet=true)= 'Label'
66 = ' '
67 +action-button(quiet=true icon='trash')= 'Label'
68 = ' '
69 +action-button(quiet=true icon='trash')
70
71 .c-box
72 +action-button= 'Idle'
73 = ' '
74 +action-button(selected=true)= 'Selected'
75 = ' '
76 +action-button(disabled=true)= 'Disabled'
77 = ' '
78 +action-button(selected=true disabled=true)= 'Selected + disabled'
79 br
80 br
81 +action-button(static=true )= 'Idle'
82 = ' '
83 +action-button(static=true selected=true)= 'Selected'
84 = ' '
85 +action-button(static=true disabled=true)= 'Disabled'
86 = ' '
87 +action-button(static=true selected=true disabled=true)= 'Selected + disabled'
88 br
89 br
90 +action-button(quiet=true )= 'Idle'
91 = ' '
92 +action-button(quiet=true selected=true)= 'Selected'
93 = ' '
94 +action-button(quiet=true disabled=true)= 'Disabled'
95 = ' '
96 +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
97
98 .c-box
99 +action-button(pill=true)= 'Idle'
100 = ' '
101 +action-button(pill=true selected=true)= 'Selected'
102 = ' '
103 +action-button(pill=true disabled=true)= 'Disabled'
104 = ' '
105 +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
106 br
107 br
108 +action-button(pill=true static=true)= 'Idle'
109 = ' '
110 +action-button(pill=true static=true selected=true)= 'Selected'
111 = ' '
112 +action-button(pill=true static=true disabled=true)= 'Disabled'
113 = ' '
114 +action-button(pill=true static=true selected=true disabled=true)= 'Selected + disabled'
115 br
116 br
117 +action-button(pill=true quiet=true)= 'Idle'
118 = ' '
119 +action-button(pill=true quiet=true selected=true)= 'Selected'
120 = ' '
121 +action-button(pill=true quiet=true disabled=true)= 'Disabled'
122 = ' '
123 +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
124
125 each theme, i in ['accent', 'positive', 'negative', 'warning']
126 .c-box
127 +action-button(theme=theme)= 'Idle'
128 = ' '
129 +action-button(theme=theme selected=true)= 'Selected'
130 = ' '
131 +action-button(theme=theme disabled=true)= 'Disabled'
132 = ' '
133 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
134 br
135 br
136 +action-button(theme=theme static=true)= 'Idle'
137 = ' '
138 +action-button(theme=theme static=true selected=true)= 'Selected'
139 = ' '
140 +action-button(theme=theme static=true disabled=true)= 'Disabled'
141 = ' '
142 +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
143 br
144 br
145 +action-button(theme=theme quiet=true)= 'Idle'
146 = ' '
147 +action-button(theme=theme quiet=true selected=true)= 'Selected'
148 = ' '
149 +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
150 = ' '
151 +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
152
153 each theme in ['static-black', 'static-white']
154 -
155 const bg = theme.startsWith('static-black') ? 500 : 1000;
156
157 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
158 +action-button(theme=theme)= 'Idle'
159 = ' '
160 +action-button(theme=theme selected=true)= 'Selected'
161 = ' '
162 +action-button(theme=theme disabled=true)= 'Disabled'
163 = ' '
164 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
165 br
166 br
167 +action-button(theme=theme static=true)= 'Idle'
168 = ' '
169 +action-button(theme=theme static=true selected=true)= 'Selected'
170 = ' '
171 +action-button(theme=theme static=true disabled=true)= 'Disabled'
172 = ' '
173 +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
174 br
175 br
176 +action-button(theme=theme quiet=true)= 'Idle'
177 = ' '
178 +action-button(theme=theme quiet=true selected=true)= 'Selected'
179 = ' '
180 +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
181 = ' '
182 +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
deleted file mode 100644
index cc1f346..0000000
--- a/tpl/views/badge.pug
+++ /dev/null
@@ -1,69 +0,0 @@
1mixin view-badge
2 +view('badge', 'Badge')
3 .c-box
4 +badge(size='sm' href='#')= '50'
5 = ' '
6 +badge(href='#')= '100'
7 = ' '
8 +badge(size='lg' href='#')= '200'
9 = ' '
10 +badge(size='xl' href='#')= '300'
11
12 .c-box
13 +badge(pill=true size='sm' href='#')= '50'
14 = ' '
15 +badge(pill=true href='#')= '100'
16 = ' '
17 +badge(pill=true size='lg' href='#')= '200'
18 = ' '
19 +badge(pill=true size='xl' href='#')= '300'
20
21 .c-box
22 +badge(icon='image' size='sm' href='#')= '50'
23 = ' '
24 +badge(icon='image' href='#')= '100'
25 = ' '
26 +badge(icon='image' size='lg' href='#')= '200'
27 = ' '
28 +badge(icon='image' size='xl' href='#')= '300'
29
30 .c-box
31 +badge(pill=true icon='image' size='sm' href='#')= '50'
32 = ' '
33 +badge(pill=true icon='image' href='#')= '100'
34 = ' '
35 +badge(pill=true icon='image' size='lg' href='#')= '200'
36 = ' '
37 +badge(pill=true icon='image' size='xl' href='#')= '300'
38
39 .c-box
40 +badge(href='#')= '100'
41 = ' '
42 +badge(quiet=true href='#')= '100'
43 = ' '
44 +badge(pill=true href='#')= '100'
45 = ' '
46 +badge(quiet=true pill=true href='#')= '100'
47
48 each theme in ['accent', 'positive', 'negative', 'warning']
49 .c-box
50 +badge(theme)(href='#')= 'new'
51 = ' '
52 +badge(theme)(quiet=true href='#')= 'new'
53 = ' '
54 +badge(theme)(pill=true href='#')= 'new'
55 = ' '
56 +badge(theme)(quiet=true pill=true href='#')= 'new'
57
58 each theme in ['static-black', 'static-white']
59 -
60 const bg = theme.startsWith('static-black') ? 500 : 1000;
61
62 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
63 +badge(theme)(href='#')= 'new'
64 = ' '
65 +badge(theme)(quiet=true href='#')= 'new'
66 = ' '
67 +badge(theme)(pill=true href='#')= 'new'
68 = ' '
69 +badge(theme)(quiet=true pill=true href='#')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index da7531b..7e03e04 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -1,89 +1,182 @@
1mixin view-button 1mixin view-button
2 +view('button', 'Button') 2 +view('button', 'Button')
3 .c-box 3 .c-box
4 +a-button(size='sm')= 'Button' 4 +button(size='sm')= 'Idle'
5 = ' ' 5 = ' '
6 +a-button= 'Button' 6 +button= 'Idle'
7 = ' ' 7 = ' '
8 +a-button(size='lg')= 'Button' 8 +button(size='lg')= 'Idle'
9 = ' ' 9 = ' '
10 +a-button(size='xl')= 'Button' 10 +button(size='xl')= 'Idle'
11 br
12 br
13 +button(icon='trash' size='sm')
14 = ' '
15 +button(icon='trash')
16 = ' '
17 +button(icon='trash' size='lg')
18 = ' '
19 +button(icon='trash' size='xl')
20 br
21 br
22 +button(icon='user' size='sm')= 'Idle'
23 = ' '
24 +button(icon='user')= 'Idle'
25 = ' '
26 +button(icon='user' size='lg')= 'Idle'
27 = ' '
28 +button(icon='user' size='xl')= 'Idle'
11 29
12 .c-box 30 .c-box
13 +a-button(size='sm' outline=true)= 'Button' 31 +button(pill=true size='sm')= 'Idle'
32 = ' '
33 +button(pill=true)= 'Idle'
14 = ' ' 34 = ' '
15 +a-button(outline=true)= 'Button' 35 +button(pill=true size='lg')= 'Idle'
36 = ' '
37 +button(pill=true size='xl')= 'Idle'
38 br
39 br
40 +button(pill=true icon='trash' size='sm')
16 = ' ' 41 = ' '
17 +a-button(size='lg' outline=true)= 'Button' 42 +button(pill=true icon='trash')
18 = ' ' 43 = ' '
19 +a-button(size='xl' outline=true)= 'Button' 44 +button(pill=true icon='trash' size='lg')
45 = ' '
46 +button(pill=true icon='trash' size='xl')
47 br
48 br
49 +button(pill=true icon='user' size='sm')= 'Idle'
50 = ' '
51 +button(pill=true icon='user')= 'Idle'
52 = ' '
53 +button(pill=true icon='user' size='lg')= 'Idle'
54 = ' '
55 +button(pill=true icon='user' size='xl')= 'Idle'
20 56
21 .c-box 57 .c-box
22 +a-button(postIcon='arrow-right' size='sm')= 'Button' 58 +button= 'Label'
23 = ' ' 59 = ' '
24 +a-button(postIcon='arrow-right')= 'Button' 60 +button(icon='trash')= 'Label'
25 = ' ' 61 = ' '
26 +a-button(postIcon='arrow-right' size='lg')= 'Button' 62 +button(icon='trash')
63 br
64 br
65 +button(quiet=true)= 'Label'
66 = ' '
67 +button(quiet=true icon='trash')= 'Label'
27 = ' ' 68 = ' '
28 +a-button(postIcon='arrow-right' size='xl')= 'Button' 69 +button(quiet=true icon='trash')
29 70
30 .c-box 71 .c-box
31 .l-button-group 72 +button= 'Idle'
32 +a-button= 'Button' 73 = ' '
33 +a-button(disabled=true)= 'Button' 74 +button(selected=true)= 'Selected'
34 +a-button(outline=true)= 'Button' 75 = ' '
35 +a-button(outline=true disabled=true)= 'Button' 76 +button(disabled=true)= 'Disabled'
77 = ' '
78 +button(selected=true disabled=true)= 'Selected + disabled'
36 br 79 br
37 br 80 br
38 .l-button-group 81 +button(static=true )= 'Idle'
39 +a-button(icon='trash') 82 = ' '
40 +a-button(disabled=true icon='trash') 83 +button(static=true selected=true)= 'Selected'
41 +a-button(outline=true icon='trash') 84 = ' '
42 +a-button(outline=true disabled=true icon='trash') 85 +button(static=true disabled=true)= 'Disabled'
86 = ' '
87 +button(static=true selected=true disabled=true)= 'Selected + disabled'
88 br
89 br
90 +button(quiet=true )= 'Idle'
91 = ' '
92 +button(quiet=true selected=true)= 'Selected'
93 = ' '
94 +button(quiet=true disabled=true)= 'Disabled'
95 = ' '
96 +button(quiet=true selected=true disabled=true)= 'Selected + disabled'
97
98 .c-box
99 +button(pill=true)= 'Idle'
100 = ' '
101 +button(pill=true selected=true)= 'Selected'
102 = ' '
103 +button(pill=true disabled=true)= 'Disabled'
104 = ' '
105 +button(pill=true selected=true disabled=true)= 'Selected + disabled'
106 br
107 br
108 +button(pill=true static=true)= 'Idle'
109 = ' '
110 +button(pill=true static=true selected=true)= 'Selected'
111 = ' '
112 +button(pill=true static=true disabled=true)= 'Disabled'
113 = ' '
114 +button(pill=true static=true selected=true disabled=true)= 'Selected + disabled'
115 br
116 br
117 +button(pill=true quiet=true)= 'Idle'
118 = ' '
119 +button(pill=true quiet=true selected=true)= 'Selected'
120 = ' '
121 +button(pill=true quiet=true disabled=true)= 'Disabled'
122 = ' '
123 +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
43 124
44 each theme in ['primary', 'accent', 'negative'] 125 each theme, i in ['accent', 'positive', 'negative', 'warning']
45 .c-box 126 .c-box
46 .l-button-group 127 +button(theme=theme)= 'Idle'
47 +a-button(variant=theme)= 'Button' 128 = ' '
48 +a-button(variant=theme disabled=true)= 'Button' 129 +button(theme=theme selected=true)= 'Selected'
49 +a-button(variant=theme outline=true)= 'Button' 130 = ' '
50 +a-button(variant=theme outline=true disabled=true)= 'Button' 131 +button(theme=theme disabled=true)= 'Disabled'
132 = ' '
133 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
134 br
51 br 135 br
136 +button(theme=theme static=true)= 'Idle'
137 = ' '
138 +button(theme=theme static=true selected=true)= 'Selected'
139 = ' '
140 +button(theme=theme static=true disabled=true)= 'Disabled'
141 = ' '
142 +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
52 br 143 br
53 .l-button-group 144 br
54 +a-button(variant=theme icon='trash') 145 +button(theme=theme quiet=true)= 'Idle'
55 +a-button(variant=theme disabled=true icon='trash') 146 = ' '
56 +a-button(variant=theme outline=true icon='trash') 147 +button(theme=theme quiet=true selected=true)= 'Selected'
57 +a-button(variant=theme outline=true disabled=true icon='trash') 148 = ' '
149 +button(theme=theme quiet=true disabled=true)= 'Disabled'
150 = ' '
151 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
58 152
59 each theme in ['static-black', 'static-white'] 153 each theme in ['static-black', 'static-white']
60 - 154 -
61 const bg = theme.startsWith('static-black') ? 500 : 1000; 155 const bg = theme.startsWith('static-black') ? 500 : 1000;
62 156
63 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 157 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
64 .l-button-group 158 +button(theme=theme)= 'Idle'
65 +a-button(variant=theme)= 'Button' 159 = ' '
66 +a-button(variant=theme disabled=true)= 'Button' 160 +button(theme=theme selected=true)= 'Selected'
67 +a-button(variant=theme outline=true)= 'Button' 161 = ' '
68 +a-button(variant=theme outline=true disabled=true)= 'Button' 162 +button(theme=theme disabled=true)= 'Disabled'
163 = ' '
164 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
69 br 165 br
70 br 166 br
71 .l-button-group 167 +button(theme=theme static=true)= 'Idle'
72 +a-button(variant=theme icon='trash') 168 = ' '
73 +a-button(variant=theme disabled=true icon='trash') 169 +button(theme=theme static=true selected=true)= 'Selected'
74 +a-button(variant=theme outline=true icon='trash') 170 = ' '
75 +a-button(variant=theme outline=true disabled=true icon='trash') 171 +button(theme=theme static=true disabled=true)= 'Disabled'
76 172 = ' '
77 .c-box(style=`background-color: var(--colors--blue-static--${bg});`) 173 +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled'
78 .l-button-group
79 +a-button(variant=theme primary=true)= 'Button'
80 +a-button(variant=theme primary=true disabled=true)= 'Button'
81 +a-button(variant=theme primary=true outline=true)= 'Button'
82 +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
83 br 174 br
84 br 175 br
85 .l-button-group 176 +button(theme=theme quiet=true)= 'Idle'
86 +a-button(variant=theme primary=true icon='trash') 177 = ' '
87 +a-button(variant=theme primary=true disabled=true icon='trash') 178 +button(theme=theme quiet=true selected=true)= 'Selected'
88 +a-button(variant=theme primary=true outline=true icon='trash') 179 = ' '
89 +a-button(variant=theme primary=true outline=true disabled=true icon='trash') 180 +button(theme=theme quiet=true disabled=true)= 'Disabled'
181 = ' '
182 +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 9a35b37..f030abf 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -83,17 +83,17 @@ mixin view-card
83 +card-body 83 +card-body
84 .l-media 84 .l-media
85 .l-media__block 85 .l-media__block
86 +badge('positive')(quiet=true icon='repeat' href='#') 86 +button(theme='positive' static=true pill=true size='sm' icon='repeat' href='#')
87 strong= '12' 87 strong= '12'
88 .l-media__block 88 .l-media__block
89 +badge('warning')(quiet=true icon='star' href='#') 89 +button(theme='warning' static=true pill=true size='sm' icon='star' href='#')
90 strong= '34' 90 strong= '34'
91 .l-media__block.u-mis-auto 91 .l-media__block.u-mis-auto
92 +a-button(primary=true)= 'Reply' 92 +button(selected=true)= 'Reply'
93 93
94 +card(quiet=true href='#' class='l-card-list__card') 94 +card(quiet=true href='#' class='l-card-list__card')
95 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 95 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
96 +badge= 'Drawings' 96 +button(badge=true static=true selected=true)= 'Drawings'
97 +card-body 97 +card-body
98 +card-title= 'XS Heading' 98 +card-title= 'XS Heading'
99 +card-content 99 +card-content
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug
index 5a659dd..9c2e520 100644
--- a/tpl/views/dialog.pug
+++ b/tpl/views/dialog.pug
@@ -53,8 +53,8 @@ mixin view-dialog
53 +dialog 53 +dialog
54 +slot('header') 54 +slot('header')
55 .l-media__block.l-flex 55 .l-media__block.l-flex
56 +action-button(quiet=true icon='chevron-left') 56 +button(quiet=true icon='chevron-left')
57 +action-button(quiet=true icon='chevron-right') 57 +button(quiet=true icon='chevron-right')
58 .l-media__block.l-media__block--main 58 .l-media__block.l-media__block--main
59 +div-heading('xl')(class="u-mt-0")= 'Tags' 59 +div-heading('xl')(class="u-mt-0")= 'Tags'
60 +slot('sidebar') 60 +slot('sidebar')
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
index 3d01ca7..d6e2b56 100644
--- a/tpl/views/emoji.pug
+++ b/tpl/views/emoji.pug
@@ -1,14 +1,14 @@
1mixin view-emoji 1mixin view-emoji
2 +view('emoji', 'Emoji') 2 +view('emoji', 'Emoji')
3 .c-box 3 .c-box
4 +action-button(icon='trash') 4 +button(icon='trash')
5 = ' ' 5 = ' '
6 +action-button 6 +button
7 +emoji('drgn')(size='icon') 7 +emoji('drgn')(size='icon')
8 = ' ' 8 = ' '
9 +action-button(icon='trash' quiet=true) 9 +button(icon='trash' quiet=true)
10 = ' ' 10 = ' '
11 +action-button(quiet=true) 11 +button(quiet=true)
12 +emoji('drgn')(size='icon') 12 +emoji('drgn')(size='icon')
13 13
14 .c-box 14 .c-box
diff --git a/tpl/views/form.pug b/tpl/views/form.pug
index 5b24757..ca9e224 100644
--- a/tpl/views/form.pug
+++ b/tpl/views/form.pug
@@ -27,4 +27,4 @@ mixin view-form
27 +checkbox= 'I\'ve read and accept the terms and conditions' 27 +checkbox= 'I\'ve read and accept the terms and conditions'
28 28
29 +form-item('') 29 +form-item('')
30 +a-button(variant='primary')= 'Register' 30 +button(variant='primary')= 'Register'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 7c5df03..682f8bb 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -2,7 +2,7 @@ mixin view-menu
2 +view('menu', 'Menu') 2 +view('menu', 'Menu')
3 .c-box 3 .c-box
4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) 4 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
5 +action-button(quiet=true selected=true)= 'Menu' 5 +button(quiet=true selected=true)= 'Menu'
6 +popover 6 +popover
7 +menu 7 +menu
8 +menu-slot(class='l-media') 8 +menu-slot(class='l-media')
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug
index b269596..bd78471 100644
--- a/tpl/views/popover.pug
+++ b/tpl/views/popover.pug
@@ -1,6 +1,6 @@
1mixin view-popover 1mixin view-popover
2 +view('popover', 'Popover') 2 +view('popover', 'Popover')
3 .c-box 3 .c-box
4 +action-button(quiet=true selected=true)= 'Popover' 4 +button(quiet=true selected=true)= 'Popover'
5 +popover 5 +popover
6 = loremIpsum 6 = loremIpsum
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 165e2ce..4309ff6 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -16,8 +16,8 @@ mixin view-text-field
16 div 16 div
17 +text-field(placeholder='Just landed in L.A.' class="u-p-50") 17 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
18 +slot('pre') 18 +slot('pre')
19 +action-button(quiet=true class='l-media__block')= 'Volpeon' 19 +button(quiet=true class='l-media__block')= 'Volpeon'
20 +divider('vertical')(class='u-mis-50') 20 +divider('vertical')(class='u-mis-50')
21 +slot('post') 21 +slot('post')
22 +action-button(quiet=true icon='smile' class='l-media__block') 22 +button(quiet=true icon='smile' class='l-media__block')
23 +action-button(quiet=true icon='send' class='l-media__block') 23 +button(quiet=true icon='send' class='l-media__block')
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-26 23:28:44 +0000