@simplybusiness/theme-core 7.12.1 → 7.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 7.13.0
+
+### Minor Changes
+
+- 5d01a2f: Added CTM theme variations for Radio, Checkbox and ErrorMessage
+
+### Patch Changes
+
+- Updated dependencies [485a83d]
+- Updated dependencies [5d01a2f]
+  - @simplybusiness/mobius@6.3.0
+
 ## 7.12.1
 
 ### Patch Changes

package/dist/index.css

@@ -38,16 +38,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;
   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{
@@ -63,13 +64,16 @@ 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);
 }
 
@@ -415,6 +419,10 @@ a.mobius-button:focus-visible,
       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;
   }
@@ -501,11 +509,14 @@ a.mobius-button:focus-visible,
 }
 
 .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);
 }
 
@@ -516,7 +527,7 @@ 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{
@@ -525,11 +536,11 @@ a.mobius-button:focus-visible,
 
 .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{
@@ -927,12 +938,19 @@ 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);
 }
 
@@ -1440,11 +1458,11 @@ a.mobius-button:focus-visible,
 }
 
 .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{
@@ -1466,9 +1484,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;
@@ -1483,11 +1503,12 @@ 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{
@@ -1495,46 +1516,46 @@ a.mobius-button:focus-visible,
   }
 
 .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){
@@ -1551,7 +1572,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{
@@ -1562,20 +1583,20 @@ a.mobius-button:focus-visible,
         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);
         }
 
@@ -1584,36 +1605,46 @@ a.mobius-button:focus-visible,
   }
 
 .--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{
@@ -3037,6 +3068,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);
@@ -3045,7 +3079,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-core",
-  "version": "7.12.1",
+  "version": "7.13.0",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,7 +26,7 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^6.2.1"
+    "@simplybusiness/mobius": "^6.3.0"
   },
   "devDependencies": {
     "build-scripts": "^1.0.1"

package/src/variables.css

@@ -191,6 +191,9 @@
   --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);
   /* Disabled */
   --checkbox-color-disabled: var(--color-text-light);
   --checkbox-label-color-disabled: var(--color-text-light);
@@ -201,9 +204,50 @@
   --checkbox-label-color-invalid: var(--color-error);
   --checkbox-label-background-color-invalid: var(--color-error-background);
   --checkbox-border-color-invalid: var(--color-error);
+  /* Typography */
+  --checkbox-visible-label-font-size: var(--font-size-regular);
+  --checkbox-visible-label-height: auto;
+  --checkbox-multiline-content-font-size: var(--font-size-regular);
+  /* CheckboxGroup */
+  --checkbox-group-wrapper-margin-bottom: var(--size-sm);
+  --checkbox-group-wrapper-gap-horizontal: var(--size-sm);
+  --checkbox-group-wrapper-gap-vertical: var(--size-xs);
   /* Icon */
   --checkbox-default-icon-visibility: visible;
 
+  /* Radio */
+  --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);
+
+  /* ErrorMessage */
+  --error-message-font-size: var(--font-size-regular);
+
   /* Popover */
   --popover-max-width: 260px;
   --popover-z-index: 2147483647;