@simplybusiness/theme-core 7.6.15 → 7.7.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 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){
@@ -674,7 +672,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 +707,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 +718,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 +742,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 +765,7 @@ a.mobius-button:focus-visible,
       max-height:100dvh;
       padding-bottom:0;
   }
-  }
+    }
 
 .mobius-drawer:not(.--should-transition){
     display:none;
@@ -1122,7 +1120,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 +1161,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 +1172,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;
   }
 
@@ -2027,7 +2025,7 @@ a.mobius-button:focus-visible,
 
 :root,
 :host{
-  --transition-duration:0.15s;
+  --switch-transition-duration:0.15s;
 }
 
 .mobius-switch{
@@ -2057,7 +2055,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 +2067,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{
@@ -2956,10 +2954,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 +3008,42 @@ 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-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);
   --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;
   --popover-max-width:260px;
   --popover-z-index:2147483647;
   --color-background-popover:var(--color-azure-700);
@@ -3027,6 +3053,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.0",
   "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.0"
   },
   "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,54 @@
   --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-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);
   --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;
 
   /* Popover */
   --popover-max-width: 260px;
@@ -150,4 +188,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;
 }