@faststore/ui 2.0.128-alpha.0 → 2.0.133-alpha.0

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 (17) hide show
  1. package/package.json +2 -2
  2. package/src/components/atoms/Button/styles.scss +103 -63
  3. package/src/components/molecules/Accordion/styles.scss +3 -1
  4. package/src/components/molecules/Alert/styles.scss +2 -15
  5. package/src/components/molecules/Banner/styles.scss +1 -1
  6. package/src/components/molecules/BuyButton/styles.scss +9 -5
  7. package/src/components/molecules/Carousel/styles.scss +7 -7
  8. package/src/components/molecules/InputField/styles.scss +3 -9
  9. package/src/components/molecules/LinkButton/styles.scss +1 -2
  10. package/src/components/molecules/NavbarLinks/styles.scss +11 -8
  11. package/src/components/molecules/QuantitySelector/styles.scss +20 -75
  12. package/src/components/molecules/RegionBar/styles.scss +12 -9
  13. package/src/components/molecules/SearchInputField/styles.scss +16 -30
  14. package/src/components/organisms/Filter/styles.scss +11 -10
  15. package/src/components/organisms/Footer/styles.scss +15 -13
  16. package/src/components/organisms/Hero/styles.scss +4 -2
  17. package/src/components/organisms/ImageGallery/styles.scss +33 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/ui",
3
- "version": "2.0.128-alpha.0",
3
+ "version": "2.0.133-alpha.0",
4
4
  "description": "A lightweight, framework agnostic component library for React",
5
5
  "author": "emersonlaurentino",
6
6
  "license": "MIT",
@@ -58,5 +58,5 @@
58
58
  "node": "16.18.0",
59
59
  "yarn": "1.19.1"
60
60
  },
61
- "gitHead": "45fb6de9e708a927326715d9de3b46a8030dc3bd"
61
+ "gitHead": "d6ccdde94a4a7210b6e2ebf77a6caf358ecb07b2"
62
62
  }
package/src/components/atoms/Button/styles.scss CHANGED
@@ -100,7 +100,7 @@
100
100
 
101
101
  // Small
102
102
  --fs-button-small-padding : var(--fs-spacing-0) var(--fs-spacing-1);
103
- --fs-button-small-min-height : var(--fs-spacing-5);
103
+ --fs-button-small-min-height : var(--fs-spacing-7);
104
104
  --fs-button-small-gap : var(--fs-spacing-1);
105
105
  --fs-button-small-icon-width : var(--fs-spacing-3);
106
106
  --fs-button-small-icon-height : var(--fs-button-small-icon-width);
@@ -112,31 +112,52 @@
112
112
  // Structural Styles
113
113
  // --------------------------------------------------------
114
114
 
115
- display: inline-flex;
116
- column-gap: var(--fs-button-gap);
117
- align-items: center;
118
- justify-content: center;
115
+ display: flex;
116
+ align-items: stretch;
117
+ width: fit-content;
119
118
  min-height: var(--fs-button-height);
120
- padding: var(--fs-button-padding);
121
- font-size: var(--fs-button-text-size);
122
- font-weight: var(--fs-button-text-weight);
123
- line-height: var(--fs-button-text-size);
124
- text-decoration: none;
119
+ padding: 0;
125
120
  cursor: pointer;
126
- border: var(--fs-button-border-width) solid var(--fs-button-border-color);
127
- border-radius: var(--fs-button-border-radius);
128
- outline: none;
129
- box-shadow: var(--fs-button-shadow);
130
- transition: var(--fs-button-transition-property) var(--fs-button-transition-timing) var(--fs-button-transition-function);
121
+
122
+ [data-fs-button-wrapper] {
123
+ position: relative;
124
+ display: inline-flex;
125
+ column-gap: var(--fs-button-gap);
126
+ align-items: center;
127
+ justify-content: center;
128
+ width: 100%;
129
+ padding: var(--fs-button-padding);
130
+ font-size: var(--fs-button-text-size);
131
+ font-weight: var(--fs-button-text-weight);
132
+ line-height: var(--fs-button-text-size);
133
+ text-decoration: none;
134
+ border: var(--fs-button-border-width) solid var(--fs-button-border-color);
135
+ border-radius: var(--fs-button-border-radius);
136
+ outline: none;
137
+ box-shadow: var(--fs-button-shadow);
138
+ transition: var(--fs-button-transition-property) var(--fs-button-transition-timing) var(--fs-button-transition-function);
139
+ }
140
+
131
141
 
132
142
  // --------------------------------------------------------
133
143
  // Variants Styles
134
144
  // --------------------------------------------------------
135
145
 
136
146
  &[data-fs-button-variant] {
137
- @include focus-ring-visible;
138
147
 
139
- &:disabled, &[data-fs-button-disabled="true"] {
148
+ &:focus, &:focus-visible { box-shadow: none; }
149
+
150
+ @media not all and (min-resolution: .001dpcm) {
151
+ @supports (-webkit-appearance:none) {
152
+ &:focus [data-fs-button-wrapper],
153
+ &:focus:hover [data-fs-button-wrapper] { @include focus-ring; }
154
+ }
155
+ }
156
+
157
+ &:focus-visible [data-fs-button-wrapper],
158
+ &:focus-visible:hover [data-fs-button-wrapper] { @include focus-ring; }
159
+
160
+ &:disabled [data-fs-button-wrapper], &[data-fs-button-disabled="true"] [data-fs-button-wrapper] {
140
161
  color: var(--fs-button-disabled-text-color);
141
162
  cursor: not-allowed;
142
163
  background-color: var(--fs-button-disabled-bkg-color);
@@ -153,58 +174,66 @@
153
174
 
154
175
  &[data-fs-button-size="small"] {
155
176
  --fs-control-tap-size: var(--fs-button-small-min-height);
177
+ padding: var(--fs-spacing-1);
156
178
 
157
- column-gap: var(--fs-button-small-gap);
158
- padding: var(--fs-button-small-padding);
179
+ [data-fs-button-wrapper] {
180
+ column-gap: var(--fs-button-small-gap);
181
+ padding: var(--fs-button-small-padding);
182
+ }
159
183
 
184
+ &:not([data-fs-icon-button="true"]) {
160
185
  [data-fs-icon] {
161
186
  width: var(--fs-button-small-icon-width);
162
187
  height: var(--fs-button-small-icon-height);
163
188
  }
164
-
189
+ }
165
190
  }
166
191
 
167
192
  &[data-fs-button-variant="primary"] {
168
- color: var(--fs-button-primary-text-color);
169
- background-color: var(--fs-button-primary-bkg-color);
170
- border: var(--fs-button-border-width) solid var(--fs-button-primary-border-color);
193
+ [data-fs-button-wrapper] {
194
+ color: var(--fs-button-primary-text-color);
195
+ background-color: var(--fs-button-primary-bkg-color);
196
+ border: var(--fs-button-border-width) solid var(--fs-button-primary-border-color);
197
+ }
171
198
 
172
- &:hover {
199
+ &:hover [data-fs-button-wrapper] {
173
200
  color: var(--fs-button-primary-text-color-hover);
174
201
  background-color: var(--fs-button-primary-bkg-color-hover);
175
202
  border-color: var(--fs-button-primary-border-color-hover);
176
203
  box-shadow: var(--fs-button-primary-shadow-hover);
177
204
  }
178
205
 
179
- &:focus, &:focus-visible {
206
+ &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
180
207
  color: var(--fs-button-primary-text-color-hover);
181
208
  background-color: var(--fs-button-primary-bkg-color-hover);
182
209
  }
183
210
 
184
- &:active {
211
+ &:active [data-fs-button-wrapper] {
185
212
  color: var(--fs-button-primary-text-color-active);
186
213
  background-color: var(--fs-button-primary-bkg-color-active);
187
214
  border-color: var(--fs-button-primary-border-color-active);
188
215
  }
189
216
 
190
217
  &[data-fs-button-inverse="true"] {
191
- color: var(--fs-button-primary-inverse-text-color);
192
- background-color: var(--fs-button-primary-inverse-bkg-color);
193
- border: var(--fs-button-border-width) solid var(--fs-button-primary-inverse-border-color);
218
+ [data-fs-button-wrapper] {
219
+ color: var(--fs-button-primary-inverse-text-color);
220
+ background-color: var(--fs-button-primary-inverse-bkg-color);
221
+ border: var(--fs-button-border-width) solid var(--fs-button-primary-inverse-border-color);
222
+ }
194
223
 
195
- &:hover {
224
+ &:hover [data-fs-button-wrapper] {
196
225
  color: var(--fs-button-primary-inverse-text-color-hover);
197
226
  background-color: var(--fs-button-primary-inverse-bkg-color-hover);
198
227
  border-color: var(--fs-button-primary-inverse-border-color-hover);
199
228
  box-shadow: var(--fs-button-primary-inverse-shadow-hover);
200
229
  }
201
230
 
202
- &:focus, &:focus-visible {
231
+ &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
203
232
  color: var(--fs-button-primary-inverse-text-color-hover);
204
233
  background-color: var(--fs-button-primary-inverse-bkg-color-hover);
205
234
  }
206
235
 
207
- &:active {
236
+ &:active [data-fs-button-wrapper] {
208
237
  color: var(--fs-button-primary-inverse-text-color-active);
209
238
  background-color: var(--fs-button-primary-inverse-bkg-color-active);
210
239
  border-color: var(--fs-button-primary-inverse-border-color-active);
@@ -213,46 +242,52 @@
213
242
  }
214
243
 
215
244
  &[data-fs-button-variant="secondary"] {
216
- color: var(--fs-button-secondary-text-color);
217
- background-color: var(--fs-button-secondary-bkg-color);
218
- border: var(--fs-button-border-width) solid var(--fs-button-secondary-border-color);
219
245
 
220
- &:hover {
246
+ [data-fs-button-wrapper] {
247
+ color: var(--fs-button-secondary-text-color);
248
+ background-color: var(--fs-button-secondary-bkg-color);
249
+ border: var(--fs-button-border-width) solid var(--fs-button-secondary-border-color);
250
+ }
251
+
252
+ &:hover [data-fs-button-wrapper] {
221
253
  color: var(--fs-button-secondary-text-color-hover);
222
254
  background-color: var(--fs-button-secondary-bkg-color-hover);
223
255
  border-color: var(--fs-button-secondary-border-color-hover);
224
256
  box-shadow: var(--fs-button-secondary-shadow-hover);
225
257
  }
226
258
 
227
- &:focus, &:focus-visible {
259
+ &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
228
260
  color: var(--fs-button-secondary-text-color-hover);
229
261
  background-color: var(--fs-button-secondary-bkg-color-hover);
230
262
  }
231
263
 
232
- &:active {
264
+ &:active [data-fs-button-wrapper] {
233
265
  color: var(--fs-button-secondary-text-color-active);
234
266
  background-color: var(--fs-button-secondary-bkg-color-active);
235
267
  border-color: var(--fs-button-secondary-border-color-active);
236
268
  }
237
269
 
238
270
  &[data-fs-button-inverse="true"] {
239
- color: var(--fs-button-secondary-inverse-text-color);
240
- background-color: var(--fs-button-secondary-inverse-bkg-color);
241
- border: var(--fs-button-border-width) solid var(--fs-button-secondary-inverse-border-color);
242
271
 
243
- &:hover {
272
+ [data-fs-button-wrapper] {
273
+ color: var(--fs-button-secondary-inverse-text-color);
274
+ background-color: var(--fs-button-secondary-inverse-bkg-color);
275
+ border: var(--fs-button-border-width) solid var(--fs-button-secondary-inverse-border-color);
276
+ }
277
+
278
+ &:hover [data-fs-button-wrapper] {
244
279
  color: var(--fs-button-secondary-inverse-text-color-hover);
245
280
  background-color: var(--fs-button-secondary-inverse-bkg-color-hover);
246
281
  border-color: var(--fs-button-secondary-inverse-border-color-hover);
247
282
  box-shadow: var(--fs-button-secondary-inverse-shadow-hover);
248
283
  }
249
284
 
250
- &:focus, &:focus-visible {
285
+ &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
251
286
  color: var(--fs-button-secondary-inverse-text-color-hover);
252
287
  background-color: var(--fs-button-secondary-inverse-bkg-color-hover);
253
288
  }
254
289
 
255
- &:active {
290
+ &:active [data-fs-button-wrapper] {
256
291
  color: var(--fs-button-secondary-inverse-text-color-active);
257
292
  background-color: var(--fs-button-secondary-inverse-bkg-color-active);
258
293
  border-color: var(--fs-button-secondary-inverse-border-color-active);
@@ -261,46 +296,52 @@
261
296
  }
262
297
 
263
298
  &[data-fs-button-variant="tertiary"] {
264
- color: var(--fs-button-tertiary-text-color);
265
- background-color: var(--fs-button-tertiary-bkg-color);
266
- border: var(--fs-button-border-width) solid var(--fs-button-tertiary-border-color);
267
299
 
268
- &:hover {
300
+ [data-fs-button-wrapper] {
301
+ color: var(--fs-button-tertiary-text-color);
302
+ background-color: var(--fs-button-tertiary-bkg-color);
303
+ border: var(--fs-button-border-width) solid var(--fs-button-tertiary-border-color);
304
+ }
305
+
306
+ &:hover [data-fs-button-wrapper] {
269
307
  color: var(--fs-button-tertiary-text-color-hover);
270
308
  background-color: var(--fs-button-tertiary-bkg-color-hover);
271
309
  border-color: var(--fs-button-tertiary-border-color-hover);
272
310
  box-shadow: var(--fs-button-tertiary-shadow-hover);
273
311
  }
274
312
 
275
- &:focus, &:focus-visible {
313
+ &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
276
314
  color: var(--fs-button-tertiary-text-color-hover);
277
315
  background-color: var(--fs-button-tertiary-bkg-color-hover);
278
316
  }
279
317
 
280
- &:active {
318
+ &:active [data-fs-button-wrapper] {
281
319
  color: var(--fs-button-tertiary-text-color-active);
282
320
  background-color: var(--fs-button-tertiary-bkg-color-active);
283
321
  border-color: var(--fs-button-tertiary-border-color-active);
284
322
  }
285
323
 
286
324
  &[data-fs-button-inverse="true"] {
287
- color: var(--fs-button-tertiary-inverse-text-color);
288
- background-color: var(--fs-button-tertiary-inverse-bkg-color);
289
- border: var(--fs-button-border-width) solid var(--fs-button-tertiary-inverse-border-color);
290
325
 
291
- &:hover {
326
+ [data-fs-button-wrapper] {
327
+ color: var(--fs-button-tertiary-inverse-text-color);
328
+ background-color: var(--fs-button-tertiary-inverse-bkg-color);
329
+ border: var(--fs-button-border-width) solid var(--fs-button-tertiary-inverse-border-color);
330
+ }
331
+
332
+ &:hover [data-fs-button-wrapper] {
292
333
  color: var(--fs-button-tertiary-inverse-text-color-hover);
293
334
  background-color: var(--fs-button-tertiary-inverse-bkg-color-hover);
294
335
  border-color: var(--fs-button-tertiary-inverse-border-color-hover);
295
336
  box-shadow: var(--fs-button-tertiary-inverse-shadow-hover);
296
337
  }
297
338
 
298
- &:focus, &:focus-visible {
339
+ &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
299
340
  color: var(--fs-button-tertiary-inverse-text-color-hover);
300
341
  background-color: var(--fs-button-tertiary-inverse-bkg-color-hover);
301
342
  }
302
343
 
303
- &:active {
344
+ &:active [data-fs-button-wrapper] {
304
345
  color: var(--fs-button-tertiary-inverse-text-color-active);
305
346
  background-color: var(--fs-button-tertiary-inverse-bkg-color-active);
306
347
  border-color: var(--fs-button-tertiary-inverse-border-color-active);
@@ -309,18 +350,17 @@
309
350
  }
310
351
 
311
352
  &[data-fs-icon-button="true"] {
312
- position: relative;
313
- column-gap: 0;
353
+ width: var(--fs-button-height);
314
354
 
315
- &[data-fs-button-variant] {
316
- width: var(--fs-button-height);
317
- height: var(--fs-button-height);
318
- padding: var(--fs-button-icon-padding);
355
+ [data-fs-button-wrapper] {
356
+ column-gap: 0;
357
+ padding: 0;
319
358
  border-width: 0;
359
+ width: 100%;
320
360
  }
321
361
  }
322
362
 
323
- &[data-fs-button-loading="true"] {
363
+ &[data-fs-button-loading="true"] [data-fs-button-wrapper] {
324
364
  > * {
325
365
  opacity: 0;
326
366
  pointer-events: none;
package/src/components/molecules/Accordion/styles.scss CHANGED
@@ -37,7 +37,9 @@
37
37
  }
38
38
  }
39
39
 
40
- [data-fs-accordion-button] {
40
+ [data-fs-accordion-button] { width: 100%; }
41
+
42
+ [data-fs-accordion-button] [data-fs-button-wrapper] {
41
43
  display: inline-flex;
42
44
  align-items: center;
43
45
  justify-content: space-between;
package/src/components/molecules/Alert/styles.scss CHANGED
@@ -76,22 +76,9 @@
76
76
  }
77
77
 
78
78
  [data-fs-alert-button] {
79
- min-width: var(--fs-control-tap-size);
80
- height: 100%;
81
- padding: var(--fs-spacing-0);
82
79
  margin-left: auto;
83
- color: var(--fs-alert-button-text-color);
84
- background-color: var(--fs-alert-button-bkg-color);
85
-
86
- > span {
87
- display: flex;
88
- align-items: center;
89
- justify-content: center;
90
- width: 100%;
91
- height: 100%;
92
- background-color: var(--fs-alert-button-bkg-color);
93
- border-radius: var(--fs-alert-button-border-radius);
94
- }
80
+
81
+ [data-fs-button-wrapper] { color: var(--fs-alert-button-text-color); }
95
82
 
96
83
  &:hover span {
97
84
  filter: brightness(0.95);
package/src/components/molecules/Banner/styles.scss CHANGED
@@ -59,7 +59,7 @@
59
59
 
60
60
  [data-fs-banner-text-link] [data-fs-link-button] {
61
61
  min-width: var(--fs-banner-button-link-min-width);
62
- margin-top: var(--fs-banner-button-link-margin-top);
62
+ margin: var(--fs-banner-button-link-margin-top) auto 0;
63
63
  }
64
64
 
65
65
  // --------------------------------------------------------
package/src/components/molecules/BuyButton/styles.scss CHANGED
@@ -25,22 +25,26 @@
25
25
  @include focus-ring-visible;
26
26
 
27
27
  color: var(--fs-buy-button-text-color);
28
- background-color: var(--fs-buy-button-bkg-color);
29
- border: var(--fs-button-border-width) solid var(--fs-buy-button-border-color);
30
28
 
31
- &:hover {
29
+ [data-fs-button-wrapper] {
30
+ background-color: var(--fs-buy-button-bkg-color);
31
+ border: var(--fs-button-border-width) solid var(--fs-buy-button-border-color);
32
+ }
33
+
34
+
35
+ &:hover [data-fs-button-wrapper] {
32
36
  color: var(--fs-buy-button-text-color-hover);
33
37
  background-color: var(--fs-buy-button-bkg-color-hover);
34
38
  border-color: var(--fs-buy-button-border-color-hover);
35
39
  box-shadow: var(--fs-buy-button-shadow-hover);
36
40
  }
37
41
 
38
- &:focus, &:focus-visible {
42
+ &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
39
43
  color: var(--fs-buy-button-text-color-hover);
40
44
  background-color: var(--fs-buy-button-bkg-color-hover);
41
45
  }
42
46
 
43
- &:active {
47
+ &:active [data-fs-button-wrapper] {
44
48
  color: var(--fs-buy-button-text-color-hover);
45
49
  background-color: var(--fs-buy-button-bkg-color-active);
46
50
  border-color: var(--fs-buy-button-border-color-active);
package/src/components/molecules/Carousel/styles.scss CHANGED
@@ -147,23 +147,23 @@
147
147
  }
148
148
 
149
149
  [data-fs-carousel-bullet] {
150
- padding: 0;
151
- border-color: transparent;
152
150
  width: var(--fs-carousel-bullet-width-mobile);
153
- &::after {
154
- width: 100%;
151
+ align-items: center;
152
+ justify-content: center;
153
+ [data-fs-button-wrapper] {
154
+ padding: 0;
155
155
  height: var(--fs-carousel-bullet-height-mobile);
156
156
  background-color: var(--fs-carousel-bullet-bkg-color);
157
- content: "";
157
+ border-color: transparent;
158
+ border-radius: 0;
158
159
  @include media(">=tablet") {
159
160
  width: var(--fs-carousel-bullet-width-desktop);
160
161
  height: var(--fs-carousel-bullet-height-desktop);
161
162
  margin: 0;
162
163
  border-radius: var(--fs-carousel-bullet-border-radius);
163
- content: "";
164
164
  }
165
165
  }
166
- &[aria-selected="true"]::after {
166
+ &[aria-selected="true"] [data-fs-button-wrapper] {
167
167
  background-color: var(--fs-carousel-bullet-bkg-color-selected);
168
168
  }
169
169
  }
package/src/components/molecules/InputField/styles.scss CHANGED
@@ -117,10 +117,10 @@
117
117
 
118
118
  [data-fs-button] {
119
119
  position: absolute;
120
- top: var(--fs-spacing-1);
121
- right: var(--fs-spacing-1);
120
+ top: 0;
121
+ right: 0;
122
122
 
123
- &::before {
123
+ [data-fs-button-wrapper]::before {
124
124
  position: absolute;
125
125
  left: calc(-1 * var(--fs-spacing-1));
126
126
  width: 1px;
@@ -129,11 +129,5 @@
129
129
  background-color: var(--fs-input-field-border-color);
130
130
  }
131
131
  }
132
-
133
- [data-fs-button][data-fs-icon-button] {
134
- &::before {
135
- left: calc(-1 * var(--fs-spacing-1));
136
- }
137
- }
138
132
  }
139
133
  }
package/src/components/molecules/LinkButton/styles.scss CHANGED
@@ -2,8 +2,7 @@
2
2
  // --------------------------------------------------------
3
3
  // Structural Styles
4
4
  // --------------------------------------------------------
5
+ text-decoration: none;
5
6
 
6
- &:hover { text-decoration: none; }
7
-
8
7
  &:disabled, &[data-fs-button-disabled="true"] { pointer-events: none; }
9
8
  }
package/src/components/molecules/NavbarLinks/styles.scss CHANGED
@@ -3,9 +3,6 @@
3
3
  // Design Tokens for Navbar Links
4
4
  // --------------------------------------------------------
5
5
 
6
- --fs-navbar-links-padding-top-notebook : var(--fs-spacing-1);
7
- --fs-navbar-links-padding-bottom-notebook : var(--fs-navbar-links-padding-top-notebook);
8
-
9
6
  --fs-navbar-links-bkg-color : var(--fs-color-body-bkg);
10
7
 
11
8
  --fs-navbar-links-transition-property : var(--fs-transition-property);
@@ -57,7 +54,7 @@
57
54
  margin-left: calc(-1 * var(--fs-spacing-1));
58
55
 
59
56
  // TODO: remove this after navbar 2.0 is implemented
60
- &[data-fs-button-variant="tertiary"] {
57
+ &[data-fs-button-variant="tertiary"] [data-fs-button-wrapper] {
61
58
  color: var(--fs-color-text-display);
62
59
  }
63
60
 
@@ -67,15 +64,21 @@
67
64
  }
68
65
 
69
66
  @include media(">=notebook") {
70
- padding-top: var(--fs-navbar-links-padding-top-notebook);
71
- padding-bottom: var(--fs-navbar-links-padding-bottom-notebook);
72
-
73
67
  [data-fs-navbar-links-list] {
68
+ position: relative;
74
69
  display: flex;
70
+ align-items: center;
75
71
  column-gap: var(--fs-spacing-3);
76
72
  padding-left: var(--fs-navbar-links-list-padding-left-notebook);
77
73
  margin-left: var(--fs-navbar-links-list-margin-left-notebook);
78
- border-left: var(--fs-navbar-links-list-border-left-width-notebook) solid var(--fs-navbar-links-list-border-left-color-notebook);
74
+ &::before {
75
+ position: absolute;
76
+ left: calc(-1 * var(--fs-spacing-1));
77
+ width: var(--fs-navbar-links-list-border-left-width-notebook);
78
+ height: 60%;
79
+ content: "";
80
+ background-color: var(--fs-navbar-links-list-border-left-color-notebook);
81
+ }
79
82
  }
80
83
 
81
84
  [data-fs-navbar-links-list-item] > [data-fs-link] {
package/src/components/molecules/QuantitySelector/styles.scss CHANGED
@@ -19,28 +19,17 @@
19
19
  --fs-qty-selector-border-color : var(--fs-border-color);
20
20
  --fs-qty-selector-border-color-hover : var(--fs-border-color-active);
21
21
 
22
- // Text
23
22
  --fs-qty-selector-text-size : var(--fs-text-size-base);
24
23
  --fs-qty-selector-text-color : var(--fs-color-text);
25
- --fs-qty-selector-text-color-hover : var(--fs-qty-selector-text-color);
26
-
27
- // Icon
28
- --fs-qty-selector-icon-color : var(--fs-color-link);
29
24
 
30
25
  // Button
31
- --fs-qty-selector-button-shadow : none;
32
- --fs-qty-selector-button-shadow-hover : none;
33
26
  --fs-qty-selector-button-bkg-color : transparent;
34
- --fs-qty-selector-button-bkg-color-hover : var(--fs-color-primary-bkg-light);
35
- --fs-qty-selector-button-bkg-color-focus : var(--fs-qty-selector-button-bkg-color-hover);
36
27
  --fs-qty-selector-button-border-radius : var(--fs-qty-selector-border-radius);
37
28
 
38
29
  // Disabled
39
30
  --fs-qty-selector-disabled-bkg-color : var(--fs-color-disabled-bkg);
40
31
  --fs-qty-selector-disabled-text-color : var(--fs-color-disabled-text);
41
- --fs-qty-selector-disabled-icon-color : var(--fs-border-color-light-disabled);
42
32
  --fs-qty-selector-disabled-border-color : var(--fs-qty-selector-disabled-bkg-color);
43
- --fs-qty-selector-disabled-button-bkg-color : var(--fs-qty-selector-button-bkg-color-hover);
44
33
 
45
34
  // --------------------------------------------------------
46
35
  // Structural Styles
@@ -56,12 +45,6 @@
56
45
  border-radius: var(--fs-qty-selector-border-radius);
57
46
  box-shadow: var(--fs-qty-selector-shadow);
58
47
 
59
- [data-fs-icon] {
60
- margin: 0;
61
- line-height: 0;
62
- color: var(--fs-qty-selector-icon-color);
63
- }
64
-
65
48
  [data-quantity-selector-input] {
66
49
  width: 100%;
67
50
  height: 100%;
@@ -69,74 +52,34 @@
69
52
  font-size: var(--fs-qty-selector-text-size);
70
53
  color: var(--fs-qty-selector-text-color);
71
54
  text-align: center;
55
+ border: var(--fs-qty-selector-border-width) solid var(--fs-qty-selector-border-color);
72
56
  }
73
57
 
74
58
  [data-quantity-selector-button] {
75
59
  position: absolute;
76
- background-color: var(--fs-qty-selector-button-bkg-color);
77
-
78
- [data-fs-button-icon] {
79
- display: flex;
80
- align-items: center;
81
- justify-content: center;
82
- width: 100%;
83
- height: 100%;
84
- border-radius: var(--fs-qty-selector-button-border-radius);
85
- box-shadow: var(--fs-qty-selector-button-shadow);
86
- }
87
60
 
88
- &[data-fs-icon-button] {
89
- padding: var(--fs-spacing-1);
61
+ [data-fs-button-wrapper] { border-radius: var(--fs-qty-selector-button-border-radius); }
62
+
63
+ &:not(:hover):not(:focus-visible) {
64
+ [data-fs-button-wrapper] {
65
+ background-color: var(--fs-qty-selector-button-bkg-color);
66
+ }
90
67
  }
91
68
 
92
69
  &:first-of-type { left: 0; }
93
-
94
70
  &:last-of-type { right: 0; }
95
71
 
96
- &:hover:not(:disabled) [data-fs-button-icon] {
97
- background-color: var(--fs-qty-selector-button-bkg-color-hover);
98
- box-shadow: var(--fs-qty-selector-button-shadow-hover);
99
- }
100
-
101
72
  &:disabled {
102
- cursor: not-allowed;
103
- background-color: var(--fs-qty-selector-button-bkg-color);
104
-
105
- &:hover, &:focus-visible {
73
+ [data-fs-button-wrapper],
74
+ &:hover [data-fs-button-wrapper],
75
+ &:focus-visible [data-fs-button-wrapper] {
106
76
  background-color: var(--fs-qty-selector-button-bkg-color);
107
77
  }
108
-
109
- [data-fs-button-icon] {
110
- color: var(--fs-qty-selector-disabled-icon-color);
111
- }
112
- }
113
-
114
- &:hover:not(:disabled) {
115
- background-color: transparent;
116
- box-shadow: none;
117
- }
118
-
119
- &:focus:not(:disabled) {
120
- background-color: transparent;
121
- box-shadow: none;
122
- }
123
-
124
- &:focus-visible {
125
- background-color: var(--fs-qty-selector-button-bkg-color);
126
- outline: none;
127
- box-shadow: none;
128
-
129
- [data-fs-button-icon] {
130
- @include focus-ring;
131
-
132
- background-color: var(--fs-qty-selector-button-bkg-color-focus);
133
- }
134
78
  }
135
79
  }
136
80
 
137
81
  &:hover {
138
82
  [data-quantity-selector-input]:not(:disabled):not(:focus) {
139
- color: var(--fs-qty-selector-text-color-hover);
140
83
  background-color: var(--fs-qty-selector-bkg-color-hover);
141
84
  border-color: var(--fs-qty-selector-border-color-hover);
142
85
  border-width: var(--fs-qty-selector-border-width-hover);
@@ -144,14 +87,16 @@
144
87
  }
145
88
  }
146
89
 
147
- // --------------------------------------------------------
148
- // Variants Styles
149
- // --------------------------------------------------------
90
+ }
150
91
 
151
- &[data-fs-quantity-selector="disabled"] {
152
- [data-quantity-selector-input] {
153
- border-color: var(--fs-qty-selector-disabled-border-color);
154
- }
155
- [data-quantity-selector-button]:hover [data-fs-button-icon] { background-color: transparent; }
92
+ // --------------------------------------------------------
93
+ // Variants Styles
94
+ // --------------------------------------------------------
95
+
96
+ [data-fs-quantity-selector="disabled"] {
97
+ [data-quantity-selector-input] {
98
+ background-color: var(--fs-qty-selector-disabled-bkg-color);
99
+ border-color: var(--fs-qty-selector-disabled-border-color);
100
+ color: var(--fs-qty-selector-disabled-text-color);
156
101
  }
157
102
  }
package/src/components/molecules/RegionBar/styles.scss CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  // Default properties
7
7
  --fs-region-bar-width : 100%;
8
- --fs-region-bar-padding : var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-3);
8
+ --fs-region-bar-padding : var(--fs-spacing-0) var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);
9
9
 
10
10
  --fs-region-bar-text-color : var(--fs-color-text-display);
11
11
 
@@ -32,14 +32,17 @@
32
32
 
33
33
  [data-fs-button] {
34
34
  width: var(--fs-region-bar-width);
35
- padding: var(--fs-region-bar-padding);
36
- color: var(--fs-region-bar-text-color);
37
- background-color: var(--fs-region-bar-bkg-color);
38
- border-bottom: var(--fs-region-bar-border-bottom-width) solid var(--fs-region-bar-border-bottom-color);
39
- border-radius: 0;
40
-
41
- > span {
42
- display: contents;
35
+
36
+ [data-fs-button-wrapper]{
37
+ padding: var(--fs-region-bar-padding);
38
+ color: var(--fs-region-bar-text-color);
39
+ background-color: var(--fs-region-bar-bkg-color);
40
+ border-bottom: var(--fs-region-bar-border-bottom-width) solid var(--fs-region-bar-border-bottom-color);
41
+ border-radius: 0;
42
+
43
+ > span {
44
+ display: contents;
45
+ }
43
46
  }
44
47
  }
45
48
 
package/src/components/molecules/SearchInputField/styles.scss CHANGED
@@ -3,29 +3,20 @@
3
3
  // Design Tokens for Search Input Field
4
4
  // --------------------------------------------------------
5
5
  // Default properties
6
- --fs-search-input-height-desktop : var(--fs-spacing-6);
6
+ --fs-search-input-field-height-mobile : var(--fs-control-tap-size);
7
+ --fs-search-input-field-height-desktop : var(--fs-spacing-6);
7
8
 
8
- --fs-search-input-field-height-mobile : var(--fs-control-tap-size);
9
- --fs-search-input-field-height-desktop : var(--fs-spacing-6);
10
-
11
- --fs-search-input-field-transition-timing : var(--fs-transition-timing);
12
- --fs-search-input-field-transition-function : ease;
9
+ --fs-search-input-field-transition-timing : var(--fs-transition-timing);
10
+ --fs-search-input-field-transition-function : ease;
13
11
 
14
12
  // Button
15
- --fs-search-input-field-button-width : var(--fs-spacing-7);
16
- --fs-search-input-field-button-min-height : var(--fs-search-input-height-desktop);
17
- --fs-search-input-field-button-bkg-color : transparent;
18
-
19
- --fs-search-input-field-button-height-mobile : var(--fs-search-input-field-button-width);
20
- --fs-search-input-field-button-height-desktop : var(--fs-search-input-field-height-desktop);
13
+ --fs-search-input-field-button-min-height : var(--fs-search-input-field-height-desktop);
14
+ --fs-search-input-field-button-padding-top-desktop : var(--fs-spacing-0);
15
+ --fs-search-input-field-button-padding-bottom-desktop : var(--fs-search-input-field-button-padding-top-desktop);
21
16
 
22
17
  // Input
23
- --fs-search-input-field-input-padding-right : var(--fs-search-input-field-button-width);
24
- --fs-search-input-field-input-bkg-color : var(--fs-color-body-bkg);
25
-
26
- // Icon
27
- --fs-search-input-field-icon-width : var(--fs-spacing-4);
28
- --fs-search-input-field-icon-height : var(--fs-search-input-field-icon-width);
18
+ --fs-search-input-field-input-padding-right : var(--fs-spacing-7);
19
+ --fs-search-input-field-input-bkg-color : var(--fs-color-body-bkg);
29
20
 
30
21
  // --------------------------------------------------------
31
22
  // Structural Styles
@@ -41,20 +32,14 @@
41
32
  @include media(">=notebook") { height: var(--fs-search-input-field-height-desktop); }
42
33
 
43
34
  [data-fs-icon-button][data-fs-button-variant] {
44
- position: absolute;
45
- right: var(--fs-spacing-0);
46
- width: var(--fs-search-input-field-button-width);
47
- height: var(--fs-search-input-field-button-height-mobile);
48
- padding: 0;
49
- background-color: var(--fs-search-input-field-button-bkg-color);
50
- border: 0;
35
+ position: relative;
36
+ right: .125rem;
51
37
  @include media(">=notebook") {
52
- height: var(--fs-search-input-field-button-height-desktop);
38
+ position: absolute;
39
+ padding-top: var(--fs-search-input-field-button-padding-top-desktop);
40
+ padding-bottom: var(--fs-search-input-field-button-padding-bottom-desktop);
53
41
  min-height: var(--fs-search-input-field-button-min-height);
54
- }
55
- svg {
56
- width: var(--fs-search-input-field-icon-width);
57
- height: var(--fs-search-input-field-icon-height);
42
+ right: 0;
58
43
  }
59
44
  }
60
45
 
@@ -63,6 +48,7 @@
63
48
  padding-right: var(--fs-search-input-field-input-padding-right);
64
49
  background-color: var(--fs-search-input-field-input-bkg-color);
65
50
  transition: box-shadow var(--fs-search-input-field-transition-timing) var(--fs-search-input-field-transition-timing), border var(--fs-search-input-field-transition-timing) var(--fs-search-input-field-transition-function);
51
+ @include media("<notebook") { border: 0; }
66
52
  }
67
53
 
68
54
  }
package/src/components/organisms/Filter/styles.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  --fs-filter-accordion-button-padding-right-notebook : var(--fs-spacing-4);
22
22
  --fs-filter-accordion-button-padding-left-notebook : var(--fs-filter-accordion-button-padding-right-notebook);
23
23
 
24
- --fs-filter-accordion-button-text-size-notebook : var(--fs-text-size-2);
24
+ --fs-filter-accordion-button-text-size-notebook : var(--fs-text-size-2);
25
25
  --fs-filter-accordion-button-line-height-notebook : 1.25;
26
26
 
27
27
  // Accordion Item Panel
@@ -69,15 +69,16 @@
69
69
 
70
70
  [data-fs-filter-accordion-item] {
71
71
  [data-fs-accordion-button] {
72
- font-size: var(--fs-filter-accordion-button-text-size);
73
- font-weight: var(--fs-filter-accordion-button-text-weight);
74
- line-height: var(--fs-filter-accordion-button-line-height);
75
-
76
- @include media(">=notebook") {
77
- padding-right: var(--fs-filter-accordion-button-padding-right-notebook);
78
- padding-left: var(--fs-filter-accordion-button-padding-left-notebook);
79
- font-size: var(--fs-filter-accordion-button-text-size-notebook);
80
- line-height: var(--fs-filter-accordion-button-line-height-notebook);
72
+ [data-fs-button-wrapper] {
73
+ font-size: var(--fs-filter-accordion-button-text-size);
74
+ font-weight: var(--fs-filter-accordion-button-text-weight);
75
+ line-height: var(--fs-filter-accordion-button-line-height);
76
+ @include media(">=notebook") {
77
+ padding-right: var(--fs-filter-accordion-button-padding-right-notebook);
78
+ padding-left: var(--fs-filter-accordion-button-padding-left-notebook);
79
+ font-size: var(--fs-filter-accordion-button-text-size-notebook);
80
+ line-height: var(--fs-filter-accordion-button-line-height-notebook);
81
+ }
81
82
  }
82
83
  }
83
84
 
package/src/components/organisms/Footer/styles.scss CHANGED
@@ -32,11 +32,16 @@
32
32
  padding-top: 0;
33
33
  }
34
34
 
35
- [data-fs-logo] {
36
- background-position-y: var(--fs-spacing-0);
35
+ [data-fs-footer-logo] {
36
+ margin: var(--fs-spacing-3) 0;
37
+ display: block;
38
+ width: 7rem;
39
+ height: 100%;
40
+ min-height: var(--fs-spacing-6);
37
41
  }
38
42
 
39
- [data-fs-footer-title] {
43
+ [data-fs-footer-links-title],
44
+ [data-fs-footer-social-title] {
40
45
  margin-bottom: var(--fs-footer-title-margin-bottom);
41
46
  font-size: var(--fs-footer-title-size);
42
47
  font-weight: var(--fs-footer-title-weight);
@@ -47,8 +52,8 @@
47
52
  }
48
53
  }
49
54
 
50
- [data-fs-footer-note],
51
- [data-fs-footer-nav] {
55
+ [data-fs-footer-info],
56
+ [data-fs-footer-navigation] {
52
57
  position: relative;
53
58
  display: flex;
54
59
 
@@ -73,14 +78,14 @@
73
78
  }
74
79
  }
75
80
 
76
- [data-fs-footer-nav] {
81
+ [data-fs-footer-navigation] {
77
82
  @include media(">=notebook") {
78
83
  row-gap: var(--fs-footer-spacing-vertical-notebook);
79
84
  padding-bottom: var(--fs-footer-spacing-vertical-notebook);
80
85
  }
81
86
  }
82
87
 
83
- [data-fs-footer-note] {
88
+ [data-fs-footer-info] {
84
89
  position: relative;
85
90
 
86
91
  @include media("<notebook") {
@@ -152,12 +157,9 @@
152
157
  }
153
158
 
154
159
  [data-fs-footer-copyright] {
155
- p + p {
160
+ p {
156
161
  margin: var(--fs-spacing-2) auto;
157
- }
158
-
159
- address {
160
- font-style: normal;
162
+ white-space: break-spaces;
161
163
  }
162
164
 
163
165
  @include media(">=notebook") {
@@ -197,7 +199,7 @@
197
199
  }
198
200
 
199
201
  &:not([data-fs-footer-social="true"]) {
200
- [data-fs-footer-note]::before {
202
+ [data-fs-footer-info]::before {
201
203
  @include media("<notebook") {
202
204
  border-color: transparent;
203
205
  }
package/src/components/organisms/Hero/styles.scss CHANGED
@@ -107,9 +107,11 @@
107
107
  }
108
108
 
109
109
  [data-fs-button] {
110
- justify-content: space-between;
111
- min-width: 11.25rem;
112
110
  margin-top: var(--fs-spacing-6);
111
+ [data-fs-button-wrapper] {
112
+ min-width: 11.25rem;
113
+ justify-content: space-between;
114
+ }
113
115
  }
114
116
 
115
117
  [data-fs-hero-icon] {
package/src/components/organisms/ImageGallery/styles.scss CHANGED
@@ -26,7 +26,8 @@
26
26
  // Image Gallery Selector Elements
27
27
  --fs-image-gallery-selector-elements-gap : var(--fs-spacing-1);
28
28
  --fs-image-gallery-selector-elements-gap-notebook : var(--fs-spacing-2);
29
- --fs-image-gallery-selector-elements-padding : var(--fs-spacing-0) var(--fs-spacing-2);
29
+ --fs-image-gallery-selector-elements-padding-mobile : var(--fs-spacing-0) var(--fs-grid-padding);
30
+ --fs-image-gallery-selector-elements-padding-notebook : var(--fs-spacing-0) 0;
30
31
 
31
32
  // Image Gallery Selector Thumbnail
32
33
  --fs-image-gallery-selector-thumbnail-width-mobile : var(--fs-spacing-8);
@@ -89,7 +90,7 @@
89
90
  [data-fs-image-gallery-selector-elements] {
90
91
  display: flex;
91
92
  column-gap: var(--fs-image-gallery-selector-elements-gap);
92
- padding: var(--fs-image-gallery-selector-elements-padding);
93
+ padding: var(--fs-image-gallery-selector-elements-padding-mobile);
93
94
  overflow-x: auto;
94
95
  scroll-behavior: smooth;
95
96
 
@@ -99,32 +100,37 @@
99
100
  flex-direction: column;
100
101
  row-gap: var(--fs-image-gallery-selector-elements-gap-notebook);
101
102
  overflow-y: hidden;
103
+ align-items: center;
104
+ width: 100%;
105
+ padding: var(--fs-image-gallery-selector-elements-padding-notebook);
102
106
  }
103
107
  }
104
108
 
105
109
  [data-fs-image-gallery-selector-thumbnail] {
106
- flex-shrink: 0;
107
110
  width: var(--fs-image-gallery-selector-thumbnail-width-mobile);
108
111
  height: var(--fs-image-gallery-selector-thumbnail-height-mobile);
109
- padding: 0;
110
- overflow: hidden;
111
- background-color: transparent;
112
- border: var(--fs-image-gallery-selector-thumbnail-border-width) solid transparent;
113
- border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
114
- transition: all var(--fs-image-gallery-transition-timing) var(--fs-image-gallery-transition-function);
115
-
116
- &:hover:not([data-fs-image-gallery-selector-thumbnail="selected"]) {
117
- border-color: var(--fs-image-gallery-selector-thumbnail-selected-border-color);
112
+
113
+ [data-fs-button-wrapper] {
114
+ padding: 0;
115
+ overflow: hidden;
116
+ background-color: transparent;
117
+ border: var(--fs-image-gallery-selector-thumbnail-border-width) solid transparent;
118
+ border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
119
+ transition: all var(--fs-image-gallery-transition-timing) var(--fs-image-gallery-transition-function);
120
+ > span {
121
+ width: 100%;
122
+ height: 100%;
123
+ }
118
124
  }
119
125
 
120
- &[data-fs-image-gallery-selector-thumbnail="selected"] {
126
+
127
+ &:hover:not([data-fs-image-gallery-selector-thumbnail="selected"]) [data-fs-button-wrapper] {
121
128
  border-color: var(--fs-image-gallery-selector-thumbnail-selected-border-color);
122
- box-shadow: 0 0 0 var(--fs-image-gallery-selector-thumbnail-selected-border-width) var(--fs-color-focus-ring-outline);
123
129
  }
124
130
 
125
- > span {
126
- width: 100%;
127
- height: 100%;
131
+ &[data-fs-image-gallery-selector-thumbnail="selected"] [data-fs-button-wrapper] {
132
+ border-color: var(--fs-image-gallery-selector-thumbnail-selected-border-color);
133
+ box-shadow: 0 0 0 var(--fs-image-gallery-selector-thumbnail-selected-border-width) var(--fs-color-focus-ring-outline);
128
134
  }
129
135
 
130
136
  [data-fs-image] {
@@ -186,9 +192,16 @@
186
192
  }
187
193
 
188
194
  [data-fs-image-gallery-selector-control-button] {
189
- background-color: var(--fs-image-gallery-selector-control-bkg-color);
190
- border-radius: var(--fs-image-gallery-selector-control-border-radius);
191
- box-shadow: var(--fs-image-gallery-selector-control-shadow);
195
+
196
+ [data-fs-button-wrapper] {
197
+ background-color: var(--fs-image-gallery-selector-control-bkg-color);
198
+ border-radius: var(--fs-image-gallery-selector-control-border-radius);
199
+ box-shadow: var(--fs-image-gallery-selector-control-shadow);
200
+ }
201
+
202
+ &:hover [data-fs-button-wrapper] { box-shadow: var(--fs-image-gallery-selector-control-shadow); }
203
+
204
+ &:hover { box-shadow: var(--fs-image-gallery-selector-control-shadow); }
192
205
 
193
206
  @include media(">=notebook") {
194
207
  transform: rotate(90deg);