@inmotionnow/momentum-components 101.6.2 → 101.7.0

package/dist/src/2_base/_themes/_inmo-light.css

@@ -23,6 +23,7 @@
   );
   --mds-t-background-color--danger: var(--mds-t-color--red);
   --mds-t-background-color--danger-muted: var(--mds-t-color--red-muted);
+  --mds-t-background-color--changes-muted: var(--mds-t-color--orange-muted);
   --mds-t-background-color--overlay: var(--mds-d-background-color--overlay);
   --mds-t-background-color--inverse-overlay: var(
     --mds-d-background-color--inverse-overlay
@@ -39,6 +40,7 @@
   );
   --mds-t-border-color--accent: var(--mds-d-border-color--accent);
   --mds-t-border-color--danger: var(--mds-t-color--red);
+  --mds-t-border-color--changes: var(--mds-t-color--orange);
 
   /* Status */
   --mds-t-color--neutral-intense: var(--mds-d-color-slate--900);

package/dist/src/3_components/button/button.css

@@ -290,6 +290,20 @@
     }
   }
 
+  &.mds-has-changes {
+    --mds-v-button__background-color: var(--mds-t-background-color--changes-muted);
+    --mds-v-button__background-color--hover: var(--mds-t-background-color--changes-muted);
+    --mds-v-button__background-color--active: var(--mds-t-background-color--changes-muted);
+    --mds-v-button__border-color: var(--mds-t-color--orange);
+    --mds-v-button__border-color--hover: var(--mds-t-color--orange);
+    --mds-v-button__border-color--active: var(--mds-t-color--orange);
+    --mds-v-button__color: var(--mds-t-text-color--primary);
+    --mds-v-button__color--hover: var(--mds-t-text-color--primary);
+    --mds-v-button__color--active: var(--mds-t-text-color--primary);
+    
+    border: 1px solid var(--mds-t-color--orange);    
+  }
+
   &.mds-has-warning {
     --mds-v-button__background-color: transparent;
     --mds-v-button__background-color--hover: transparent;

package/dist/src/3_components/control/mixins.css

@@ -53,6 +53,10 @@
     --mds-v-control__placeholder-color: var(--mds-t-text-color--danger);
   }
 
+  &.mds-has-changes:not(:focus) {
+    --mds-v-control__color: var(--mds-t-text-color--changes);    
+  }
+
   &:focus,
   &:focus-within,
   &:focus-visible {
@@ -92,6 +96,12 @@
     --mds-v-control__border-color: var(--mds-t-border-color--danger);
   }
 
+  &.mds-has-changes {
+    box-shadow: var(--mds-v-control__border), var(--mds-v-control__shadow);
+    
+    --mds-v-control__border-color: var(--mds-t-border-color--changes);
+  }
+
   &:focus,
   &:focus-visible,
   &:focus-within {
@@ -109,6 +119,10 @@
     box-shadow: none;
   }
 
+  &.mds-has-changes {
+    box-shadow: none;
+  }
+
   &:focus,
   &:focus-visible,
   &:focus-within {
@@ -140,6 +154,12 @@
     background-color: var(--mds-t-background-color--danger-muted) !important;
   }
 
+  &.mds-has-changes:not(:focus) {
+    --mds-v-control__border-color: var(--mds-t-border-color--changes) !important;
+
+    background-color: var(--mds-t-background-color--changes-muted) !important;
+  }
+
   &:focus,
   &:focus-visible,
   &:focus-within {

package/dist/src/3_components/control-group/control-group.css

@@ -21,6 +21,10 @@
   }
 }
 
+.mds-c-control-group-has-changes {
+  background-color: var(--mds-t-background-color--changes-muted);  
+}
+
 .mds-c-control-group--inline {
   display: grid;
   grid-column-gap: var(--mds-d-spacing--med);

package/dist/src/3_components/fieldset/fieldset.css

@@ -50,6 +50,11 @@
     .mds-has-error & {
       border-color: var(--mds-t-border-color--danger);
     }
+
+    .mds-has-changes & {
+      background-color: var(--mds-t-background-color--changes-muted);
+      border-color: var(--mds-t-border-color--changes)
+    }
   }
 
   &__help-text {
@@ -67,3 +72,4 @@
     }
   }
 }
+

package/dist/src/3_components/text/text.css

@@ -124,4 +124,8 @@
     font-weight: var(--mds-d-font-weight--normal);
     text-decoration: line-through !important; /* Override hover styles inside mds-is-clickable areas */
   }
+
+  &.mds-has-changes {
+    --mds-v-button__background-color: var(--mds-t-background-color--changes-muted);
+  }
 }

package/dist/src/3_components/toggle/toggle.css

@@ -24,6 +24,7 @@
   transition: color 0.1s ease-out;
   user-select: none;
   vertical-align: top;
+  
 
   &--cursor {
     &-default {
@@ -44,7 +45,7 @@
     opacity: 0.4;
     pointer-events: none;
   }
-
+  
   input {
     @mixin mds-m-screenreader-text;
 
@@ -104,8 +105,7 @@
     --color: var(--mds-v-toggle__bubble-color);
     --border-color: var(--mds-v-toggle__bubble-background--primary);
     --box-shadow: 0 0 0 2px var(--border-color) inset;
-
-    background-color: var(--background-color, transparent);
+    
     background-position: center;
     background-size: calc(var(--mds-v-toggle__size) * 0.8);
     box-shadow: var(--box-shadow);
@@ -131,6 +131,7 @@
   }
 }
 
+
 /* ==========================================================================
  * Toggle - Blocked
  * ========================================================================== */
@@ -155,12 +156,21 @@
 
   border-radius: var(--mds-d-border-radius--default);
 
+  .mds-has-changes & {
+    --border-color: var(--mds-t-border-color--primary);
+  }
+
+  &:not(input:checked) {
+    background-color: var(--mds-t-background-color--primary);
+  }
+
   input:checked + & {
+    background-color: var(--mds-v-toggle__bubble-background--active);
     background-image: svg-load(
       '../../momentum-icons/dist/svg/check.svg',
       fill: #fff
     );
-  }
+  }  
 }
 
 /* ==========================================================================
@@ -234,7 +244,13 @@
 
   border-radius: 50%;
 
+  .mds-has-changes & {
+    --border-color: var(--mds-t-border-color--primary);
+  }
+
   input:checked + & {
+    --box-shadow: 0 0 0 4px var(--border-color) inset;
+    
     &::after {
       background-color: var(--mds-v-toggle__bubble-color);
       border-radius: 50%;
@@ -248,6 +264,10 @@
       width: 50%;
     }
   }
+
+  :not(input:checked) + & {
+    background-color: var(--mds-t-background-color--primary);
+  }
 }
 
 /* ==========================================================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inmotionnow/momentum-components",
-  "version": "101.6.2",
+  "version": "101.7.0",
   "description": "CSS Components for inMotionNow",
   "license": "UNLICENSED",
   "files": [
@@ -26,5 +26,5 @@
     "flatpickr": "3.0.7",
     "focus-visible": "4.1.5"
   },
-  "gitHead": "adef5da14be2874dd0a75217d06585b95aebd368"
+  "gitHead": "4851e51fa2990d1477b1685d51c16cbc474ce618"
 }