@simplybusiness/theme-core 7.6.15 → 7.7.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 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
+
+- 6962cbb: feat: Hoist all CSS variables into theme variable files
+
+### Patch Changes
+
+- 909dfe7: Add button variables to theme-core and ctm
+- Updated dependencies [909dfe7]
+- Updated dependencies [6962cbb]
+  - @simplybusiness/mobius@5.28.0
+
 ## 7.6.15
 
 ### Patch Changes

package/dist/index.css

@@ -171,12 +171,12 @@ h6.mobius-accordion__link-text,
 
 :root,
 :host{
-  --button-variant-primary-font-variation-settings:normal;
-  --button-variant-primary-color:var(--color-primary);
-  --button-variant-primary-content-color:var(--color-text-inverted);
-  --button-variant-primary-hover-color:var(--color-primary-hover);
-  --button-variant-secondary-color:var(--color-secondary);
-  --button-variant-secondary-hover-color:var(--color-secondary-hover);
+  --button-primary-font-variation:normal;
+  --button-primary-color:var(--color-primary);
+  --button-primary-content-color:var(--color-text-inverted);
+  --button-primary-hover-color:var(--color-primary-hover);
+  --button-secondary-color:var(--color-secondary);
+  --button-secondary-hover-color:var(--color-secondary-hover);
   --button-border-radius:var(--radius-1);
 }
 
@@ -201,37 +201,35 @@ h6.mobius-accordion__link-text,
 
 .mobius-button:where(.--has-icon){
     display:inline-flex;
-    gap:var(--size-xs);
+    gap:var(--button-gap);
   }
 
 .mobius-button:where(.--size-sm){
     font-size:var(--font-size-3);
     line-height:16px;
-    padding:10px var(--size-sm);
+    padding:var(--button-padding-sm);
   }
 
 .mobius-button:where(.--size-md){
     font-size:var(--font-size-4);
     line-height:24px;
-    padding:14px var(--size-md);
+    padding:var(--button-padding-md);
   }
 
 .mobius-button:where(.--size-lg){
     font-size:var(--font-size-5);
     line-height:32px;
-    padding:14px var(--size-md);
+    padding:var(--button-padding-lg);
   }
 
 .mobius-button:where(.--variant-primary){
-    --button-content-color:var(--button-variant-primary-content-color);
-    background-color:var(--button-variant-primary-color);
-    font-variation-settings:var(
-      --button-variant-primary-font-variation-settings
-    );
+    --button-content-color:var(--button-primary-content-color);
+    background-color:var(--button-primary-color);
+    font-variation-settings:var(--button-primary-font-variation);
   }
 
 .mobius-button:where(.--variant-primary):where(:active),.mobius-button:where(.--variant-primary):where(:hover){
-      background-color:var(--button-variant-primary-hover-color);
+      background-color:var(--button-primary-hover-color);
     }
 
 .mobius-button:where(.--variant-primary):where(:focus-visible){
@@ -245,15 +243,15 @@ h6.mobius-accordion__link-text,
     }
 
 .mobius-button:where(.--variant-secondary){
-    --button-content-color:var(--button-variant-secondary-color);
+    --button-content-color:var(--button-secondary-color);
     background-color:transparent;
-    border-color:var(--button-variant-secondary-color);
+    border-color:var(--button-secondary-color);
   }
 
 .mobius-button:where(.--variant-secondary):where(:active),.mobius-button:where(.--variant-secondary):where(:hover){
       --button-content-color:var(--color-text-inverted);
-      background-color:var(--button-variant-secondary-hover-color);
-      border-color:var(--button-variant-secondary-hover-color);
+      background-color:var(--button-secondary-hover-color);
+      border-color:var(--button-secondary-hover-color);
     }
 
 .mobius-button:where(.--variant-secondary):where(:focus-visible){
@@ -408,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){
@@ -434,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;
@@ -444,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;
   }
 
@@ -467,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{
@@ -505,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{
@@ -674,7 +685,7 @@ a.mobius-button:focus-visible,
 :host,
 ::backdrop{
   --drawer-transition-duration:0;
-  --color-neutral-700:#18181d;
+  --backdrop-color:#18181d;
 }
 
 @media (prefers-reduced-motion: no-preference){
@@ -709,7 +720,7 @@ a.mobius-button:focus-visible,
   }
 
 .mobius-drawer::backdrop{
-    background-color:var(--color-neutral-700);
+    background-color:var(--backdrop-color);
     opacity:0;
     transition:opacity var(--drawer-transition-duration) ease-in-out;
   }
@@ -720,7 +731,7 @@ a.mobius-button:focus-visible,
     right:0;
     bottom:0;
     left:0;
-    background-color:var(--color-neutral-700);
+    background-color:var(--backdrop-color);
     opacity:0.3;
   }
 
@@ -744,9 +755,9 @@ a.mobius-button:focus-visible,
 @supports (height: 100dvh){
 
 .mobius-drawer.--top,.mobius-drawer.--bottom{
-        height:100dvh;
-        max-height:100dvh;
-        padding-bottom:0;
+      height:100dvh;
+      max-height:100dvh;
+      padding-bottom:0;
   }
     }
 
@@ -767,7 +778,7 @@ a.mobius-button:focus-visible,
       max-height:100dvh;
       padding-bottom:0;
   }
-  }
+    }
 
 .mobius-drawer:not(.--should-transition){
     display:none;
@@ -1021,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){
@@ -1122,7 +1133,7 @@ a.mobius-button:focus-visible,
 :host,
 ::backdrop{
   --modal-transition-duration:0;
-  --color-neutral-700:#18181d;
+  --backdrop-color:#18181d;
 }
 
 @media (prefers-reduced-motion: no-preference){
@@ -1163,7 +1174,7 @@ a.mobius-button:focus-visible,
   }
 
 .mobius-modal::backdrop{
-    background-color:var(--color-neutral-700);
+    background-color:var(--backdrop-color);
     opacity:0;
     transition:opacity var(--modal-transition-duration) ease-in-out;
   }
@@ -1174,7 +1185,7 @@ a.mobius-button:focus-visible,
     right:0;
     bottom:0;
     left:0;
-    background-color:var(--color-neutral-700);
+    background-color:var(--backdrop-color);
     opacity:0.3;
   }
 
@@ -1308,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);
@@ -1817,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;
@@ -1862,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{
@@ -2027,7 +2038,7 @@ a.mobius-button:focus-visible,
 
 :root,
 :host{
-  --transition-duration:0.15s;
+  --switch-transition-duration:0.15s;
 }
 
 .mobius-switch{
@@ -2057,7 +2068,7 @@ a.mobius-button:focus-visible,
   right:0;
   bottom:0;
   background-color:var(--color-border);
-  transition:var(--transition-duration);
+  transition:var(--switch-transition-duration);
 }
 
 .mobius-switch__slider:before{
@@ -2069,7 +2080,7 @@ a.mobius-button:focus-visible,
     left:3px;
     bottom:2px;
     background-color:var(--color-background);
-    transition:var(--transition-duration);
+    transition:var(--switch-transition-duration);
   }
 
 .mobius-switch--checked .mobius-switch__slider{
@@ -2262,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);
@@ -2332,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;
   }
@@ -2346,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;
   }
@@ -2386,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);
@@ -2397,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;
   }
@@ -2956,10 +2970,6 @@ svg:not(:host).svg-inline--mobius-icon{
   --color-focus:var(--color-bubblegum-500);
   --color-accent:var(--color-bubblegum-500);
   --color-accent-lighter:var(--color-bubblegum-300);
-  --color-text:var(--color-neutral-700);
-  --color-text-medium:var(--color-neutral-500);
-  --color-text-light:var(--color-neutral-300);
-  --color-text-inverted:var(--color-neutral-100);
   --color-background:var(--color-neutral-100);
   --color-background-light:var(--color-neutral-200);
   --color-background-medium:var(--color-neutral-500);
@@ -3014,10 +3024,63 @@ svg:not(:host).svg-inline--mobius-icon{
   --radius-1:4px;
   --radius-2:8px;
   --transition-standard:160ms ease-in-out;
+  --button-primary-color:var(--color-primary);
+  --button-primary-content-color:var(--color-text-inverted);
+  --button-primary-hover-color:var(--color-primary-hover);
+  --button-secondary-color:var(--color-secondary);
+  --button-secondary-hover-color:var(--color-secondary-hover);
+  --button-border-radius:var(--radius-1);
+  --button-padding-sm:10px var(--size-sm);
+  --button-padding-md:14px var(--size-md);
+  --button-padding-lg:14px var(--size-md);
+  --button-gap:var(--size-xs);
+  --button-primary-font-variation:normal;
+  --color-text:var(--color-neutral-700);
+  --color-text-medium:var(--color-neutral-500);
+  --color-text-light:var(--color-neutral-300);
+  --color-text-inverted:var(--color-neutral-100);
+  --combobox-border-color:#cccccc;
+  --combobox-group-color:var(--color-text);
+  --combobox-group-background-color:#dad6f7;
+  --combobox-selected-background-color:var(--color-primary);
+  --listbox-height:min-content;
+  --listbox-max-height:350px;
+  --listbox-max-height-mobile:240px;
+  --listbox-gap:4px;
+  --option-padding:var(--size-xs) var(--size-lg);
+  --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);
@@ -3027,6 +3090,11 @@ svg:not(:host).svg-inline--mobius-icon{
   --slider-secondary-track-background:var(--color-accent-lighter);
   --slider-secondary-thumb-background:var(--color-accent);
   --thumb-size:20px;
+  --dropdown-menu-max-width:200px;
+  --segment-border:var(--size-border-width) solid var(--color-border-light);
+  --switch-transition-duration:150ms;
+  --table-border-width:1px;
+  --title-decorator-width:8px;
 }
 
 :root{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-core",
-  "version": "7.6.15",
+  "version": "7.7.1",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,7 +26,7 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^5.27.5"
+    "@simplybusiness/mobius": "^5.28.1"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",

package/src/variables.css

@@ -56,12 +56,6 @@
   --color-accent: var(--color-bubblegum-500);
   --color-accent-lighter: var(--color-bubblegum-300);
 
-  /* Text */
-  --color-text: var(--color-neutral-700);
-  --color-text-medium: var(--color-neutral-500);
-  --color-text-light: var(--color-neutral-300);
-  --color-text-inverted: var(--color-neutral-100);
-
   /* Background */
   --color-background: var(--color-neutral-100);
   --color-background-light: var(--color-neutral-200);
@@ -133,10 +127,80 @@
   --radius-1: 4px;
   --radius-2: 8px;
   --transition-standard: 160ms ease-in-out;
+
+  /*** Atoms ***/
+  /* Button */
+  --button-primary-color: var(--color-primary);
+  --button-primary-content-color: var(--color-text-inverted);
+  --button-primary-hover-color: var(--color-primary-hover);
+  --button-secondary-color: var(--color-secondary);
+  --button-secondary-hover-color: var(--color-secondary-hover);
+  --button-border-radius: var(--radius-1);
+  --button-padding-sm: 10px var(--size-sm);
+  --button-padding-md: 14px var(--size-md);
+  --button-padding-lg: 14px var(--size-md);
+  --button-gap: var(--size-xs);
+  --button-primary-font-variation: normal;
+
+  /* Text */
+  --color-text: var(--color-neutral-700);
+  --color-text-medium: var(--color-neutral-500);
+  --color-text-light: var(--color-neutral-300);
+  --color-text-inverted: var(--color-neutral-100);
+
+  /* Combobox */
+  /* --combobox-max-width: 562px; */
+  --combobox-border-color: #cccccc;
+  --combobox-group-color: var(--color-text);
+  --combobox-group-background-color: #dad6f7;
+  --combobox-selected-background-color: var(--color-primary);
+  --listbox-height: min-content;
+  --listbox-max-height: 350px;
+  --listbox-max-height-mobile: 240px;
+  --listbox-gap: 4px;
+  --option-padding: var(--size-xs) var(--size-lg);
+
+  /* Drawer and Modal */
+  --drawer-transition-duration: 200ms;
+  --modal-transition-duration: 0;
+  --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;
@@ -150,4 +214,11 @@
   --slider-secondary-track-background: var(--color-accent-lighter);
   --slider-secondary-thumb-background: var(--color-accent);
   --thumb-size: 20px;
+
+  /* Misc */
+  --dropdown-menu-max-width: 200px;
+  --segment-border: var(--size-border-width) solid var(--color-border-light);
+  --switch-transition-duration: 150ms;
+  --table-border-width: 1px;
+  --title-decorator-width: 8px;
 }