summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-07-23 10:37:06 +0200
committerVolpeon <git@volpeon.ink>2025-07-23 10:37:06 +0200
commit8e009d5036b95015c4425e27c21e9aa0d3a4a952 (patch)
tree258f5adb0ff8b84b9c48e0ba7adb62de0bccb7b5
parentCommit merge of button and badge into action-button (and rename it to button) (diff)
downloadiro-design-8e009d5036b95015c4425e27c21e9aa0d3a4a952.tar.gz
iro-design-8e009d5036b95015c4425e27c21e9aa0d3a4a952.tar.bz2
iro-design-8e009d5036b95015c4425e27c21e9aa0d3a4a952.zip
Button: Rename static variant to badge
Diffstat
-rw-r--r--src/objects/_button.scss34
-rw-r--r--src/objects/_button.vars.scss6
-rw-r--r--tpl/objects/button.pug38
-rw-r--r--tpl/views/button.pug34
-rw-r--r--tpl/views/card.pug6
5 files changed, 51 insertions, 67 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 0467f24..8fbec78 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -36,7 +36,7 @@
36 props.get(vars.$shadow-blur) 36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow) 37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...); 38 props.get($theme, list.join($key, --shadow-color)...);
39 39
40 &:hover, 40 &:hover,
41 &:focus-visible { 41 &:focus-visible {
42 color: props.get($theme, list.join($key, --hover --label-color)...); 42 color: props.get($theme, list.join($key, --hover --label-color)...);
@@ -52,31 +52,31 @@
52 } 52 }
53 } 53 }
54 54
55 @include bem.modifier('static') { 55 @include bem.modifier('badge') {
56 color: props.get($theme, list.join($key, --static --label-color)...); 56 color: props.get($theme, list.join($key, --badge --label-color)...);
57 background-color: props.get($theme, list.join($key, --static --bg-color)...); 57 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
58 border-color: props.get($theme, list.join($key, --static --border-color)...); 58 border-color: props.get($theme, list.join($key, --badge --border-color)...);
59 box-shadow: none; 59 box-shadow: none;
60 60
61 &:link, 61 &:link,
62 &:visited, 62 &:visited,
63 &:enabled { 63 &:enabled {
64 color: props.get($theme, list.join($key, --static --label-color)...); 64 color: props.get($theme, list.join($key, --badge --label-color)...);
65 background-color: props.get($theme, list.join($key, --static --bg-color)...); 65 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
66 border-color: props.get($theme, list.join($key, --static --border-color)...); 66 border-color: props.get($theme, list.join($key, --badge --border-color)...);
67 box-shadow: none; 67 box-shadow: none;
68 68
69 &:hover, 69 &:hover,
70 &:focus-visible { 70 &:focus-visible {
71 color: props.get($theme, list.join($key, --static --hover --label-color)...); 71 color: props.get($theme, list.join($key, --badge --hover --label-color)...);
72 background-color: props.get($theme, list.join($key, --static --hover --bg-color)...); 72 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
73 border-color: props.get($theme, list.join($key, --static --hover --border-color)...); 73 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
74 } 74 }
75 75
76 &:active { 76 &:active {
77 color: props.get($theme, list.join($key, --static --active --label-color)...); 77 color: props.get($theme, list.join($key, --badge --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --static --active --bg-color)...); 78 background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
79 border-color: props.get($theme, list.join($key, --static --active --border-color)...); 79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...);
80 } 80 }
81 } 81 }
82 } 82 }
@@ -114,7 +114,7 @@
114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 114 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...); 115 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
116 116
117 @include bem.modifier('static') { 117 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
118 color: props.get($theme, list.join($key, --selected --label-color)...); 118 color: props.get($theme, list.join($key, --selected --label-color)...);
119 background-color: props.get($theme, list.join($key, --selected --bg-color)...); 119 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
120 border-color: props.get($theme, list.join($key, --selected --border-color)...); 120 border-color: props.get($theme, list.join($key, --selected --border-color)...);
@@ -123,10 +123,6 @@
123 &:link, 123 &:link,
124 &:visited, 124 &:visited,
125 &:enabled { 125 &:enabled {
126 color: props.get($theme, list.join($key, --selected --label-color)...);
127 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
128 border-color: props.get($theme, list.join($key, --selected --border-color)...);
129
130 &:hover, 126 &:hover,
131 &:focus-visible { 127 &:focus-visible {
132 color: props.get($theme, list.join($key, --selected --hover --label-color)...); 128 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 1ab7e5a..94d55b1 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -102,7 +102,7 @@ $default-theme: map.deep-merge((
102 ), 102 ),
103 ), 103 ),
104 104
105 --static: ( 105 --badge: (
106 --bg-color: props.get(core.$theme, --border-mute), 106 --bg-color: props.get(core.$theme, --border-mute),
107 --label-color: props.get(core.$theme, --heading), 107 --label-color: props.get(core.$theme, --heading),
108 --border-color: props.get(core.$theme, --border-mute), 108 --border-color: props.get(core.$theme, --border-mute),
@@ -218,7 +218,7 @@ $default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
218 ), 218 ),
219 ), 219 ),
220 220
221 --static: ( 221 --badge: (
222 --bg-color: props.get(core.$transparent-colors, $theme, --200), 222 --bg-color: props.get(core.$transparent-colors, $theme, --200),
223 --label-color: props.get(core.$transparent-colors, $theme, --900), 223 --label-color: props.get(core.$transparent-colors, $theme, --900),
224 --border-color: transparent, 224 --border-color: transparent,
@@ -319,7 +319,7 @@ $themes-config: (
319 ), 319 ),
320 ), 320 ),
321 321
322 --static: ( 322 --badge: (
323 --bg-color: props.get(core.$theme, $key, --100), 323 --bg-color: props.get(core.$theme, $key, --100),
324 --label-color: props.get(core.$theme, $key, --1100), 324 --label-color: props.get(core.$theme, $key, --1100),
325 --border-color: props.get(core.$theme, $key, --300), 325 --border-color: props.get(core.$theme, $key, --300),
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index b9b4cbd..c356bfe 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -4,13 +4,13 @@ mixin button
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-button': true, 6 'o-button': true,
7 'u-d-block': attributes.block, 7 'u-d-block': attributes.block,
8 'o-button--secondary': attributes.secondary, 8 'o-button--secondary': attributes.secondary,
9 'o-button--quiet': attributes.quiet, 9 'o-button--quiet': attributes.quiet,
10 'o-button--pill': attributes.pill, 10 'o-button--pill': attributes.pill,
11 'o-button--static': attributes.static, 11 'o-button--badge': attributes.badge,
12 'o-button--icon': !!attributes.icon && !block, 12 'o-button--icon': !!attributes.icon && !block,
13 'is-selected': attributes.selected, 13 'is-selected': attributes.selected,
14 } 14 }
15 if (attributes.theme) { 15 if (attributes.theme) {
16 classes['o-button--' + attributes.theme] = true 16 classes['o-button--' + attributes.theme] = true
@@ -24,25 +24,13 @@ mixin button
24 24
25 let href = attributes.disabled ? null : '#'; 25 let href = attributes.disabled ? null : '#';
26 26
27 if attributes.badge 27 a(class=classes href=href)
28 span(class=classes href=href) 28 if attributes.icon
29 if attributes.icon 29 +icon(attributes.icon)
30 +icon(attributes.icon) 30 = ' '
31 = ' ' 31 if block
32 if block 32 span.o-button__label
33 span.o-button__label 33 block
34 block 34 if attributes.postIcon
35 if attributes.postIcon 35 = ' '
36 = ' ' 36 +icon(attributes.postIcon)
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/views/button.pug b/tpl/views/button.pug
index 7e03e04..2e54458 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -78,16 +78,16 @@ mixin view-button
78 +button(selected=true disabled=true)= 'Selected + disabled' 78 +button(selected=true disabled=true)= 'Selected + disabled'
79 br 79 br
80 br 80 br
81 +button(static=true )= 'Idle' 81 +button(badge=true)= 'Idle'
82 = ' ' 82 = ' '
83 +button(static=true selected=true)= 'Selected' 83 +button(badge=true selected=true)= 'Selected'
84 = ' ' 84 = ' '
85 +button(static=true disabled=true)= 'Disabled' 85 +button(badge=true disabled=true)= 'Disabled'
86 = ' ' 86 = ' '
87 +button(static=true selected=true disabled=true)= 'Selected + disabled' 87 +button(badge=true selected=true disabled=true)= 'Selected + disabled'
88 br 88 br
89 br 89 br
90 +button(quiet=true )= 'Idle' 90 +button(quiet=true)= 'Idle'
91 = ' ' 91 = ' '
92 +button(quiet=true selected=true)= 'Selected' 92 +button(quiet=true selected=true)= 'Selected'
93 = ' ' 93 = ' '
@@ -105,13 +105,13 @@ mixin view-button
105 +button(pill=true selected=true disabled=true)= 'Selected + disabled' 105 +button(pill=true selected=true disabled=true)= 'Selected + disabled'
106 br 106 br
107 br 107 br
108 +button(pill=true static=true)= 'Idle' 108 +button(pill=true badge=true)= 'Idle'
109 = ' ' 109 = ' '
110 +button(pill=true static=true selected=true)= 'Selected' 110 +button(pill=true badge=true selected=true)= 'Selected'
111 = ' ' 111 = ' '
112 +button(pill=true static=true disabled=true)= 'Disabled' 112 +button(pill=true badge=true disabled=true)= 'Disabled'
113 = ' ' 113 = ' '
114 +button(pill=true static=true selected=true disabled=true)= 'Selected + disabled' 114 +button(pill=true badge=true selected=true disabled=true)= 'Selected + disabled'
115 br 115 br
116 br 116 br
117 +button(pill=true quiet=true)= 'Idle' 117 +button(pill=true quiet=true)= 'Idle'
@@ -133,13 +133,13 @@ mixin view-button
133 +button(theme=theme selected=true disabled=true)= 'Selected + disabled' 133 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
134 br 134 br
135 br 135 br
136 +button(theme=theme static=true)= 'Idle' 136 +button(theme=theme badge=true)= 'Idle'
137 = ' ' 137 = ' '
138 +button(theme=theme static=true selected=true)= 'Selected' 138 +button(theme=theme badge=true selected=true)= 'Selected'
139 = ' ' 139 = ' '
140 +button(theme=theme static=true disabled=true)= 'Disabled' 140 +button(theme=theme badge=true disabled=true)= 'Disabled'
141 = ' ' 141 = ' '
142 +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' 142 +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled'
143 br 143 br
144 br 144 br
145 +button(theme=theme quiet=true)= 'Idle' 145 +button(theme=theme quiet=true)= 'Idle'
@@ -164,13 +164,13 @@ mixin view-button
164 +button(theme=theme selected=true disabled=true)= 'Selected + disabled' 164 +button(theme=theme selected=true disabled=true)= 'Selected + disabled'
165 br 165 br
166 br 166 br
167 +button(theme=theme static=true)= 'Idle' 167 +button(theme=theme badge=true)= 'Idle'
168 = ' ' 168 = ' '
169 +button(theme=theme static=true selected=true)= 'Selected' 169 +button(theme=theme badge=true selected=true)= 'Selected'
170 = ' ' 170 = ' '
171 +button(theme=theme static=true disabled=true)= 'Disabled' 171 +button(theme=theme badge=true disabled=true)= 'Disabled'
172 = ' ' 172 = ' '
173 +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' 173 +button(theme=theme badge=true selected=true disabled=true)= 'Selected + disabled'
174 br 174 br
175 br 175 br
176 +button(theme=theme quiet=true)= 'Idle' 176 +button(theme=theme quiet=true)= 'Idle'
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index f030abf..e982925 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 +button(theme='positive' static=true pill=true size='sm' icon='repeat' href='#') 86 +button(theme='positive' badge=true pill=true size='sm' icon='repeat' href='#')
87 strong= '12' 87 strong= '12'
88 .l-media__block 88 .l-media__block
89 +button(theme='warning' static=true pill=true size='sm' icon='star' href='#') 89 +button(theme='warning' badge=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 +button(selected=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 +button(badge=true static=true selected=true)= 'Drawings' 96 +button(badge=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
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-26 09:00:33 +0000