@simplybusiness/theme-core 7.7.0 → 7.7.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 7.7.2
+
+### Patch Changes
+
+- Updated dependencies [80bf5a9]
+  - @simplybusiness/mobius@5.28.2
+
+## 7.7.1
+
+### Patch Changes
+
+- dbd72a0: Add customisation for Checkbox UI
+- 9b06f5a: Add CSS variables to style label colour and input border-radius
+- Updated dependencies [dbd72a0]
+- Updated dependencies [9b06f5a]
+  - @simplybusiness/mobius@5.28.1
+
 ## 7.7.0
 
 ### Minor Changes

package/dist/index.css

@@ -406,21 +406,33 @@ a.mobius-button:focus-visible,
 .mobius-checkbox__input{
   appearance:none;
   position:absolute;
-  margin-top:2px;
-  margin-left:0px;
-  width:21px;
-  height:20px;
+  margin:var(--checkbox-margin);
+  width:var(--checkbox-width);
+  height:var(--checkbox-height);
+  border:var(--checkbox-border);
+  border-radius:var(--checkbox-border-radius);
   pointer-events:none;
+  background-repeat:no-repeat;
+  background-position:center;
 }
 
+.mobius-checkbox__input.--is-selected{
+    background-color:var(--checkbox-background-color);
+    background-image:var(--checkbox-icon);
+  }
+
+.mobius-checkbox__input.--is-selected.--is-invalid{
+      background-color:var(--checkbox-background-color-invalid);
+    }
+
 .mobius-checkbox__input:focus-visible{
     outline:none;
   }
 
 .mobius-checkbox__input.--is-disabled{
-    color:var(--color-text-light);
-    border-color:var(--color-border-medium);
-    background-color:var(--color-background-light);
+    color:var(--checkbox-label-color-disabled);
+    border-color:var(--checkbox-border-color-disabled);
+    background-color:var(--checkbox-background-color-disabled);
   }
 
 .--is-invalid .mobius-checkbox__input:not(.--is-disabled){
@@ -432,9 +444,9 @@ a.mobius-button:focus-visible,
   display:flex;
   align-items:flex-start;
   flex-direction:row;
-  border:var(--border-default);
+  border:var(--checkbox-label-border);
   border-radius:var(--radius-1);
-  padding:var(--input-field-padding-tight);
+  padding:var(--checkbox-label-padding);
   position:relative;
   user-select:none;
   cursor:pointer;
@@ -442,9 +454,9 @@ a.mobius-button:focus-visible,
 }
 
 .mobius-checkbox__label.--is-disabled{
-    color:var(--color-text-light);
-    border-color:var(--color-border-medium);
-    background-color:var(--color-background-light);
+    color:var(--checkbox-label-color-disabled);
+    border-color:var(--checkbox-border-color-disabled);
+    background-color:var(--checkbox-label-background-color-disabled);
     cursor:not-allowed;
   }
 
@@ -465,36 +477,37 @@ a.mobius-button:focus-visible,
       color:var(--color-primary);
     }
 
-.mobius-checkbox__label:focus-within:not(.--is-disabled):not(.--is-invalid){
+.mobius-checkbox__label:has(:focus-visible):not(.--is-disabled):not(.--is-invalid){
       box-shadow:var(--box-shadow-default);
       border-color:var(--color-primary);
       background-color:var(--color-background-input-active);
     }
 
-.mobius-checkbox__label:focus-within:not(.--is-disabled):not(.--is-invalid) .mobius-checkbox__icon{
+.mobius-checkbox__label:has(:focus-visible):not(.--is-disabled):not(.--is-invalid) .mobius-checkbox__icon{
         color:var(--color-primary);
       }
 
 .mobius-checkbox__label.--is-invalid:not(.--is-disabled){
-    border-color:var(--color-error);
-    color:var(--color-error);
+    color:var(--checkbox-label-color-invalid);
+    border-color:var(--checkbox-border-color-invalid);
   }
 
 .mobius-checkbox__label.--is-invalid:not(.--is-disabled):hover,.mobius-checkbox__label.--is-invalid:not(.--is-disabled):focus-within{
-      background-color:var(--color-error-background);
+      background-color:var(--checkbox-label-background-color-invalid);
     }
 
 .mobius-checkbox__label.--is-invalid:not(.--is-disabled) .mobius-checkbox__icon{
-      color:var(--color-error);
+      color:var(--checkbox-color-invalid);
     }
 
 .mobius-checkbox__label.--is-invalid:not(.--is-disabled) .mobius-checkbox__input{
-      border-color:var(--color-error);
+      border-color:var(--checkbox-border-color-invalid);
     }
 
 .mobius-checkbox__icon{
   position:relative;
-  color:var(--color-primary-light);
+  color:var(--checkbox-color);
+  visibility:var(--checkbox-default-icon-visibility);
 }
 
 .mobius-checkbox__visible-label{
@@ -503,7 +516,7 @@ a.mobius-button:focus-visible,
   font-family:var(--font-family);
   line-height:var(--line-height-normal);
   font-size:var(--font-size-regular);
-  margin-left:var(--size-sm);
+  margin-left:var(--checkbox-label-gap);
 }
 
 .mobius-checkbox-group{
@@ -1019,7 +1032,7 @@ a.mobius-button:focus-visible,
   font-family:var(--font-family);
   font-weight:var(--label-font-weight);
   font-variation-settings:var(--label-font-variation-settings);
-  color:var(--color-text);
+  color:var(--label-color);
 }
 
 .mobius-label.--is-invalid:not(.--is-disabled){
@@ -1306,7 +1319,7 @@ a.mobius-button:focus-visible,
 .mobius-number-field__input{
   box-sizing:border-box;
   border:var(--border-default);
-  border-radius:var(--radius-1);
+  border-radius:var(--input-border-radius);
   background-color:var(--color-background-input);
   padding:var(--input-field-padding);
   font-family:var(--font-family);
@@ -1815,7 +1828,7 @@ a.mobius-button:focus-visible,
   font-family:var(--font-family);
   font-size:var(--font-size-regular);
   border:var(--border-default);
-  border-radius:var(--radius-1);
+  border-radius:var(--input-border-radius);
   background-color:var(--color-background-input);
   color:var(--color-text-medium);
   outline:0;
@@ -1860,7 +1873,7 @@ a.mobius-button:focus-visible,
   padding:var(--size-md);
   border-radius:var(--radius-1);
   pointer-events:none;
-  color:var(--color-text-medium);
+  color:var(--color-primary-light);
 }
 
 .mobius-select__icon.--is-disabled{
@@ -2260,7 +2273,7 @@ a.mobius-button:focus-visible,
   box-sizing:border-box;
   flex:1 1 0%;
   border:var(--border-default);
-  border-radius:var(--radius-1);
+  border-radius:var(--input-border-radius);
   padding:var(--size-xs) var(--size-sm);
   margin:0px;
   font-family:var(--font-family);
@@ -2330,6 +2343,7 @@ a.mobius-button:focus-visible,
   }
 
 .mobius-text-field__prefix-outside.mobius-button{
+    border-radius:var(--input-border-radius);
     border-top-right-radius:0;
     border-bottom-right-radius:0;
   }
@@ -2344,6 +2358,7 @@ a.mobius-button:focus-visible,
   }
 
 .mobius-text-field__suffix-outside.mobius-button{
+    border-radius:var(--input-border-radius);
     border-top-left-radius:0;
     border-bottom-left-radius:0;
   }
@@ -2384,7 +2399,7 @@ a.mobius-button:focus-visible,
   display:flex;
   flex:1 1 0;
   align-items:center;
-  border-radius:var(--radius-1);
+  border-radius:var(--input-border-radius);
   color:var(--color-text-medium);
   overflow:hidden;
   background-color:var(--color-background-input);
@@ -2395,6 +2410,7 @@ a.mobius-button:focus-visible,
   }
 
 .mobius-text-field__input-wrapper:has( + .mobius-button){
+    border-radius:var(--input-border-radius);
     border-top-right-radius:0;
     border-bottom-right-radius:0;
   }
@@ -3035,15 +3051,36 @@ svg:not(:host).svg-inline--mobius-icon{
   --drawer-transition-duration:200ms;
   --modal-transition-duration:0;
   --backdrop-color:#18181d;
+  --label-color:var(--color-text);
   --label-font-weight:var(--font-weight-bold);
   --label-font-variation-settings:normal;
   --input-field-padding:17px var(--size-sm);
   --input-field-padding-tight:14px var(--size-sm);
+  --input-border-radius:var(--radius-1);
   --border-default:var(--size-border-width) solid var(--color-primary-light);
   --box-shadow-default:0 0 0 var(--size-focus-ring) var(--color-focus);
   --text-input-max-width:none;
   --number-input-max-width:none;
   --select-wrapper-max-width:none;
+  --checkbox-label-border:var(--border-default);
+  --checkbox-label-padding:var(--input-field-padding-tight);
+  --checkbox-label-gap:var(--size-sm);
+  --checkbox-width:21px;
+  --checkbox-height:20px;
+  --checkbox-margin:2px 0 0 0;
+  --checkbox-border:none;
+  --checkbox-color:var(--color-primary-light);
+  --checkbox-label-color:var(--color-text);
+  --checkbox-border-color:var(--color-background-input);
+  --checkbox-color-disabled:var(--color-text-light);
+  --checkbox-label-color-disabled:var(--color-text-light);
+  --checkbox-label-background-color-disabled:var(--color-background-light);
+  --checkbox-border-color-disabled:var(--color-border-medium);
+  --checkbox-color-invalid:var(--color-error);
+  --checkbox-label-color-invalid:var(--color-error);
+  --checkbox-label-background-color-invalid:var(--color-error-background);
+  --checkbox-border-color-invalid:var(--color-error);
+  --checkbox-default-icon-visibility:visible;
   --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.7.0",
+  "version": "7.7.2",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,7 +26,7 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^5.28.0"
+    "@simplybusiness/mobius": "^5.28.2"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",

package/src/variables.css

@@ -166,16 +166,42 @@
   --backdrop-color: #18181d;
 
   /* Label and Inputs */
+  --label-color: var(--color-text);
   --label-font-weight: var(--font-weight-bold);
   --label-font-variation-settings: normal;
   --input-field-padding: 17px var(--size-sm);
   --input-field-padding-tight: 14px var(--size-sm);
+  --input-border-radius: var(--radius-1);
   --border-default: var(--size-border-width) solid var(--color-primary-light);
   --box-shadow-default: 0 0 0 var(--size-focus-ring) var(--color-focus);
   --text-input-max-width: none;
   --number-input-max-width: none;
   --select-wrapper-max-width: none;
 
+  /* Checkbox */
+  --checkbox-label-border: var(--border-default);
+  --checkbox-label-padding: var(--input-field-padding-tight);
+  --checkbox-label-gap: var(--size-sm);
+  --checkbox-width: 21px;
+  --checkbox-height: 20px;
+  --checkbox-margin: 2px 0 0 0;
+  --checkbox-border: none;
+  --checkbox-color: var(--color-primary-light);
+  --checkbox-label-color: var(--color-text);
+  --checkbox-border-color: var(--color-background-input);
+  /* Disabled */
+  --checkbox-color-disabled: var(--color-text-light);
+  --checkbox-label-color-disabled: var(--color-text-light);
+  --checkbox-label-background-color-disabled: var(--color-background-light);
+  --checkbox-border-color-disabled: var(--color-border-medium);
+  /* Invalid */
+  --checkbox-color-invalid: var(--color-error);
+  --checkbox-label-color-invalid: var(--color-error);
+  --checkbox-label-background-color-invalid: var(--color-error-background);
+  --checkbox-border-color-invalid: var(--color-error);
+  /* Icon */
+  --checkbox-default-icon-visibility: visible;
+
   /* Popover */
   --popover-max-width: 260px;
   --popover-z-index: 2147483647;