@simplybusiness/theme-simplybusiness 1.29.0 → 1.29.2

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 (4) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/dist/index.css +43 -30
  3. package/package.json +7 -7
  4. package/src/variables.css +9 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,33 @@
1
1
  # @simplybusiness/theme-simplybusiness
2
2
 
3
+ ## 1.29.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 7501864: fix: use the correct token for ProgressSteps incomplete text-decoration
8
+ - 220f943: Add tokens for progress steps border
9
+ - Updated dependencies [b1e7459]
10
+ - Updated dependencies [7501864]
11
+ - Updated dependencies [10b9a6d]
12
+ - Updated dependencies [46b629c]
13
+ - Updated dependencies [d65deec]
14
+ - Updated dependencies [220f943]
15
+ - @simplybusiness/mobius@5.32.4
16
+ - @simplybusiness/mobius-journey@8.75.0
17
+ - @simplybusiness/mobius-chatbot@1.5.1
18
+ - @simplybusiness/mobius-datepicker@6.7.17
19
+ - @simplybusiness/mobius-interventions@1.79.4
20
+ - @simplybusiness/theme-core@7.10.5
21
+
22
+ ## 1.29.1
23
+
24
+ ### Patch Changes
25
+
26
+ - 5d5f750: Add footer specific css tokens
27
+ - Updated dependencies [604339d]
28
+ - Updated dependencies [5d5f750]
29
+ - @simplybusiness/mobius-journey@8.74.1
30
+
3
31
  ## 1.29.0
4
32
 
5
33
  ### Minor Changes
package/dist/index.css CHANGED
@@ -160,7 +160,7 @@ h6.mobius-accordion__link-text,
160
160
  border-style:solid;
161
161
  position:relative;
162
162
  margin:0;
163
- transition:color var(--transition-standard), background-color var(--transition-standard);
163
+ transition:color var(--transition-standard), background var(--transition-standard);
164
164
  }
165
165
  .mobius-button:where(.--has-icon){
166
166
  display:inline-flex;
@@ -183,28 +183,28 @@ h6.mobius-accordion__link-text,
183
183
  }
184
184
  .mobius-button:where(.--variant-primary){
185
185
  --button-content-color:var(--button-primary-content-color);
186
- background-color:var(--button-primary-color);
186
+ background:var(--button-primary-color);
187
187
  font-variation-settings:var(--button-primary-font-variation);
188
188
  }
189
189
  .mobius-button:where(.--variant-primary):where(:active),.mobius-button:where(.--variant-primary):where(:hover){
190
- background-color:var(--button-primary-hover-color);
190
+ background:var(--button-primary-hover-color);
191
191
  }
192
192
  .mobius-button:where(.--variant-primary):where(:focus-visible){
193
193
  box-shadow:var(--box-shadow-default);
194
194
  }
195
195
  .mobius-button:where(.--variant-primary):where(.--is-disabled){
196
196
  --button-content-color:var(--color-text-light);
197
- background-color:var(--color-background-medium);
197
+ background:var(--color-background-medium);
198
198
  cursor:not-allowed;
199
199
  }
200
200
  .mobius-button:where(.--variant-secondary){
201
201
  --button-content-color:var(--button-secondary-color);
202
- background-color:transparent;
202
+ background:transparent;
203
203
  border-color:var(--button-secondary-color);
204
204
  }
205
205
  .mobius-button:where(.--variant-secondary):where(:active),.mobius-button:where(.--variant-secondary):where(:hover){
206
206
  --button-content-color:var(--color-text-inverted);
207
- background-color:var(--button-secondary-hover-color);
207
+ background:var(--button-secondary-hover-color);
208
208
  border-color:var(--button-secondary-hover-color);
209
209
  }
210
210
  .mobius-button:where(.--variant-secondary):where(:focus-visible){
@@ -213,22 +213,22 @@ h6.mobius-accordion__link-text,
213
213
  .mobius-button:where(.--variant-secondary):where(.--is-disabled){
214
214
  --button-content-color:var(--color-text-light);
215
215
  border-color:transparent;
216
- background-color:var(--color-background-medium);
216
+ background:var(--color-background-medium);
217
217
  cursor:not-allowed;
218
218
  }
219
219
  .mobius-button:where(.--variant-ghost){
220
220
  --button-content-color:var(--color-secondary);
221
- background-color:var(--color-background-highlight);
221
+ background:var(--color-background-highlight);
222
222
  border:var(--border-default);
223
223
  border-color:transparent;
224
224
  }
225
225
  .mobius-button:where(.--variant-ghost):where(:active){
226
- background-color:var(--color-secondary-hover);
226
+ background:var(--color-secondary-hover);
227
227
  }
228
228
  .mobius-button:where(.--variant-ghost):where(:hover){
229
229
  --button-content-color:var(--color-text-inverted);
230
230
  border-color:transparent;
231
- background-color:var(--color-secondary-hover);
231
+ background:var(--color-secondary-hover);
232
232
  }
233
233
  .mobius-button:where(.--variant-ghost):where(:focus-visible){
234
234
  box-shadow:var(--box-shadow-default);
@@ -236,27 +236,27 @@ h6.mobius-accordion__link-text,
236
236
  .mobius-button:where(.--variant-ghost):where(.--is-disabled){
237
237
  --button-content-color:var(--color-text-light);
238
238
  border-color:transparent;
239
- background-color:var(--color-background-medium);
239
+ background:var(--color-background-medium);
240
240
  cursor:not-allowed;
241
241
  }
242
242
  .mobius-button:where(.--variant-basic){
243
243
  --button-content-color:var(--color-text);
244
244
  border-color:transparent;
245
- background-color:transparent;
245
+ background:transparent;
246
246
  }
247
247
  .mobius-button:where(.--variant-basic):where(:active){
248
- background-color:var(--color-background-light);
248
+ background:var(--color-background-light);
249
249
  }
250
250
  .mobius-button:where(.--variant-basic):where(:hover){
251
- background-color:var(--color-background-light);
251
+ background:var(--color-background-light);
252
252
  }
253
253
  .mobius-button:where(.--variant-basic):where(.--is-disabled){
254
254
  --button-content-color:var(--color-text-light);
255
- background-color:var(--color-background-medium);
255
+ background:var(--color-background-medium);
256
256
  cursor:not-allowed;
257
257
  }
258
258
  .mobius-button:where(.--is-success){
259
- background-color:var(--color-valid);
259
+ background:var(--color-valid);
260
260
  border-color:var(--color-valid);
261
261
  color:transparent;
262
262
  }
@@ -271,16 +271,16 @@ h6.mobius-accordion__link-text,
271
271
  fill:var(--button-content-color);
272
272
  }
273
273
  .mobius-button:where(.--is-success):where(:hover){
274
- background-color:var(--color-valid-hover);
274
+ background:var(--color-valid-hover);
275
275
  border-color:var(--color-valid-hover);
276
276
  }
277
277
  .mobius-button:where(.--is-success):where(:active){
278
- background-color:var(--color-valid);
278
+ background:var(--color-valid);
279
279
  }
280
280
  .mobius-button:where(.--is-success):where(.--is-disabled){
281
281
  border-color:transparent;
282
282
  color:transparent;
283
- background-color:var(--color-background-medium);
283
+ background:var(--color-background-medium);
284
284
  cursor:not-allowed;
285
285
  }
286
286
  .mobius-button:where(.--is-loading){
@@ -297,7 +297,7 @@ h6.mobius-accordion__link-text,
297
297
  --button-content-color:var(--color-secondary);
298
298
  appearance:none;
299
299
  padding:var(--size-xxs);
300
- background-color:transparent;
300
+ background:transparent;
301
301
  font-weight:normal;
302
302
  }
303
303
  .mobius-button:where(.--variant-link):where(:not(.--is-loading)){
@@ -1943,7 +1943,7 @@ a.mobius-button:focus-visible,
1943
1943
  display:flex;
1944
1944
  }
1945
1945
  :is(.mobius-text-field__prefix-inside,.mobius-text-field__suffix-inside):not(.--is-invalid):not(.--is-disabled){
1946
- color:var(--color-primary-light);
1946
+ color:var(--color-primary);
1947
1947
  }
1948
1948
  .mobius-button:is(.mobius-text-field__prefix-inside,.mobius-text-field__suffix-inside){
1949
1949
  min-height:100%;
@@ -2863,9 +2863,18 @@ svg:not(:host).svg-inline--mobius-icon{
2863
2863
  text-align:center;
2864
2864
  }
2865
2865
  .mobius-footer{
2866
- background-color:var(--color-background-light);
2866
+ background-color:var(--footer-background-color);
2867
2867
  padding:64px var(--size-sm) var(--size-lg);
2868
2868
  }
2869
+ .mobius-footer .mobius-text{
2870
+ color:var(--footer-text-color);
2871
+ }
2872
+ .mobius-footer .mobius-link{
2873
+ color:var(--footer-link-color);
2874
+ }
2875
+ :is(.mobius-footer .mobius-link):hover,:is(.mobius-footer .mobius-link):active{
2876
+ color:var(--footer-link-hover-color);
2877
+ }
2869
2878
  .mobius-footer__content{
2870
2879
  display:grid;
2871
2880
  column-gap:var(--size-sm);
@@ -2925,9 +2934,6 @@ svg:not(:host).svg-inline--mobius-icon{
2925
2934
  right:0;
2926
2935
  color:var(--color-accent);
2927
2936
  }
2928
- .mobius-footer__opening-hours-container .mobius-text.small{
2929
- color:var(--color-text-medium);
2930
- }
2931
2937
  .mobius-footer__opening-hours-container[open]
2932
2938
  .mobius-footer__opening-hours-toggle-icon{
2933
2939
  transform:rotate(-180deg);
@@ -2980,7 +2986,6 @@ svg:not(:host).svg-inline--mobius-icon{
2980
2986
  }
2981
2987
  }
2982
2988
  .mobius-footer__address-entry.mobius-text.--is-small{
2983
- color:var(--color-text-medium);
2984
2989
  margin:0;
2985
2990
  }
2986
2991
  .mobius-footer__small-print{
@@ -3572,12 +3577,13 @@ svg:not(:host).svg-inline--mobius-icon{
3572
3577
  }
3573
3578
  :is(:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):hover,:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):focus-visible) .mobius-progress-steps__item-shape{
3574
3579
  background-color:var(--progress-steps-primary-color);
3580
+ border-color:var(--progress-steps-complete-step-border-hover-color);
3575
3581
  }
3576
3582
  :is(:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):hover,:is(.mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-link):focus-visible) .mobius-progress-steps__item-icon{
3577
3583
  color:var(--color-text-inverted);
3578
3584
  }
3579
3585
  .mobius-progress-steps__item.--is-complete .mobius-progress-steps__item-shape{
3580
- border-color:var(--progress-steps-primary-color);
3586
+ border-color:var(--progress-steps-complete-step-border-color);
3581
3587
  background-color:var(--progress-steps-complete-step-background-color);
3582
3588
  background-image:var(--progress-steps-complete-icon, none);
3583
3589
  }
@@ -3594,7 +3600,7 @@ svg:not(:host).svg-inline--mobius-icon{
3594
3600
  }
3595
3601
  .mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-name.mobius-text{
3596
3602
  color:var(--progress-steps-incomplete-label-color);
3597
- text-decoration:var(--progress-steps-complete-label-text-decoration, none);
3603
+ text-decoration:var(--progress-steps-incomplete-label-text-decoration, none);
3598
3604
  }
3599
3605
  .mobius-progress-steps__item.--is-incomplete .mobius-progress-steps__item-shape{
3600
3606
  border-color:var(--progress-steps-secondary-color);
@@ -5406,10 +5412,9 @@ svg:not(:host).svg-inline--mobius-icon{
5406
5412
  justify-content:center;
5407
5413
  align-items:center;
5408
5414
  flex-direction:row;
5409
- box-sizing:border-box;
5415
+ box-sizing:content-box;
5410
5416
  min-height:var(--size-lg);
5411
5417
  width:100%;
5412
- max-width:1004px;
5413
5418
  margin:0 auto;
5414
5419
  padding:10px var(--size-sm);
5415
5420
  }
@@ -5448,6 +5453,7 @@ svg:not(:host).svg-inline--mobius-icon{
5448
5453
  }
5449
5454
  .mobius-reward-banner.--is-raf::after{
5450
5455
  margin-left:100px;
5456
+ transform:scaleX(-1);
5451
5457
  }
5452
5458
  @media (max-width: 640px){
5453
5459
  .mobius-reward-banner__body{
@@ -7261,11 +7267,14 @@ svg:not(:host).svg-inline--mobius-icon{
7261
7267
  --progress-steps-complete-label-color:var(--color-secondary);
7262
7268
  --progress-steps-complete-line-color:var(--progress-steps-primary-color);
7263
7269
  --progress-steps-complete-label-text-decoration:underline;
7270
+ --progress-steps-complete-step-border-color:var(--progress-steps-primary-color);
7271
+ --progress-steps-complete-step-border-hover-color:var(--progress-steps-complete-step-border-color);
7264
7272
 
7265
7273
  --progress-steps-incomplete-background-color:var(--color-background-light);
7266
7274
  --progress-steps-incomplete-text-color:var(--color-text-medium);
7267
7275
  --progress-steps-incomplete-label-color:var(--color-text);
7268
7276
  --progress-steps-incomplete-line-color:var(--progress-steps-secondary-color);
7277
+ --progress-steps-incomplete-label-text-decoration:none;
7269
7278
 
7270
7279
  --progress-steps-active-background-color:var(--progress-steps-primary-color);
7271
7280
  --progress-steps-active-text-color:var(--color-text-inverted);
@@ -7276,6 +7285,10 @@ svg:not(:host).svg-inline--mobius-icon{
7276
7285
  --radio-icon-color:var(--color-accent);
7277
7286
  --color-reward-banner-voucher-background:#00ad93;
7278
7287
  --color-reward-banner-raf-background:#00adcb;
7288
+ --footer-background-color:var(--color-background-light);
7289
+ --footer-text-color:var(--color-text-medium);
7290
+ --footer-link-color:var(--color-link);
7291
+ --footer-link-hover-color:var(--color-link-hover);
7279
7292
  }
7280
7293
  html,
7281
7294
  body{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@simplybusiness/theme-simplybusiness",
3
- "version": "1.29.0",
3
+ "version": "1.29.2",
4
4
  "main": "dist/index.css",
5
5
  "simplyBusiness": {
6
6
  "publishToPublicNpm": true
@@ -26,12 +26,12 @@
26
26
  "./fonts": "./dist/fonts.css"
27
27
  },
28
28
  "dependencies": {
29
- "@simplybusiness/mobius": "^5.32.3",
30
- "@simplybusiness/mobius-chatbot": "^1.5.0",
31
- "@simplybusiness/mobius-datepicker": "^6.7.16",
32
- "@simplybusiness/mobius-interventions": "^1.79.3",
33
- "@simplybusiness/mobius-journey": "^8.74.0",
34
- "@simplybusiness/theme-core": "^7.10.4"
29
+ "@simplybusiness/mobius": "^5.32.4",
30
+ "@simplybusiness/mobius-chatbot": "^1.5.1",
31
+ "@simplybusiness/mobius-datepicker": "^6.7.17",
32
+ "@simplybusiness/mobius-interventions": "^1.79.4",
33
+ "@simplybusiness/mobius-journey": "^8.75.0",
34
+ "@simplybusiness/theme-core": "^7.10.5"
35
35
  },
36
36
  "devDependencies": {
37
37
  "build-scripts": "^1.0.1",
package/src/variables.css CHANGED
@@ -33,11 +33,14 @@
33
33
  --progress-steps-complete-label-color: var(--color-secondary);
34
34
  --progress-steps-complete-line-color: var(--progress-steps-primary-color);
35
35
  --progress-steps-complete-label-text-decoration: underline;
36
+ --progress-steps-complete-step-border-color: var(--progress-steps-primary-color);
37
+ --progress-steps-complete-step-border-hover-color: var(--progress-steps-complete-step-border-color);
36
38
 
37
39
  --progress-steps-incomplete-background-color: var(--color-background-light);
38
40
  --progress-steps-incomplete-text-color: var(--color-text-medium);
39
41
  --progress-steps-incomplete-label-color: var(--color-text);
40
42
  --progress-steps-incomplete-line-color: var(--progress-steps-secondary-color);
43
+ --progress-steps-incomplete-label-text-decoration: none;
41
44
 
42
45
  --progress-steps-active-background-color: var(--progress-steps-primary-color);
43
46
  --progress-steps-active-text-color: var(--color-text-inverted);
@@ -54,4 +57,10 @@
54
57
  /* Reward Banner */
55
58
  --color-reward-banner-voucher-background: #00ad93;
56
59
  --color-reward-banner-raf-background: #00adcb;
60
+
61
+ /* Footer */
62
+ --footer-background-color: var(--color-background-light);
63
+ --footer-text-color: var(--color-text-medium);
64
+ --footer-link-color: var(--color-link);
65
+ --footer-link-hover-color: var(--color-link-hover);
57
66
  }