chore: add lumos colour for new momentum style input (#1832)

momentum-design · Nov 20, 2024 · 9f35794 · 9f35794
1 parent 84d1125
commit 9f35794
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 13 deletions.
diff --git a/web-components/src/[sandbox]/examples/input.ts b/web-components/src/[sandbox]/examples/input.ts
@@ -260,6 +260,7 @@ export const inputTemplate = html`
     </div>
   </section>
   <md-input
+    newMomentum
     label="Success"
     htmlId="inputSuccess"
     containerSize="small-12"
@@ -268,6 +269,7 @@ export const inputTemplate = html`
     placeholder="Enter Text"
   ></md-input>
   <md-input
+    newMomentum
     label="Warning"
     htmlId="inputWarning"
     containerSize="small-12"
@@ -276,6 +278,7 @@ export const inputTemplate = html`
     placeholder="Enter Text"
   ></md-input>
   <md-input
+    newMomentum
     label="Error"
     htmlId="inputError"
     containerSize="small-12"

diff --git a/web-components/src/components/input/scss/input.scss b/web-components/src/components/input/scss/input.scss
@@ -148,7 +148,6 @@
 
       &:focus {
         @include focus-styles($border-color: var(--input-error-focus-border-color, $md-red-50));
-
         transition: border ease-in 0.15s;
       }
 
@@ -255,7 +254,7 @@
         &:focus {
           outline: 2px solid var(--input-default-outline-color);
           outline-offset: rem-calc(2);
-          box-shadow: none; 
+          box-shadow: none;
         }
 
         &--pill {
@@ -271,43 +270,66 @@
           }
         }
       }
-      
+
       .md-input__messages {
         padding-left: 0;
       }
 
       // Error
       &.md-error {
         @include input-color(
+          $background-color: var(--input-error-bg-color, $md-red-10),
+          $background-color-hover: var(--input-error-hover-bg-color, $md-red-20),
           $border-color: var(--input-error-border-color),
           $border-color-active: var(--input-error-border-color),
+          $background-color-active: var(--input-error-pressed-bg-color),
+          $color-message: var(--input-error-message-text-color),
+          $focus-background-color: var(--input-default-focus-background-color, var(--input-error-bg-color))
         );
-  
+
         &:focus {
           @include focus-styles($border-color: var(--input-error-focus-border-color));
-
           transition: border ease-in 0.15s;
         }
-
       }
 
       // Warning
       &.md-warning {
         @include input-color(
+          $background-color:
+            var(--input-warning-bg-color, var(--md-alert-warning-bg-color, $input__background--warning)),
+          $background-color-hover:
+            var(--input-warning-hover-bg-color, var(--md-alert-warning-bg-color, $input__background--warning)),
+          $background-color-active:
+            var(--input-warning-pressed-bg-color, var(--md-alert-warning-bg-color, $input__background--warning)),
           $border-color:
-            var(--input-warning-border-color),
+            var(--input-warning-border-color, var(--input-warning-border-color, $input__border-color--warning)),
           $border-color-active:
-            var(--input-warning-border-color),
+            var(--input-warning-border-color, var(--input-warning-border-color, $input__border-color--warning)),
+          $color-message:
+            var(--input-success-text-color, var(--md-alert-warning-text-color, $input__message__font-color--warning)),
+          $focus-background-color:
+            var(--input-warning-pressed-bg-color, var(--md-alert-warning-bg-color, $input__background--warning))
         );
       }
-  
+
       // Success
       &.md-success {
         @include input-color(
+          $background-color:
+            var(--input-success-bg-color, var(--md-alert-success-bg-color, $input__background--success--hover)),
+          $background-color-hover:
+            var(--input-success-hover-bg-color, var(--md-alert-success-bg-color, $input__background--success--hover)),
+          $background-color-active:
+            var(--input-success-pressed-bg-color, var(--md-alert-success-bg-color, $input__background--success)),
           $border-color:
-            var(--input-success-border-color),
+            var(--input-success-border-color, var(--input-success-border-color, $input__border-color--success)),
           $border-color-active:
-            var(--input-success-border-color)
+            var(--input-success-border-color, var(--input-success-border-color, $input__border-color--success)),
+          $color-message:
+            var(--input-success-text-color, var(--md-success-text-color, $input__message__font-color--success)),
+          $focus-background-color:
+            var(--input-success-pressed-bg-color, var(--md-alert-success-bg-color, $input__background--success))
         );
       }
 

diff --git a/web-components/src/components/input/tokens/lm-input-tokens.js b/web-components/src/components/input/tokens/lm-input-tokens.js
@@ -59,6 +59,20 @@ const input = {
         light: colors.blue[70].name,
         dark: colors.blue[40].name
       }
+    },
+    new: {
+      "border-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[80].name
+      },
+      "focus-border-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[80].name
+      },
+      "disabled-color": {
+        light: colors.gray[20].name,
+        dark: colors.gray[90].name
+      }
     }
   },
   disabled: {
@@ -104,7 +118,7 @@ const input = {
   success: {
     "border-color": {
       light: colors.green[50].name,
-      dark: colors.blue[40].name
+      dark: colors.green[40].name
     }
   },
   warning: {

diff --git a/web-components/src/components/input/tokens/md-input-tokens.js b/web-components/src/components/input/tokens/md-input-tokens.js
@@ -49,6 +49,20 @@ const input = {
         light: colors.gray[30].name,
         dark: colors.gray[70].name
       }
+    },
+    new: {
+      "border-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[80].name
+      },
+      "focus-border-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[80].name
+      },
+      "disabled-color": {
+        light: colors.gray[20].name,
+        dark: colors.gray[90].name
+      }
     }
   },
   disabled: {
@@ -94,7 +108,7 @@ const input = {
   success: {
     "border-color": {
       light: colors.green[50].name,
-      dark: colors.blue[40].name
+      dark: colors.green[40].name
     }
   },
   warning: {