@dscout/particle 1.0.0-alpha.2 → 1.0.0-alpha.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.
Files changed (90) hide show
  1. package/lib/components/advanced_options.js +15 -3
  2. package/lib/components/attribute_input.js +15 -3
  3. package/lib/components/attribute_selector.js +14 -3
  4. package/lib/components/button.js +18 -6
  5. package/lib/components/button_control.js +15 -3
  6. package/lib/components/button_icon.js +142 -40
  7. package/lib/components/button_mode.js +18 -6
  8. package/lib/components/button_plain.js +16 -4
  9. package/lib/components/card.js +12 -2
  10. package/lib/components/checkbox_input.js +15 -3
  11. package/lib/components/collapsing_menu.js +15 -3
  12. package/lib/components/common_button.js +65 -5
  13. package/lib/components/common_input.js +15 -3
  14. package/lib/components/container.js +74 -14
  15. package/lib/components/container_header.js +2 -2
  16. package/lib/components/drag_and_drop.js +14 -3
  17. package/lib/components/dropdown_input_toggle.js +15 -4
  18. package/lib/components/editing_container.js +2 -3
  19. package/lib/components/email_input.js +15 -3
  20. package/lib/components/file_input.js +15 -3
  21. package/lib/components/link_text.js +283 -0
  22. package/lib/components/number_input.js +15 -3
  23. package/lib/components/password_input.js +15 -3
  24. package/lib/components/radio_input.js +15 -3
  25. package/lib/components/range_input.js +15 -3
  26. package/lib/components/search_input.js +15 -3
  27. package/lib/components/select_input.js +15 -3
  28. package/lib/components/tags_input.js +16 -3
  29. package/lib/components/text_input.js +15 -3
  30. package/lib/components/textarea.js +15 -3
  31. package/lib/components/togglable_fieldset.js +15 -3
  32. package/lib/components/toggle.js +15 -3
  33. package/lib/index.js +8 -16
  34. package/lib/stylesheets/particle.css +4495 -3192
  35. package/lib/stylesheets/particle.css.map +1 -0
  36. package/lib/stylesheets/particle.min.css +1 -1
  37. package/lib/stylesheets/particle.min.css.gz +0 -0
  38. package/lib/utils/data_attributes.js +18 -0
  39. package/lib/utils/markscout.js +2 -2
  40. package/package.json +29 -27
  41. package/styles/_base.scss +5 -8
  42. package/styles/_reset.scss +5 -0
  43. package/styles/components/_icons.scss +7 -14
  44. package/styles/components/attribute_selector/_base.scss +3 -3
  45. package/styles/components/button_icon/_base.scss +22 -0
  46. package/styles/components/button_icon/themes/_bandit.scss +5 -0
  47. package/styles/components/button_icon/themes/_researcher.scss +5 -0
  48. package/styles/components/button_icon/themes/_theme_builder.scss +12 -0
  49. package/styles/components/buttons/_base.scss +245 -382
  50. package/styles/components/buttons/themes/_bandit.scss +16 -16
  51. package/styles/components/buttons/themes/_theme_builder.scss +49 -73
  52. package/styles/components/card/_base.scss +0 -8
  53. package/styles/components/container/_base.scss +10 -20
  54. package/styles/components/container/themes/_theme_builder.scss +15 -14
  55. package/styles/components/footnote/_base.scss +1 -1
  56. package/styles/components/input_group/_base.scss +4 -4
  57. package/styles/components/link_text/_base.scss +52 -0
  58. package/styles/components/link_text/themes/_bandit.scss +5 -0
  59. package/styles/components/link_text/themes/_researcher.scss +5 -0
  60. package/styles/components/link_text/themes/_theme_builder.scss +11 -0
  61. package/styles/components/menu/_base.scss +2 -3
  62. package/styles/components/pill/_base.scss +13 -0
  63. package/styles/components/segmented_controls/_base.scss +1 -1
  64. package/styles/components/swappable/_base.scss +10 -2
  65. package/styles/particle.scss +2 -2
  66. package/styles/themes/_bandit.scss +40 -5
  67. package/styles/themes/_bandit_colors.scss +9 -0
  68. package/styles/themes/_researcher.scss +8 -5
  69. package/styles/themes/_researcher_colors.scss +91 -0
  70. package/styles/themes/_theme_builder.scss +215 -0
  71. package/styles/utilities/_alignment.scss +14 -137
  72. package/styles/utilities/_borders.scss +0 -44
  73. package/styles/utilities/_colors.scss +76 -605
  74. package/styles/utilities/_dimensions.scss +51 -265
  75. package/styles/utilities/_display.scss +1 -64
  76. package/styles/utilities/_overflow.scss +0 -55
  77. package/styles/utilities/_radii.scss +102 -30
  78. package/styles/utilities/_shadows.scss +0 -59
  79. package/styles/utilities/_spacing.scss +69 -534
  80. package/styles/utilities/_typography.scss +11 -333
  81. package/CHANGELOG.md +0 -1548
  82. package/lib/components/container_inner.js +0 -93
  83. package/lib/components/controls.js +0 -106
  84. package/styles/_mixins.scss +0 -134
  85. package/styles/_tables.scss +0 -138
  86. package/styles/_theme_builder.scss +0 -356
  87. package/styles/_variables.scss +0 -248
  88. package/styles/components/_links.scss +0 -141
  89. package/styles/css_variables/_bandit.scss +0 -45
  90. package/styles/css_variables/_researcher.scss +0 -5
package/styles/components/buttons/_base.scss CHANGED
@@ -3,21 +3,21 @@
3
3
 
4
4
  // === BASICS === //
5
5
 
6
- .btn {
6
+ .Button {
7
7
  @include generate-button-color-variables();
8
8
 
9
9
  appearance: none;
10
- background-color: var(--Button__bg-color);
10
+ background-color: var(--Button____bg-color);
11
11
  border-bottom: none; // Clears the border set by `<a>` elements.
12
- border-radius: var(--Button__radius);
13
- color: var(--Button__color);
12
+ border-radius: var(--Button____radius);
13
+ color: var(--Button____color);
14
14
  cursor: pointer;
15
15
  display: inline-block;
16
- font-weight: var(--Button__font-weight);
17
- line-height: var(--Button__line-height);
18
- padding: var(--Button__padding);
16
+ font-weight: var(--Button____font-weight);
17
+ line-height: var(--Button____line-height);
18
+ padding: var(--Button____padding);
19
19
  text-align: center;
20
- transition-duration: var(--Button__transition-duration);
20
+ transition-duration: var(--Button____transition-duration);
21
21
  transition-property: background, box-shadow, color, fill, opacity, top, filter;
22
22
 
23
23
  &[disabled] {
@@ -27,29 +27,29 @@
27
27
  }
28
28
 
29
29
  &:hover {
30
- background-color: var(--Button__bg-color--hover);
30
+ background-color: var(--Button--hover____bg-color);
31
31
  border-bottom: none; // Clears the border set by `<a>` elements.
32
- color: var(--Button__color--hover);
32
+ color: var(--Button--hover____color);
33
33
  }
34
34
 
35
35
  &:active {
36
- background-color: var(--Button__bg-color--active);
37
- color: var(--Button__color--active);
36
+ background-color: var(--Button--active____bg-color);
37
+ color: var(--Button--active____color);
38
38
  transition-duration: var(--timing--click);
39
39
  }
40
40
 
41
41
  &--glass {
42
- background-color: var(--Button--glass__bg-color);
43
- color: var(--Button--glass__color);
42
+ background-color: var(--Button--glass____bg-color);
43
+ color: var(--Button--glass____color);
44
44
 
45
45
  &:hover {
46
- background-color: var(--Button--glass__bg-color--hover);
47
- color: var(--Button--glass__color--hover);
46
+ background-color: var(--Button--glass--hover____bg-color);
47
+ color: var(--Button--glass--hover____color);
48
48
  }
49
49
 
50
50
  &:active {
51
- background-color: var(--Button--glass__bg-color--active);
52
- color: var(--Button--glass__color--active);
51
+ background-color: var(--Button--glass--active____bg-color);
52
+ color: var(--Button--glass--active____color);
53
53
  }
54
54
 
55
55
  &[disabled] {
@@ -59,19 +59,19 @@
59
59
 
60
60
  &--outline {
61
61
  background: none;
62
- box-shadow: inset 0 0 0 var(--Button--outline__border-width) var(--Button--outline__b-color);
63
- color: var(--Button--outline__color);
62
+ box-shadow: inset 0 0 0 var(--Button--outline____border-width) var(--Button--outline____b-color);
63
+ color: var(--Button--outline____color);
64
64
 
65
65
  &:hover {
66
66
  background: none;
67
- box-shadow: inset 0 0 0 var(--Button--outline__border-width) var(--Button--outline__b-color--hover);
68
- color: var(--Button--outline__color);
67
+ box-shadow: inset 0 0 0 var(--Button--outline____border-width) var(--Button--outline--hover____b-color);
68
+ color: var(--Button--outline____color);
69
69
  }
70
70
 
71
71
  &:active {
72
72
  background: none;
73
- box-shadow: inset 0 0 0 var(--Button--outline__border-width) var(--Button--outline__b-color--active);
74
- color: var(--Button--outline__color);
73
+ box-shadow: inset 0 0 0 var(--Button--outline____border-width) var(--Button--outline--active____b-color);
74
+ color: var(--Button--outline____color);
75
75
  }
76
76
 
77
77
  &[disabled] {
@@ -80,14 +80,14 @@
80
80
  }
81
81
 
82
82
  &--shadow {
83
- box-shadow: var(--Button--shadow__shadow);;
83
+ box-shadow: var(--Button--shadow____shadow);;
84
84
 
85
85
  &:hover {
86
- box-shadow: var(--Button--shadow__shadow-hover);
86
+ box-shadow: var(--Button--shadow--hover____shadow);
87
87
  }
88
88
 
89
89
  &:active {
90
- box-shadow: var(--Button--shadow__shadow-active);
90
+ box-shadow: var(--Button--shadow--active____shadow);
91
91
  transition-duration: var(--timing--click);
92
92
  }
93
93
 
@@ -99,254 +99,242 @@
99
99
 
100
100
  // === COLORS === //
101
101
 
102
- // alert
103
- .btn--color-alert {
104
- @include generate-button-color-variables(
105
- $Button__bg-color: var(--color--alert),
106
- $Button__bg-color--hover: var(--color--alert-dark),
107
- $Button__bg-color--active: var(--color--alert-darkest),
102
+ .Button--color-alert {
103
+ @include generate-button-color-variables((
104
+ "Button____bg-color": var(--color--alert),
105
+ "Button--hover____bg-color": var(--color--alert-dark),
106
+ "Button--active____bg-color": var(--color--alert-darkest),
108
107
 
109
- $Button--glass__bg-color: rgba(var(--color--alert-rgb), .1),
110
- $Button--glass__bg-color--hover: rgba(var(--color--alert-rgb), .2),
111
- $Button--glass__bg-color--active: rgba(var(--color--alert-rgb), .25),
112
- $Button--glass__color: var(--color--alert-dark),
113
- $Button--glass__color--hover: var(--color--alert-darkest),
114
- $Button--glass__color--active: var(--color--alert-darkest),
108
+ "Button--glass____bg-color": rgba(var(--color--alert-rgb), .1),
109
+ "Button--glass--hover____bg-color": rgba(var(--color--alert-rgb), .2),
110
+ "Button--glass--active____bg-color": rgba(var(--color--alert-rgb), .25),
111
+ "Button--glass____color": var(--color--alert-dark),
112
+ "Button--glass--hover____color": var(--color--alert-darkest),
113
+ "Button--glass--active____color": var(--color--alert-darkest),
115
114
 
116
- $Button--outline__b-color: rgba(var(--color--alert-rgb), .5),
117
- $Button--outline__b-color--hover: rgba(var(--color--alert-rgb), .7),
118
- $Button--outline__b-color--active: rgba(var(--color--alert-rgb), .8),
119
- $Button--outline__color: var(--color--alert)
120
- );
115
+ "Button--outline____b-color": rgba(var(--color--alert-rgb), .5),
116
+ "Button--outline--hover____b-color": rgba(var(--color--alert-rgb), .7),
117
+ "Button--outline--active____b-color": rgba(var(--color--alert-rgb), .8),
118
+ "Button--outline____color": var(--color--alert)
119
+ ));
121
120
  }
122
121
 
123
- // close
124
- .btn--color-close {
125
- @include generate-button-color-variables(
126
- $Button__bg-color: var(--color--close),
127
- $Button__bg-color--hover: var(--color--close-dark),
128
- $Button__bg-color--active: var(--color--close-darkest),
129
-
130
- $Button--glass__bg-color: rgba(var(--color--close-rgb), .1),
131
- $Button--glass__bg-color--hover: rgba(var(--color--close-rgb), .2),
132
- $Button--glass__bg-color--active: rgba(var(--color--close-rgb), .25),
133
- $Button--glass__color: var(--color--close),
134
-
135
- $Button--outline__b-color: rgba(var(--color--close-rgb), .4),
136
- $Button--outline__b-color--hover: rgba(var(--color--close-rgb), .7),
137
- $Button--outline__b-color--active: rgba(var(--color--close-rgb), .8),
138
- $Button--outline__color: var(--color--close)
139
- )
122
+ .Button--color-close {
123
+ @include generate-button-color-variables((
124
+ "Button____bg-color": var(--color--close),
125
+ "Button--hover____bg-color": var(--color--close-dark),
126
+ "Button--active____bg-color": var(--color--close-darkest),
127
+
128
+ "Button--glass____bg-color": rgba(var(--color--close-rgb), .1),
129
+ "Button--glass--hover____bg-color": rgba(var(--color--close-rgb), .2),
130
+ "Button--glass--active____bg-color": rgba(var(--color--close-rgb), .25),
131
+ "Button--glass____color": var(--color--close),
132
+
133
+ "Button--outline____b-color": rgba(var(--color--close-rgb), .4),
134
+ "Button--outline--hover____b-color": rgba(var(--color--close-rgb), .7),
135
+ "Button--outline--active____b-color": rgba(var(--color--close-rgb), .8),
136
+ "Button--outline____color": var(--color--close)
137
+ ))
140
138
  }
141
139
 
142
- // coachmark
143
- .btn--color-coachmark {
144
- @include generate-button-color-variables(
145
- $Button__bg-color: var(--color--coachmark),
146
- $Button__bg-color--hover: var(--color--coachmark-dark),
147
- $Button__bg-color--active: var(--color--coachmark-darkest),
148
-
149
- $Button--glass__bg-color: rgba(var(--color--coachmark-rgb), .1),
150
- $Button--glass__bg-color--hover: rgba(var(--color--coachmark-rgb), .2),
151
- $Button--glass__bg-color--active: rgba(var(--color--coachmark-rgb), .25),
152
- $Button--glass__color: var(--color--coachmark-dark),
153
- $Button--glass__color--hover: var(--color--coachmark-darkest),
154
- $Button--glass__color--active: var(--color--coachmark-darkest),
155
-
156
- $Button--outline__b-color: rgba(var(--color--coachmark-rgb), .5),
157
- $Button--outline__b-color--hover: rgba(var(--color--coachmark-rgb), .7),
158
- $Button--outline__b-color--active: rgba(var(--color--coachmark-rgb), .8),
159
- $Button--outline__color: var(--color--coachmark)
160
- )
140
+ .Button--color-coachmark {
141
+ @include generate-button-color-variables((
142
+ "Button____bg-color": var(--color--coachmark),
143
+ "Button--hover____bg-color": var(--color--coachmark-dark),
144
+ "Button--active____bg-color": var(--color--coachmark-darkest),
145
+
146
+ "Button--glass____bg-color": rgba(var(--color--coachmark-rgb), .1),
147
+ "Button--glass--hover____bg-color": rgba(var(--color--coachmark-rgb), .2),
148
+ "Button--glass--active____bg-color": rgba(var(--color--coachmark-rgb), .25),
149
+ "Button--glass____color": var(--color--coachmark-dark),
150
+ "Button--glass--hover____color": var(--color--coachmark-darkest),
151
+ "Button--glass--active____color": var(--color--coachmark-darkest),
152
+
153
+ "Button--outline____b-color": rgba(var(--color--coachmark-rgb), .5),
154
+ "Button--outline--hover____b-color": rgba(var(--color--coachmark-rgb), .7),
155
+ "Button--outline--active____b-color": rgba(var(--color--coachmark-rgb), .8),
156
+ "Button--outline____color": var(--color--coachmark)
157
+ ))
161
158
  }
162
159
 
163
- // dscout
164
- .btn--color-dscout {
165
- @include generate-button-color-variables(
166
- $Button__bg-color: var(--color--dscout),
167
- $Button__bg-color--hover: var(--color--dscout-dark),
168
- $Button__bg-color--active: var(--color--dscout-darkest),
169
-
170
- $Button--glass__bg-color: rgba(var(--color--dscout-rgb), .1),
171
- $Button--glass__bg-color--hover: rgba(var(--color--dscout-rgb), .2),
172
- $Button--glass__bg-color--active: rgba(var(--color--dscout-rgb), .25),
173
- $Button--glass__color: var(--color--dscout-dark),
174
- $Button--glass__color--hover: var(--color--dscout-darkest),
175
- $Button--glass__color--active: var(--color--dscout-darkest),
176
-
177
- $Button--outline__b-color: rgba(var(--color--dscout-rgb), .5),
178
- $Button--outline__b-color--hover: rgba(var(--color--dscout-rgb), .7),
179
- $Button--outline__b-color--active: rgba(var(--color--dscout-rgb), .8),
180
- $Button--outline__color: var(--color--dscout)
181
- )
160
+ .Button--color-dscout {
161
+ @include generate-button-color-variables((
162
+ "Button____bg-color": var(--color--dscout),
163
+ "Button--hover____bg-color": var(--color--dscout-dark),
164
+ "Button--active____bg-color": var(--color--dscout-darkest),
165
+
166
+ "Button--glass____bg-color": rgba(var(--color--dscout-rgb), .1),
167
+ "Button--glass--hover____bg-color": rgba(var(--color--dscout-rgb), .2),
168
+ "Button--glass--active____bg-color": rgba(var(--color--dscout-rgb), .25),
169
+ "Button--glass____color": var(--color--dscout-dark),
170
+ "Button--glass--hover____color": var(--color--dscout-darkest),
171
+ "Button--glass--active____color": var(--color--dscout-darkest),
172
+
173
+ "Button--outline____b-color": rgba(var(--color--dscout-rgb), .5),
174
+ "Button--outline--hover____b-color": rgba(var(--color--dscout-rgb), .7),
175
+ "Button--outline--active____b-color": rgba(var(--color--dscout-rgb), .8),
176
+ "Button--outline____color": var(--color--dscout)
177
+ ))
182
178
  }
183
179
 
184
- // archive
185
- .btn--color-archive {
186
- @include generate-button-color-variables(
187
- $Button__bg-color: var(--color--archive),
188
- $Button__bg-color--hover: var(--color--archive-dark),
189
- $Button__bg-color--active: var(--color--archive-darkest),
190
-
191
- $Button--glass__bg-color: rgba(var(--color--archive-rgb), .1),
192
- $Button--glass__bg-color--hover: rgba(var(--color--archive-rgb), .2),
193
- $Button--glass__bg-color--active: rgba(var(--color--archive-rgb), .25),
194
- $Button--glass__color: var(--color--archive),
195
-
196
- $Button--outline__b-color: rgba(var(--color--archive-rgb), .4),
197
- $Button--outline__b-color--hover: rgba(var(--color--archive-rgb), .7),
198
- $Button--outline__b-color--active: rgba(var(--color--archive-rgb), .8),
199
- $Button--outline__color: var(--color--archive)
200
- )
180
+ .Button--color-archive {
181
+ @include generate-button-color-variables((
182
+ "Button____bg-color": var(--color--archive),
183
+ "Button--hover____bg-color": var(--color--archive-dark),
184
+ "Button--active____bg-color": var(--color--archive-darkest),
185
+
186
+ "Button--glass____bg-color": rgba(var(--color--archive-rgb), .1),
187
+ "Button--glass--hover____bg-color": rgba(var(--color--archive-rgb), .2),
188
+ "Button--glass--active____bg-color": rgba(var(--color--archive-rgb), .25),
189
+ "Button--glass____color": var(--color--archive),
190
+
191
+ "Button--outline____b-color": rgba(var(--color--archive-rgb), .4),
192
+ "Button--outline--hover____b-color": rgba(var(--color--archive-rgb), .7),
193
+ "Button--outline--active____b-color": rgba(var(--color--archive-rgb), .8),
194
+ "Button--outline____color": var(--color--archive)
195
+ ))
201
196
  }
202
197
 
203
- // none
204
- .btn--color-none {
205
- @include generate-button-color-variables(
206
- $Button__bg-color: rgba(var(--color---main-rgb), 0),
207
- $Button__bg-color--hover: rgba(var(--color--main-rgb), .05),
208
- $Button__bg-color--active: rgba(var(--color--main-rgb), .08),
209
- $Button__color: var(--color--gray-1),
210
- $Button__color--hover: rgba(var(--color--main-rgb), .8),
211
- $Button__color--active: var(--color--main),
212
-
213
- $Button--glass__bg-color: rgba(var(--color--main-rgb), .1),
214
- $Button--glass__bg-color--hover: rgba(var(--color--main-rgb), .2),
215
- $Button--glass__bg-color--active: rgba(var(--color--main-rgb), .25),
216
- $Button--glass__color: var(--Button__color),
217
- $Button--glass__color--hover: var(--Button__color--hover),
218
- $Button--glass__color--active: var(--Button__color--active),
219
-
220
- $Button--outline__b-color: rgba(var(--color--main-rgb), .4),
221
- $Button--outline__b-color--hover: rgba(var(--color--main-rgb), .7),
222
- $Button--outline__b-color--active: rgba(var(--color--main-rgb), .8),
223
- $Button--outline__color: var(--color--main)
224
- )
198
+ .Button--color-none {
199
+ @include generate-button-color-variables((
200
+ "Button____bg-color": rgba(var(--color---main-rgb), 0),
201
+ "Button--hover____bg-color": rgba(var(--color--main-rgb), .05),
202
+ "Button--active____bg-color": rgba(var(--color--main-rgb), .08),
203
+ "Button____color": var(--color--gray-1),
204
+ "Button--hover____color": rgba(var(--color--main-rgb), .8),
205
+ "Button--active____color": var(--color--main),
206
+
207
+ "Button--glass____bg-color": rgba(var(--color--main-rgb), .1),
208
+ "Button--glass--hover____bg-color": rgba(var(--color--main-rgb), .2),
209
+ "Button--glass--active____bg-color": rgba(var(--color--main-rgb), .25),
210
+ "Button--glass____color": var(--Button____color),
211
+ "Button--glass--hover____color": var(--Button--hover____color),
212
+ "Button--glass--active____color": var(--Button--active____color),
213
+
214
+ "Button--outline____b-color": rgba(var(--color--main-rgb), .4),
215
+ "Button--outline--hover____b-color": rgba(var(--color--main-rgb), .7),
216
+ "Button--outline--active____b-color": rgba(var(--color--main-rgb), .8),
217
+ "Button--outline____color": var(--color--main)
218
+ ))
225
219
  }
226
220
 
227
- // success
228
- .btn--color-success {
229
- @include generate-button-color-variables(
230
- $Button__bg-color: var(--color--success),
231
- $Button__bg-color--hover: var(--color--success-dark),
232
- $Button__bg-color--active: var(--color--success-darkest),
233
-
234
- $Button--glass__bg-color: rgba(var(--color--success-rgb), .1),
235
- $Button--glass__bg-color--hover: rgba(var(--color--success-rgb), .2),
236
- $Button--glass__bg-color--active: rgba(var(--color--success-rgb), .25),
237
- $Button--glass__color: var(--color--success),
238
-
239
- $Button--outline__b-color: rgba(var(--color--success-rgb), .4),
240
- $Button--outline__b-color--hover: rgba(var(--color--success-rgb), .7),
241
- $Button--outline__b-color--active: rgba(var(--color--success-rgb), .8),
242
- $Button--outline__color: var(--color--success)
243
- )
221
+ .Button--color-success {
222
+ @include generate-button-color-variables((
223
+ "Button____bg-color": var(--color--success),
224
+ "Button--hover____bg-color": var(--color--success-dark),
225
+ "Button--active____bg-color": var(--color--success-darkest),
226
+
227
+ "Button--glass____bg-color": rgba(var(--color--success-rgb), .1),
228
+ "Button--glass--hover____bg-color": rgba(var(--color--success-rgb), .2),
229
+ "Button--glass--active____bg-color": rgba(var(--color--success-rgb), .25),
230
+ "Button--glass____color": var(--color--success),
231
+
232
+ "Button--outline____b-color": rgba(var(--color--success-rgb), .4),
233
+ "Button--outline--hover____b-color": rgba(var(--color--success-rgb), .7),
234
+ "Button--outline--active____b-color": rgba(var(--color--success-rgb), .8),
235
+ "Button--outline____color": var(--color--success)
236
+ ))
244
237
  }
245
238
 
246
- // screener
247
- .btn--color-screener {
248
- @include generate-button-color-variables(
249
- $Button__bg-color: var(--color--screener),
250
- $Button__bg-color--hover: var(--color--screener-dark),
251
- $Button__bg-color--active: var(--color--screener-darkest),
252
-
253
- $Button--glass__bg-color: rgba(var(--color--screener-rgb), .1),
254
- $Button--glass__bg-color--hover: rgba(var(--color--screener-rgb), .2),
255
- $Button--glass__bg-color--active: rgba(var(--color--screener-rgb), .25),
256
- $Button--glass__color: var(--color--screener),
257
-
258
- $Button--outline__b-color: rgba(var(--color--screener-rgb), .4),
259
- $Button--outline__b-color--hover: rgba(var(--color--screener-rgb), .7),
260
- $Button--outline__b-color--active: rgba(var(--color--screener-rgb), .8),
261
- $Button--outline__color: var(--color--screener)
262
- )
239
+ .Button--color-screener {
240
+ @include generate-button-color-variables((
241
+ "Button____bg-color": var(--color--screener),
242
+ "Button--hover____bg-color": var(--color--screener-dark),
243
+ "Button--active____bg-color": var(--color--screener-darkest),
244
+
245
+ "Button--glass____bg-color": rgba(var(--color--screener-rgb), .1),
246
+ "Button--glass--hover____bg-color": rgba(var(--color--screener-rgb), .2),
247
+ "Button--glass--active____bg-color": rgba(var(--color--screener-rgb), .25),
248
+ "Button--glass____color": var(--color--screener),
249
+
250
+ "Button--outline____b-color": rgba(var(--color--screener-rgb), .4),
251
+ "Button--outline--hover____b-color": rgba(var(--color--screener-rgb), .7),
252
+ "Button--outline--active____b-color": rgba(var(--color--screener-rgb), .8),
253
+ "Button--outline____color": var(--color--screener)
254
+ ))
263
255
  }
264
256
 
265
- // diary
266
- .btn--color-diary {
267
- @include generate-button-color-variables(
268
- $Button__bg-color: var(--color--diary),
269
- $Button__bg-color--hover: var(--color--diary-dark),
270
- $Button__bg-color--active: var(--color--diary-darkest),
271
-
272
- $Button--glass__bg-color: rgba(var(--color--diary-rgb), .1),
273
- $Button--glass__bg-color--hover: rgba(var(--color--diary-rgb), .2),
274
- $Button--glass__bg-color--active: rgba(var(--color--diary-rgb), .25),
275
- $Button--glass__color: var(--color--diary),
276
-
277
- $Button--outline__b-color: rgba(var(--color--diary-rgb), .4),
278
- $Button--outline__b-color--hover: rgba(var(--color--diary-rgb), .7),
279
- $Button--outline__b-color--active: rgba(var(--color--diary-rgb), .8),
280
- $Button--outline__color: var(--color--diary)
281
- )
257
+ .Button--color-diary {
258
+ @include generate-button-color-variables((
259
+ "Button____bg-color": var(--color--diary),
260
+ "Button--hover____bg-color": var(--color--diary-dark),
261
+ "Button--active____bg-color": var(--color--diary-darkest),
262
+
263
+ "Button--glass____bg-color": rgba(var(--color--diary-rgb), .1),
264
+ "Button--glass--hover____bg-color": rgba(var(--color--diary-rgb), .2),
265
+ "Button--glass--active____bg-color": rgba(var(--color--diary-rgb), .25),
266
+ "Button--glass____color": var(--color--diary),
267
+
268
+ "Button--outline____b-color": rgba(var(--color--diary-rgb), .4),
269
+ "Button--outline--hover____b-color": rgba(var(--color--diary-rgb), .7),
270
+ "Button--outline--active____b-color": rgba(var(--color--diary-rgb), .8),
271
+ "Button--outline____color": var(--color--diary)
272
+ ))
282
273
  }
283
274
 
284
- // note
285
- .btn--color-note {
286
- @include generate-button-color-variables(
287
- $Button__bg-color: var(--color--note),
288
- $Button__bg-color--hover: var(--color--note-dark),
289
- $Button__bg-color--active: var(--color--note-darkest),
290
- $Button__color: var(--color--archive),
291
-
292
- $Button--glass__bg-color: rgba(var(--color--note-rgb), .25),
293
- $Button--glass__bg-color--hover: rgba(var(--color--note-rgb), .35),
294
- $Button--glass__bg-color--active: rgba(var(--color--note-rgb), .4),
295
- $Button--glass__color: var(--color--archive),
296
-
297
- $Button--outline__b-color: rgba(var(--color--note-rgb), .4),
298
- $Button--outline__b-color--hover: rgba(var(--color--note-rgb), .7),
299
- $Button--outline__b-color--active: rgba(var(--color--note-rgb), .8),
300
- $Button--outline__color: var(--color--archive)
301
- )
275
+ .Button--color-note {
276
+ @include generate-button-color-variables((
277
+ "Button____bg-color": var(--color--note),
278
+ "Button--hover____bg-color": var(--color--note-dark),
279
+ "Button--active____bg-color": var(--color--note-darkest),
280
+ "Button____color": var(--color--archive),
281
+
282
+ "Button--glass____bg-color": rgba(var(--color--note-rgb), .25),
283
+ "Button--glass--hover____bg-color": rgba(var(--color--note-rgb), .35),
284
+ "Button--glass--active____bg-color": rgba(var(--color--note-rgb), .4),
285
+ "Button--glass____color": var(--color--archive),
286
+
287
+ "Button--outline____b-color": rgba(var(--color--note-rgb), .4),
288
+ "Button--outline--hover____b-color": rgba(var(--color--note-rgb), .7),
289
+ "Button--outline--active____b-color": rgba(var(--color--note-rgb), .8),
290
+ "Button--outline____color": var(--color--archive)
291
+ ))
302
292
  }
303
293
 
304
- // test
305
- .btn--color-test {
306
- @include generate-button-color-variables(
307
- $Button__bg-color: var(--color--test),
308
- $Button__bg-color--hover: var(--color--test-dark),
309
- $Button__bg-color--active: var(--color--test-darkest),
310
-
311
- $Button--glass__bg-color: rgba(var(--color--test-rgb), .1),
312
- $Button--glass__bg-color--hover: rgba(var(--color--test-rgb), .2),
313
- $Button--glass__bg-color--active: rgba(var(--color--test-rgb), .25),
314
- $Button--glass__color: var(--color--test),
315
-
316
- $Button--outline__b-color: rgba(var(--color--test-rgb), .4),
317
- $Button--outline__b-color--hover: rgba(var(--color--test-rgb), .7),
318
- $Button--outline__b-color--active: rgba(var(--color--test-rgb), .8),
319
- $Button--outline__color: var(--color--test)
320
- )
294
+ .Button--color-test {
295
+ @include generate-button-color-variables((
296
+ "Button____bg-color": var(--color--test),
297
+ "Button--hover____bg-color": var(--color--test-dark),
298
+ "Button--active____bg-color": var(--color--test-darkest),
299
+
300
+ "Button--glass____bg-color": rgba(var(--color--test-rgb), .1),
301
+ "Button--glass--hover____bg-color": rgba(var(--color--test-rgb), .2),
302
+ "Button--glass--active____bg-color": rgba(var(--color--test-rgb), .25),
303
+ "Button--glass____color": var(--color--test),
304
+
305
+ "Button--outline____b-color": rgba(var(--color--test-rgb), .4),
306
+ "Button--outline--hover____b-color": rgba(var(--color--test-rgb), .7),
307
+ "Button--outline--active____b-color": rgba(var(--color--test-rgb), .8),
308
+ "Button--outline____color": var(--color--test)
309
+ ))
321
310
  }
322
311
 
323
- // invert
324
- .btn--color-invert {
325
- @include generate-button-color-variables(
326
- $Button__bg-color: var(--color--invert),
327
- $Button__bg-color--hover: rgba(var(--color--invert-rgb), .9),
328
- $Button__bg-color--active: rgba(var(--color--invert-rgb), .85),
329
- $Button__color: var(--color--main),
330
-
331
- $Button--glass__bg-color: rgba(var(--color--invert-rgb), .1),
332
- $Button--glass__bg-color--hover: rgba(var(--color--invert-rgb), .2),
333
- $Button--glass__bg-color--active: rgba(var(--color--invert-rgb), .25),
334
- $Button--glass__color: var(--color--invert),
335
-
336
- $Button--outline__b-color: rgba(var(--color--invert-rgb), .4),
337
- $Button--outline__b-color--hover: rgba(var(--color--invert-rgb), .7),
338
- $Button--outline__b-color--active: rgba(var(--color--invert-rgb), .8),
339
- $Button--outline__color: var(--color--invert)
340
- )
312
+ .Button--color-invert {
313
+ @include generate-button-color-variables((
314
+ "Button____bg-color": var(--color--invert),
315
+ "Button--hover____bg-color": rgba(var(--color--invert-rgb), .9),
316
+ "Button--active____bg-color": rgba(var(--color--invert-rgb), .85),
317
+ "Button____color": var(--color--main),
318
+
319
+ "Button--glass____bg-color": rgba(var(--color--invert-rgb), .1),
320
+ "Button--glass--hover____bg-color": rgba(var(--color--invert-rgb), .2),
321
+ "Button--glass--active____bg-color": rgba(var(--color--invert-rgb), .25),
322
+ "Button--glass____color": var(--color--invert),
323
+
324
+ "Button--outline____b-color": rgba(var(--color--invert-rgb), .4),
325
+ "Button--outline--hover____b-color": rgba(var(--color--invert-rgb), .7),
326
+ "Button--outline--active____b-color": rgba(var(--color--invert-rgb), .8),
327
+ "Button--outline____color": var(--color--invert)
328
+ ))
341
329
  }
342
330
 
343
331
  // === PLAIN BUTTONS === //
344
332
 
345
- .btn--plain {
333
+ .Button--plain {
346
334
  background-color: transparent;
347
335
  border: none;
348
336
  cursor: pointer;
349
- transition: opacity var(--Button__transition-duration);
337
+ transition: opacity var(--Button____transition-duration);
350
338
 
351
339
  &:disabled {
352
340
  filter: grayscale(1);
@@ -357,154 +345,29 @@
357
345
 
358
346
  // === SIZES === //
359
347
 
360
- .btn--small {
361
- border-radius: var(--Button--small__radius);
362
- font-size: var(--Button--small__font-size);
363
- padding: var(--Button--small__padding);
348
+ .Button--small {
349
+ border-radius: var(--Button--small____radius);
350
+ font-size: var(--Button--small____font-size);
351
+ padding: var(--Button--small____padding);
364
352
  }
365
353
 
366
- .btn--big {
367
- border-radius: var(--Button--big__radius);
368
- font-size: var(--Button--big__font-size);
369
- padding: var(--Button--big__padding);
354
+ .Button--big {
355
+ border-radius: var(--Button--big____radius);
356
+ font-size: var(--Button--big____font-size);
357
+ padding: var(--Button--big____padding);
370
358
  }
371
359
 
372
360
  // === WIDTHS === //
373
361
 
374
- .btn--tight {
375
- padding: var(--Button--tight__padding);
362
+ .Button--tight {
363
+ padding: var(--Button--tight____padding);
376
364
  }
377
365
 
378
- .btn--wide {
379
- padding: var(--Button--wide__padding);
366
+ .Button--wide {
367
+ padding: var(--Button--wide____padding);
380
368
  }
381
369
 
382
- .btn--fullwidth {
370
+ .Button--fullwidth {
383
371
  display: block;
384
372
  width: 100%;
385
373
  }
386
-
387
- // === ICON BUTTONS === //
388
-
389
- .btn--icon {
390
- background-color: rgba(var(--color--main-rgb), .0);
391
- border: none;
392
- color: var(--color--gray-2);
393
- cursor: pointer;
394
- display: inline-block;
395
- font-size: inherit;
396
- transition-property: background, color, height, width;
397
- transition-duration: var(--timing--hover);
398
-
399
- &.btn--active,
400
- &.btn--selected {
401
- color: var(--color--dscout);
402
-
403
- &[disabled],
404
- &:hover {
405
- color: var(--color--dscout);
406
- }
407
- }
408
-
409
- &.btn--destructive {
410
- &.btn--active,
411
- &.btn--selected,
412
- &:hover {
413
- color: var(--color--alert);
414
- }
415
- }
416
-
417
- &.btn--affirmative {
418
- &.btn--active,
419
- &.btn--selected,
420
- &:hover {
421
- color: var(--color--success);
422
- }
423
- }
424
-
425
- &:hover {
426
- color: var(--color--main);
427
- }
428
-
429
- &[disabled] {
430
- color: var(--color--gray-3);
431
- cursor: default;
432
- pointer-events: none;
433
- }
434
- }
435
-
436
- a.btn--icon {
437
- &:active,
438
- &:hover {
439
- border: none;
440
- }
441
-
442
- &:hover {
443
- color: var(--color--main);
444
- }
445
- }
446
-
447
- // === CONTROL BUTTONS === //
448
-
449
- .control-buttons {
450
- display: flex;
451
- height: 1.5em;
452
- justify-content: flex-end;
453
-
454
- .btn--icon {
455
- @include vertical-align;
456
-
457
- border-radius: var(--radius--circle);
458
- height: 2.063em;
459
- margin-right: .25em;
460
- padding: 0;
461
- width: 2.063em;
462
-
463
- &:hover,
464
- &.btn--selected {
465
- height: 3.563em;
466
- width: 3.563em;
467
- }
468
-
469
- &:hover {
470
- background-color: rgba(var(--color--main-rgb), .05);
471
- }
472
-
473
- &.btn--active:hover,
474
- &.btn--selected {
475
- background-color: rgba(var(--color--dscout-rgb), .1);
476
- }
477
-
478
- &.btn--destructive {
479
- &.btn--active:hover {
480
- background-color: rgba(var(--color--main-rgb), .05);
481
- }
482
-
483
- &.btn--selected,
484
- &.btn--selected:hover {
485
- background-color: rgba(var(--color--alert-rgb), .1);
486
- }
487
- }
488
-
489
- &.btn--affirmative {
490
- &.btn--active:hover {
491
- background-color: rgba(var(--color--main-rgb), .05);
492
- }
493
-
494
- &.btn--selected,
495
- &.btn--selected:hover {
496
- background-color: rgba(var(--color--success-rgb), .1);
497
- }
498
- }
499
-
500
- &:last-child {
501
- margin-right: 0;
502
- }
503
- }
504
-
505
- a.btn--icon {
506
- align-items: center;
507
- display: flex;
508
- justify-content: center;
509
- }
510
- }