@simplybusiness/theme-simplybusiness 2.0.15 → 2.0.17

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @simplybusiness/theme-simplybusiness
 
+## 2.0.17
+
+### Patch Changes
+
+- Updated dependencies [0701e27]
+  - @simplybusiness/mobius-journey@10.8.1
+
+## 2.0.16
+
+### Patch Changes
+
+- Updated dependencies [485a83d]
+- Updated dependencies [c63b389]
+- Updated dependencies [9c71ca2]
+- Updated dependencies [5d01a2f]
+- Updated dependencies [ce4c3b2]
+- Updated dependencies [610fdfd]
+- Updated dependencies [4fcd5d5]
+  - @simplybusiness/mobius@6.3.0
+  - @simplybusiness/mobius-journey@10.8.0
+  - @simplybusiness/theme-core@7.13.0
+  - @simplybusiness/mobius-chatbot@2.0.7
+  - @simplybusiness/mobius-datepicker@7.1.5
+  - @simplybusiness/mobius-interventions@2.6.2
+
 ## 2.0.15
 
 ### Patch Changes

package/dist/index.css

@@ -32,16 +32,17 @@
   display:flex;
   align-items:center;
   border-radius:var(--radius-1);
-  color:var(--color-secondary);
+  color:var(--color-accordion-link, var(--color-secondary));
   cursor:pointer;
   outline:none;
   -webkit-text-decoration:underline;
   -webkit-text-decoration:underline;
   text-decoration:underline;
-  text-underline-offset:6px;
+  text-underline-offset:var(--accordion-link-underline-offset, 6px);
 }
 .mobius-accordion__link:hover,.mobius-accordion__link:active{
-    color:var(--color-secondary-hover);
+    color:var(--color-accordion-link-hover, var(--color-secondary-hover));
+    text-decoration:var(--accordion-link-hover-text-decoration, underline);
   }
 .mobius-accordion__link:focus-visible{
     outline:none;
@@ -55,12 +56,15 @@ h5.mobius-accordion__link-text,
 h6.mobius-accordion__link-text,
 .mobius-accordion__link-text{
   margin:0;
-  margin-right:var(--size-xs);
+  order:calc(3 - var(--mobius-accordion-icon-position, 2));
   line-height:var(--line-height-normal);
-  font-size:var(--font-size-small-paragraph);
-  font-weight:var(--font-weight-normal);
+  font-size:var(--accordion-font-size, var(--font-size-small-paragraph));
+  font-weight:var(--accordion-font-weight, var(--font-weight-normal));
 }
 .mobius-accordion__link-icon{
+  order:var(--mobius-accordion-icon-position, 2);
+  margin-left:calc((var(--mobius-accordion-icon-position, 2) - 1) * var(--accordion-icon-margin, var(--size-xs)));
+  margin-right:calc((2 - var(--mobius-accordion-icon-position, 2)) * var(--accordion-icon-margin, var(--size-xs)));
   transition:transform var(--transition-duration);
 }
 .mobius-accordion__link-icon.--is-open{
@@ -349,6 +353,9 @@ a.mobius-button:focus-visible,
 .mobius-checkbox__input.--is-selected.--is-invalid{
       background-color:var(--checkbox-background-color-invalid);
     }
+.mobius-checkbox__input.--is-selected.--is-disabled{
+      background-color:var(--checkbox-background-color-disabled);
+    }
 .mobius-checkbox__input:focus-visible{
     outline:none;
   }
@@ -419,11 +426,14 @@ a.mobius-button:focus-visible,
   visibility:var(--checkbox-default-icon-visibility);
 }
 .mobius-checkbox__visible-label{
+  display:flex;
+  align-items:center;
   box-sizing:border-box;
   width:100%;
+  height:var(--checkbox-visible-label-height);
   font-family:var(--font-family);
   line-height:var(--line-height-normal);
-  font-size:var(--font-size-regular);
+  font-size:var(--checkbox-visible-label-font-size);
   margin-left:var(--checkbox-label-gap);
 }
 .mobius-checkbox-group{
@@ -432,17 +442,17 @@ a.mobius-button:focus-visible,
 }
 .mobius-checkbox-group .mobius-checkbox-group__wrapper{
     display:grid;
-    margin-bottom:var(--size-sm);
+    margin-bottom:var(--checkbox-group-wrapper-margin-bottom);
   }
 .mobius-checkbox-group .mobius-checkbox,.mobius-checkbox-group .mobius-checkbox-group__wrapper{
     margin-bottom:0;
   }
 .mobius-checkbox-group.--is-horizontal .mobius-checkbox-group__wrapper{
     grid-template-columns:repeat(var(--checkbox-items-per-row), 1fr);
-    gap:var(--size-sm);
+    gap:var(--checkbox-group-wrapper-gap-horizontal);
   }
 .mobius-checkbox-group.--is-vertical .mobius-checkbox-group__wrapper{
-    gap:var(--size-xs);
+    gap:var(--checkbox-group-wrapper-gap-vertical);
   }
 .mobius-checkbox-group:where(.--is-optional) > :where(.mobius-label)::after{
     content:" (optional)";
@@ -778,11 +788,17 @@ a.mobius-button:focus-visible,
 .mobius-error-message{
   box-sizing:border-box;
   display:grid;
-  gap:var(--size-xs);
+  gap:var(--error-message-grid-gap, var(--size-xs));
   grid-template-columns:min-content 1fr;
   color:var(--color-error);
 }
+.mobius-error-message__icon{
+  width:var(--error-message-icon-width, auto);
+  height:var(--error-message-icon-height, auto);
+  overflow:hidden;
+}
 .mobius-error-message__text.mobius-text{
+  font-size:var(--error-message-font-size);
   line-height:var(--font-size-regular);
 }
 .mobius-fieldset{
@@ -1204,10 +1220,10 @@ a.mobius-button:focus-visible,
   width:100%;
 }
 .mobius-radio-group.--is-horizontal .mobius-radio__label:not(:last-child){
-    margin-right:var(--size-xs);
+    margin-right:var(--radio-gap);
   }
 .mobius-radio-group.--is-vertical .mobius-radio__label:not(:last-child){
-    margin-bottom:var(--size-xs);
+    margin-bottom:var(--radio-gap);
   }
 .mobius-radio-group:where(.--is-optional) > :where(.mobius-label)::after{
     content:" (optional)";
@@ -1224,9 +1240,11 @@ a.mobius-button:focus-visible,
 .mobius-radio__input{
   position:relative;
   align-self:center;
-  margin:0 calc(var(--size-xs) + 2px) 0 0;
+  margin:0 var(--radio-label-gap) 0 0;
   padding:var(--size-xs);
-  border:2px solid var(--color-primary-light);
+  width:var(--radio-size);
+  height:var(--radio-size);
+  border:var(--radio-border-width) solid var(--color-primary);
   border-radius:50%;
   -webkit-appearance:none;
   appearance:none;
@@ -1239,51 +1257,52 @@ a.mobius-button:focus-visible,
     position:absolute;
     content:"";
     display:block;
-    width:10px;
-    height:10px;
+    width:var(--radio-inner-size);
+    height:var(--radio-inner-size);
     border-radius:50%;
-    top:3px;
-    left:3px;
+    top:50%;
+    left:50%;
+    transform:translate(-50%, -50%);
   }
 .mobius-radio__input:checked::after{
     background-color:var(--color-primary);
   }
 .mobius-radio__input:disabled{
-    border-color:var(--color-border-medium);
+    border-color:var(--radio-input-disabled-border-color);
   }
 .mobius-radio__input:disabled:checked::after{
-      background-color:var(--color-background-light);
+      background-color:var(--radio-input-disabled-inner-color);
     }
 .mobius-radio__input.--is-multiline{
     align-self:flex-start;
     margin-top:var(--size-xxs);
-    margin-right:calc(var(--size-sm) - 1px);
+    margin-right:var(--radio-label-gap);
   }
 .mobius-radio__label{
   display:flex;
-  align-items:center;
+  align-items:var(--radio-label-align-items);
   box-sizing:border-box;
   width:100%;
-  padding:var(--input-field-padding-tight);
+  padding:var(--radio-label-padding);
   font-family:var(--font-family);
   font-size:var(--font-size-regular);
   font-weight:var(--font-weight-normal);
-  border:var(--border-default);
+  border:var(--radio-label-border);
   border-radius:var(--radius-1);
   color:var(--color-text);
   outline:0;
   position:relative;
   cursor:pointer;
-  background-color:var(--color-background-input);
+  background-color:var(--radio-label-background);
 }
 .mobius-radio__label.--is-disabled{
-    background-color:var(--color-background-light);
-    border-color:var(--color-border-medium);
-    color:var(--color-text-light);
+    background-color:var(--radio-label-background-disabled);
+    border-color:var(--radio-label-disabled-border-color);
+    color:var(--radio-label-disabled-text-color);
     cursor:not-allowed;
   }
 .mobius-radio__label.--is-disabled.--is-selected{
-      border-color:var(--color-border-light);
+      border-color:var(--radio-label-disabled-selected-border-color);
     }
 .mobius-radio__label.--is-selected:not(.--is-invalid .mobius-radio__label):not(.--is-disabled){
     border-color:var(--color-primary-light);
@@ -1296,7 +1315,7 @@ a.mobius-button:focus-visible,
       }
 .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label){
     border-color:var(--color-primary);
-    background-color:var(--color-background-input-active);
+    background-color:var(--radio-label-background-hover);
   }
 .mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input{
       border-color:var(--color-primary);
@@ -1304,47 +1323,56 @@ a.mobius-button:focus-visible,
 :is(.mobius-radio__label:hover:not(.--is-disabled):not(.--is-invalid .mobius-radio__label) .mobius-radio__input):checked::after{
         background-color:var(--color-primary);
       }
-.mobius-radio__label:focus-within:not(.--is-disabled){
+.mobius-radio__label:has(:focus-visible):not(.--is-disabled){
     box-shadow:var(--box-shadow-default);
   }
-.mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)){
+.mobius-radio__label:has(:focus-visible):not(.--is-disabled):not(.--is-invalid .mobius-radio__label:has(:focus-visible):not(.--is-disabled)){
       border-color:var(--color-primary);
-      background-color:var(--color-background-input-active);
+      background-color:var(--radio-label-background-focus);
     }
-.mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input{
+.mobius-radio__label:has(:focus-visible):not(.--is-disabled):not(.--is-invalid .mobius-radio__label:has(:focus-visible):not(.--is-disabled)) .mobius-radio__input{
         border-color:var(--color-primary);
       }
-:is(.mobius-radio__label:focus-within:not(.--is-disabled):not(.--is-invalid .mobius-radio__label:focus-within:not(.--is-disabled)) .mobius-radio__input):checked::after{
+:is(.mobius-radio__label:has(:focus-visible):not(.--is-disabled):not(.--is-invalid .mobius-radio__label:has(:focus-visible):not(.--is-disabled)) .mobius-radio__input):checked::after{
           background-color:var(--color-primary);
         }
 .mobius-radio__label.--is-multiline{
     width:100%;
   }
 .--is-invalid .mobius-radio__label:not(.--is-disabled){
-    border-color:var(--color-error);
-    color:var(--color-error);
+    border-color:var(--radio-label-invalid-border-color);
+    color:var(--radio-label-invalid-text-color);
   }
 :is(.--is-invalid .mobius-radio__label:not(.--is-disabled)):hover,:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)):focus-within{
-      border-color:var(--color-error);
-      background-color:var(--color-error-background);
+      border-color:var(--radio-label-invalid-border-color);
+      background-color:var(--radio-label-background-invalid);
     }
 :is(.--is-invalid .mobius-radio__label:not(.--is-disabled)) .mobius-radio__input{
-      border-color:var(--color-error);
+      border-color:var(--radio-input-invalid-border-color);
     }
 :is(:is(.--is-invalid .mobius-radio__label:not(.--is-disabled)) .mobius-radio__input):checked::after{
-        background-color:var(--color-error);
+        background-color:var(--radio-input-invalid-inner-color);
       }
 .mobius-radio__content{
   box-sizing:border-box;
   flex:1;
+  font-size:var(--radio-content-font-size);
+  color:var(--radio-content-color);
+  line-height:var(--radio-content-line-height);
 }
 .mobius-radio__content--multiline{
   flex:1;
+  font-size:var(--radio-content-font-size);
+  color:var(--radio-content-color);
+  line-height:var(--radio-content-line-height);
 }
 .mobius-radio__content-first-line{
   font-weight:var(--font-weight-bold);
-  margin-bottom:var(--size-xs);
-  padding-top:calc(var(--size-xxs) - 1px);
+  margin-bottom:var(--radio-first-line-margin-bottom);
+  padding-top:var(--radio-first-line-padding-top);
+}
+.mobius-radio__extra-content{
+  color:var(--radio-extra-content-color);
 }
 .mobius-radio__label.--has-icon-first .mobius-radio__content{
   display:grid;
@@ -2556,6 +2584,9 @@ svg:not(:host).svg-inline--mobius-icon{
   --checkbox-color:var(--color-primary-light);
   --checkbox-label-color:var(--color-text);
   --checkbox-border-color:var(--color-background-input);
+  --checkbox-background-color:var(--color-background-input);
+  --checkbox-background-color-disabled:var(--color-border-medium);
+  --checkbox-background-color-invalid:var(--color-error);
   --checkbox-color-disabled:var(--color-text-light);
   --checkbox-label-color-disabled:var(--color-text-light);
   --checkbox-label-background-color-disabled:var(--color-background-light);
@@ -2564,7 +2595,42 @@ svg:not(:host).svg-inline--mobius-icon{
   --checkbox-label-color-invalid:var(--color-error);
   --checkbox-label-background-color-invalid:var(--color-error-background);
   --checkbox-border-color-invalid:var(--color-error);
+  --checkbox-visible-label-font-size:var(--font-size-regular);
+  --checkbox-visible-label-height:auto;
+  --checkbox-multiline-content-font-size:var(--font-size-regular);
+  --checkbox-group-wrapper-margin-bottom:var(--size-sm);
+  --checkbox-group-wrapper-gap-horizontal:var(--size-sm);
+  --checkbox-group-wrapper-gap-vertical:var(--size-xs);
   --checkbox-default-icon-visibility:visible;
+  --radio-border-width:2px;
+  --radio-size:auto;
+  --radio-inner-size:10px;
+  --radio-gap:var(--size-xs);
+  --radio-label-gap:calc(var(--size-xs) + 2px);
+  --radio-label-border:var(--radio-border-width) solid var(--color-primary);
+  --radio-label-align-items:center;
+  --radio-label-background:var(--color-background-input);
+  --radio-label-background-disabled:var(--color-background-light);
+  --radio-label-background-hover:var(--color-background-input-active);
+  --radio-label-background-focus:var(--color-background-input-active);
+  --radio-label-background-invalid:var(--color-error-background);
+  --radio-label-padding:var(--input-field-padding-tight);
+  --radio-content-font-size:var(--font-size-regular);
+  --radio-content-color:inherit;
+  --radio-content-line-height:normal;
+  --radio-first-line-margin-bottom:var(--size-xs);
+  --radio-first-line-padding-top:calc(var(--size-xxs) - 1px);
+  --radio-extra-content-color:inherit;
+  --radio-input-disabled-border-color:var(--color-border-medium);
+  --radio-input-disabled-inner-color:var(--color-background-light);
+  --radio-label-disabled-border-color:var(--color-border-medium);
+  --radio-label-disabled-text-color:var(--color-text-light);
+  --radio-label-disabled-selected-border-color:var(--color-border-light);
+  --radio-label-invalid-border-color:var(--color-error);
+  --radio-label-invalid-text-color:var(--color-error);
+  --radio-input-invalid-border-color:var(--color-error);
+  --radio-input-invalid-inner-color:var(--color-error);
+  --error-message-font-size:var(--font-size-regular);
   --popover-max-width:260px;
   --popover-z-index:2147483647;
   --color-background-popover:var(--color-azure-700);
@@ -3978,6 +4044,7 @@ svg:not(:host).svg-inline--mobius-icon{
   -webkit-text-decoration:underline;
   text-decoration:underline;
   text-underline-offset:var(--size-xxs);
+  color:var(--color-help-link, var(--button-content-color));
 }
 .mobius-question__help-button{
   display:flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "2.0.15",
+  "version": "2.0.17",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,12 +26,12 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^6.2.1",
-    "@simplybusiness/mobius-chatbot": "^2.0.6",
-    "@simplybusiness/mobius-datepicker": "^7.1.4",
-    "@simplybusiness/mobius-interventions": "^2.6.1",
-    "@simplybusiness/mobius-journey": "^10.7.1",
-    "@simplybusiness/theme-core": "^7.12.1"
+    "@simplybusiness/mobius": "^6.3.0",
+    "@simplybusiness/mobius-chatbot": "^2.0.7",
+    "@simplybusiness/mobius-datepicker": "^7.1.5",
+    "@simplybusiness/mobius-interventions": "^2.6.2",
+    "@simplybusiness/mobius-journey": "^10.8.1",
+    "@simplybusiness/theme-core": "^7.13.0"
   },
   "devDependencies": {
     "build-scripts": "^1.0.1",