@simplybusiness/theme-core 7.14.21 → 7.14.23

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 7.14.23
+
+### Patch Changes
+
+- Updated dependencies [7ac6357]
+- Updated dependencies [45ddf19]
+  - @simplybusiness/mobius@7.1.0
+
+## 7.14.22
+
+### Patch Changes
+
+- 2ffcbb2: Replace deprecated CSS properties with modern equivalents (clip, word-wrap, grid-row-gap)
+- Updated dependencies [ec27737]
+  - @simplybusiness/mobius@7.0.0
+
 ## 7.14.21
 
 ### Patch Changes

package/dist/index.css

@@ -2549,6 +2549,222 @@ h6.mobius-accordion__link-text,
     background-color:var(--color-primary);
   }
 
+[data-sonner-toaster]{
+  font-family:var(--font-family);
+}
+
+.mobius-toast{
+  position:relative;
+  font-family:var(--font-family);
+  font-size:var(--font-size-regular);
+  line-height:var(--line-height-normal);
+  color:var(--color-text);
+  background-color:var(--color-background);
+  border:2px solid var(--color-border);
+  border-radius:var(--radius-1);
+  box-shadow:var(--shadow-md);
+  padding:var(--size-md);
+  display:flex;
+  align-items:flex-start;
+  gap:var(--size-sm);
+  width:var(--toast-width);
+  max-width:calc(100vw - var(--size-lg) * 2);
+  box-sizing:border-box;
+}
+
+.mobius-toast.--info{
+  border-color:var(--color-info);
+  background-color:var(--color-info-background);
+}
+
+.mobius-toast.--success{
+  border-color:var(--color-valid);
+  background-color:var(--color-valid-background);
+}
+
+.mobius-toast.--warning{
+  border-color:var(--color-warning);
+  background-color:var(--color-warning-background);
+}
+
+.mobius-toast.--error{
+  border-color:var(--color-error);
+  background-color:var(--color-error-background);
+}
+
+.mobius-toast__icon{
+  flex-shrink:0;
+  display:flex;
+  align-items:center;
+  padding-top:2px;
+}
+
+.mobius-toast__icon .mobius-icon{
+  width:1.25em;
+  height:1.25em;
+}
+
+.mobius-toast__body{
+  display:flex;
+  flex-direction:column;
+  gap:var(--size-sm);
+  flex:1;
+  min-width:0;
+  padding-right:var(--size-lg);
+}
+
+.mobius-toast__content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--size-xxs);
+}
+
+.mobius-toast__title{
+  font-size:var(--font-size-regular);
+  font-weight:600;
+  line-height:var(--line-height-normal);
+  color:var(--color-text);
+  margin:0;
+}
+
+.mobius-toast__description{
+  font-size:var(--font-size-regular);
+  line-height:var(--line-height-normal);
+  color:var(--color-text);
+  margin:0;
+}
+
+.mobius-toast__actions{
+  display:flex;
+  justify-content:flex-end;
+  gap:var(--size-xs);
+  flex-wrap:wrap;
+}
+
+.mobius-toast__action,
+.mobius-toast__cancel{
+  font-family:var(--font-family);
+  font-size:var(--font-size-small);
+  font-weight:600;
+  padding:var(--size-xs) var(--size-sm);
+  border-radius:var(--radius-1);
+  cursor:pointer;
+  transition:background-color 0.15s ease;
+  flex-shrink:0;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.mobius-toast__action{
+  background-color:var(--button-primary-color);
+  color:var(--button-primary-content-color);
+  border:none;
+}
+
+.mobius-toast__action:hover{
+  filter:brightness(0.9);
+}
+
+.mobius-toast.--info .mobius-toast__action{
+  background-color:var(--color-info);
+}
+
+.mobius-toast.--success .mobius-toast__action{
+  background-color:var(--color-valid);
+}
+
+.mobius-toast.--warning .mobius-toast__action{
+  background-color:var(--color-warning);
+}
+
+.mobius-toast.--error .mobius-toast__action{
+  background-color:var(--color-error);
+}
+
+.mobius-toast__cancel{
+  background-color:transparent;
+  color:var(--color-text);
+  border:1px solid var(--color-border);
+}
+
+.mobius-toast__cancel:hover{
+  background-color:var(--color-background-hover);
+}
+
+.mobius-toast.--info .mobius-toast__cancel{
+  border-color:var(--color-info);
+  color:var(--color-info);
+}
+
+.mobius-toast.--success .mobius-toast__cancel{
+  border-color:var(--color-valid);
+  color:var(--color-valid);
+}
+
+.mobius-toast.--warning .mobius-toast__cancel{
+  border-color:var(--color-warning);
+  color:var(--color-warning);
+}
+
+.mobius-toast.--error .mobius-toast__cancel{
+  border-color:var(--color-error);
+  color:var(--color-error);
+}
+
+.mobius-toast__close{
+  position:absolute;
+  top:var(--size-md);
+  right:var(--size-sm);
+  background:transparent;
+  border:none;
+  border-radius:var(--radius-1);
+  cursor:pointer;
+  padding:var(--size-xxs);
+  width:var(--size-md);
+  height:var(--size-md);
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--color-text-muted);
+  transition:color 0.15s ease;
+}
+
+.mobius-toast__close:hover{
+  color:var(--color-text);
+}
+
+.mobius-toast__close-icon{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.mobius-toast__close-icon .mobius-icon{
+  width:1.25em;
+  height:1.25em;
+}
+
+.mobius-toast.--info .mobius-toast__close{
+  color:var(--color-info);
+}
+
+.mobius-toast.--success .mobius-toast__close{
+  color:var(--color-valid);
+}
+
+.mobius-toast.--warning .mobius-toast__close{
+  color:var(--color-warning);
+}
+
+.mobius-toast.--error .mobius-toast__close{
+  color:var(--color-error);
+}
+
+.mobius-toast .mobius-toast__close:hover{
+  filter:brightness(0.8);
+}
+
 .mobius-expandable-text__content--collapsed{
   display:-webkit-box;
   -webkit-line-clamp:var(--line-clamp, 3);
@@ -2921,7 +3137,7 @@ svg:not(:host).svg-inline--mobius-icon{
   padding:0;
   margin:-1px;
   overflow:hidden;
-  clip:rect(0, 0, 0, 0);
+  clip-path:inset(50%);
   white-space:nowrap;
   border-width:0;
 }
@@ -2934,7 +3150,7 @@ svg:not(:host).svg-inline--mobius-icon{
   padding:0;
   margin:-1px;
   overflow:hidden;
-  clip:rect(0, 0, 0, 0);
+  clip-path:inset(50%);
   white-space:nowrap;
   border-width:0;
 }
@@ -3175,6 +3391,7 @@ svg:not(:host).svg-inline--mobius-icon{
   --popover-z-index:2147483647;
   --color-background-popover:var(--color-azure-700);
   --color-text-popover:#fff;
+  --toast-width:450px;
   --slider-primary-track-background:var(--color-primary-lighter);
   --slider-primary-thumb-background:var(--color-primary);
   --slider-secondary-track-background:var(--color-accent-lighter);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-core",
-  "version": "7.14.21",
+  "version": "7.14.23",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -28,7 +28,7 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^6.10.5"
+    "@simplybusiness/mobius": "^7.1.0"
   },
   "devDependencies": {
     "@simplybusiness/build-scripts": "^1.2.2"

package/src/icons.css

@@ -358,7 +358,7 @@ svg:not(:host).svg-inline--mobius-icon {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
 }
@@ -371,7 +371,7 @@ svg:not(:host).svg-inline--mobius-icon {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
 }

package/src/index.css

@@ -35,6 +35,7 @@
 @import "@simplybusiness/mobius/src/components/TextArea/TextArea.css";
 @import "@simplybusiness/mobius/src/components/TextField/TextField.css";
 @import "@simplybusiness/mobius/src/components/Title/Title.css";
+@import "@simplybusiness/mobius/src/components/Toast/Toast.css";
 @import "@simplybusiness/mobius/src/components/ExpandableText/ExpandableText.css";
 
 @import "./icons.css"; /* Placing this at the top affects specificity */

package/src/variables.css

@@ -223,7 +223,8 @@
   --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-light);
+  --radio-label-border: var(--radio-border-width) solid
+    var(--color-primary-light);
   --radio-label-align-items: center;
   --radio-label-background: var(--color-background-input);
   --radio-label-background-disabled: var(--color-background-light);
@@ -257,6 +258,9 @@
   --color-background-popover: var(--color-azure-700);
   --color-text-popover: #fff;
 
+  /* Toast */
+  --toast-width: 450px;
+
   /* Slider */
   --slider-primary-track-background: var(--color-primary-lighter);
   --slider-primary-thumb-background: var(--color-primary);