[UI] Auth pages and input (#9870)

NuGet · May 22, 2024 · 94650f8 · 94650f8
1 parent be83d73
commit 94650f8
Show file tree

Hide file tree

Showing 20 changed files with 241 additions and 70 deletions.
diff --git a/src/Bootstrap/dist/css/bootstrap-theme.css b/src/Bootstrap/dist/css/bootstrap-theme.css
diff --git a/src/Bootstrap/dist/css/bootstrap.css b/src/Bootstrap/dist/css/bootstrap.css
diff --git a/src/Bootstrap/less/forms.less b/src/Bootstrap/less/forms.less
@@ -335,7 +335,8 @@ output {
   }
 }
 
-textarea.textarea-brand {
+textarea.textarea-brand,
+input.input-brand {
   color: var(--neutralForeground1Rest);
   background-color: var(--neutralBackground1Rest);
   border-radius: 4px;
@@ -357,6 +358,10 @@ textarea.textarea-brand {
     border-bottom: 2px solid var(--brandStrokeCompoundRest);
   }
 
+  &[aria-invalid='true'] {
+    border-color: var(--statusDangerStroke2Rest);
+  }
+
   &[disabled] {
     background-color: transparent;
     color: var(--neutralForegroundDisabledRest);
@@ -383,7 +388,7 @@ textarea.textarea-brand {
     &:-ms-input-placeholder { color: var(--neutralForeground1Rest); } // Internet Explorer 10+
     &::-webkit-input-placeholder  { color: var(--neutralForeground1Rest); } // Safari and Chrome
   }
-
+  
   // Firefox
   &::-moz-placeholder {
     color: var(--neutralForeground4Rest);
@@ -636,6 +641,43 @@ textarea.textarea-brand {
 .has-error {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
+.has-error-brand {
+  .form-control-validation-brand();
+}
+
+.form-control-validation-brand {
+  // Color the label and help text
+  .help-block,
+  .control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  &.radio label,
+  &.checkbox label,
+  &.radio-inline label,
+  &.checkbox-inline label  {
+    color: var(--statusDangerForeground1Rest);
+  }
+  // Set the border and box shadow on specific inputs to match
+  .form-control {
+    border-color: var(--statusDangerStroke2Rest);
+    &:focus {
+      border-color: var(--statusDangerStroke2Rest);
+    }
+  }
+  // Set validation states also for addons
+  .input-group-addon {
+    color: var(--statusDangerForeground3Rest);
+    background-color: var(--statusDangerBackground1Rest);
+    border-color: var(--statusDangerStroke2Rest);
+  }
+  // Optional feedback icon
+  .form-control-feedback {
+    color: var(--statusDangerForeground3Rest);
+  }
+}
+
 
 // Reposition feedback icon if input has visible label above
 .has-feedback label {
@@ -812,4 +854,4 @@ textarea.textarea-brand {
       }
     }
   }
-}
+}
diff --git a/src/Bootstrap/less/panels.less b/src/Bootstrap/less/panels.less
@@ -8,10 +8,11 @@
 // Base class
 .panel {
   margin-bottom: @line-height-computed;
-  background-color: @panel-bg;
-  border: 1px solid transparent;
-  border-radius: @panel-border-radius;
-  .box-shadow(0 1px 1px rgba(0, 0, 0, .05));
+  background-color: transparent;
+
+  border-radius: var(--X-Large, 8px);
+  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
+  background-color: var(--neutralBackground1Rest);
 }
 
 // Panel contents

diff --git a/src/Bootstrap/less/theme/base.less b/src/Bootstrap/less/theme/base.less
@@ -356,6 +356,10 @@ body {
   }
 }
 
+a {
+  color: var(--brandForegroundLinkRest);
+}
+
 .alert-transient-jumbotron {
   background: transparent;
 }
@@ -604,4 +608,5 @@ body[id="/"] {
   margin: 0;
   background-repeat: no-repeat;
   background-attachment: fixed;
+  color: var(--neutralForeground1Rest)
 }
diff --git a/src/Bootstrap/less/theme/modals.less b/src/Bootstrap/less/theme/modals.less
@@ -12,7 +12,7 @@
 
   .modal-box {
     border-radius: 8px;
-    background-color: white;
+    background-color:  var(--neutralBackground2Rest);;
     margin-left: auto;
     margin-right: auto;
     min-height: 364px;
@@ -23,8 +23,8 @@
     padding: 0px;
 
     .modal-title {
-      background-color: #4181B8;
-      color: white;
+      background-color: var(--brandBackgroundStatic);
+      color: var(--neutralForegroundStaticInvertedRest);
       padding:  15px;
 
       .dismiss-button {
@@ -41,7 +41,7 @@
       font-size: 14px;
 
       .tag-node {
-        background-color: @info-bg;
+        background-color: var(--statusGenericMarigoldBackground2Rest);
         padding: 13px; 
         text-align: left;
 

diff --git a/src/Bootstrap/less/theme/themes.less b/src/Bootstrap/less/theme/themes.less
@@ -10,7 +10,7 @@
     /* brand tokens have been swapped to use blues from the .NET brand colors */
 
     /* Brand Background Static */
-    --brandBackgroundStatic: var(--dotnetBluePrimary, #0b6cff);
+    --brandBackgroundStatic: var(--dotnetBluePrimary, #0f6cbd);
 
     /* Brand Background 1 */
     --brandBackground1Rest: var(--dotnetBluePrimary, #0b6cff);
@@ -415,7 +415,7 @@
     /* brand tokens have been swapped to use blues from the .NET brand colors */
 
     /* Brand Background Static */
-    --brandBackgroundStatic: var(--dotnetBluePrimary, #0b6cff);
+    --brandBackgroundStatic: var(--dotnetBluePrimary, #0f6cbd);
 
     /* Brand Background 1 */
     --brandBackground1Rest: var(--dotnetBlueShade10, #0956cc);