refactor: refactoring form-feedback messages

edx · Aug 10, 2023 · d476ccf · d476ccf
1 parent c0a3227
commit d476ccf
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 50 deletions.
diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss
@@ -57,53 +57,73 @@
 // This loop is modeled after the loop in bootstrap's _forms.scss
 // which calls a mixin, form-validation-state($state, $color, $icon).
 // We make several overrides here for icons and focus states.
-@each $state, $data in $form-validation-states {
-  $color: map-get($data, color);
-  $icon: map-get($data, icon);
-
-  // Do not use validation color for feedback text
-  // Add the validation icon to feedback text
-  .#{$state}-feedback {
-    color: $body-color;
-    font-weight: 400;
-
-    &:before {
-      content: '';
-      background-image: $icon;
-      height: 1rem;
-      width: 1rem;
-      display: inline-block;
-      vertical-align: text-bottom;
-      margin-right: .3em;
-    }
+.valid-feedback {
+  color: var(--pgn-color-body-base);
+  font-weight: 400;
+
+  &:before {
+    content: '';
+    background-image: var(--pgn-other-content-form-feedback-icon-valid);
+    height: var(--pgn-spacing-spacer-base);
+    width: var(--pgn-spacing-spacer-base);
+    display: inline-block;
+    vertical-align: text-bottom;
+    margin-right: .3em;
   }
+}
 
-  // Override focus states, use the standard focus
-  // instead of a generated color.
-  .form-control {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $color;
-      }
-    }
+// Override focus states, use the standard focus
+// instead of a generated color.
+.form-control {
+  .was-validated &:valid, &.is-valid:focus {
+    border-color: var(--pgn-color-form-feedback-valid);
+    box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-valid);
   }
+}
 
-  .custom-select {
-    .was-validated &:#{$state},
-    &.is-#{$state} {
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) $color;
-      }
-    }
+.custom-select {
+  .was-validated &:valid, &.is-valid:focus {
+    border-color: var(--pgn-color-form-feedback-valid);
+    box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-valid);
+  }
+}
+
+// Do not use validation color for feedback text
+// Add the validation icon to feedback text
+.invalid-feedback {
+  color: var(--pgn-color-body-base);
+  font-weight: 400;
+
+  &:before {
+    content: '';
+    background-image: var(--pgn-other-content-form-feedback-icon-invalid);
+    height: var(--pgn-spacing-spacer-base);
+    width: var(--pgn-spacing-spacer-base);
+    display: inline-block;
+    vertical-align: text-bottom;
+    margin-right: .3em;
+  }
+}
+
+// Override focus states, use the standard focus
+// instead of a generated color.
+.form-control {
+  .was-validated &:invalid, &.is-invalid:focus {
+    border-color: var(--pgn-color-form-feedback-invalid);
+    box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-invalid);
+  }
+}
+
+.custom-select {
+  .was-validated &:invalid, &.is-invalid:focus {
+    border-color: var(--pgn-color-form-feedback-invalid);
+    box-shadow: 0 0 0 var(--pgn-size-form-input-width-focus) var(--pgn-color-form-feedback-invalid);
   }
 }
 
 select.form-control {
   background-repeat: no-repeat;
-  background-position: right 1rem center;
+  background-position: right var(--pgn-spacing-spacer-base) center;
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -134,48 +154,48 @@ body {
 }
 
 h1, .h1 {
-  line-height: calc((44 / 16) * 1rem);
+  line-height: calc((44 / 16) * var(--pgn-spacing-spacer-base));
   letter-spacing: -2%;
 
   @media (--max-pgn-size-breakpoint-xs) {
-    line-height: calc((40 / 16) * 1rem);
+    line-height: calc((40 / 16) * var(--pgn-spacing-spacer-base));
   }
 
   .mobile-type & {
-    line-height: calc((40 / 16) * 1rem);
+    line-height: calc((40 / 16) * var(--pgn-spacing-spacer-base));
   }
 }
 
 h2, .h2 {
-  line-height: calc((36 / 16) * 1rem);
+  line-height: calc((36 / 16) * var(--pgn-spacing-spacer-base));
 }
 
 h3, .h3 {
-  line-height: calc((28 / 16) * 1rem);
+  line-height: calc((28 / 16) * var(--pgn-spacing-spacer-base));
 }
 
 h4, .h4 {
-  line-height: calc((24 / 16) * 1rem);
+  line-height: calc((24 / 16) * var(--pgn-spacing-spacer-base));
 }
 
 h5, .h5 {
-  line-height: calc((20 / 16) * 1rem);
+  line-height: calc((20 / 16) * var(--pgn-spacing-spacer-base));
 }
 
 h6, .h6 {
-  line-height: calc((20 / 16) * 1rem);
+  line-height: calc((20 / 16) * var(--pgn-spacing-spacer-base));
 }
 
 .lead {
-  line-height: calc((36 / 16) * 1rem);
+  line-height: calc((36 / 16) * var(--pgn-spacing-spacer-base));
 }
 
 .small {
-  line-height: calc((24 / 16) * 1rem);
+  line-height: calc((24 / 16) * var(--pgn-spacing-spacer-base));
 }
 
 .x-small {
-  line-height: calc((20 / 16) * 1rem);
+  line-height: calc((20 / 16) * var(--pgn-spacing-spacer-base));
 }
 
 p > a[href]:not(.btn),

diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 27 Jul 2023 08:38:40 GMT
+ * Generated on Thu, 10 Aug 2023 08:21:39 GMT
  */
 
 :root {
@@ -195,12 +195,17 @@
   --pgn-color-btn-border-outline-brand: #F2F0EFFF;
   --pgn-color-btn-bg-inverse-warning: #000000FF;
   --pgn-color-btn-bg-warning: #F0CC00FF;
+  --pgn-color-btn-bg-outline-success: #FFFFFFFF;
   --pgn-color-btn-bg-outline-secondary: #FFFFFFFF;
   --pgn-color-btn-bg-inverse-primary: #FFFFFFFF;
+  --pgn-color-btn-bg-outline-primary: #FFFFFFFF;
   --pgn-color-btn-bg-outline-light: #FFFFFFFF;
   --pgn-color-btn-bg-inverse-light: #000000FF;
   --pgn-color-btn-bg-outline-info: #FFFFFFFF;
   --pgn-color-btn-bg-info: #03C7E8FF;
+  --pgn-color-btn-bg-outline-dark: #FFFFFFFF;
+  --pgn-color-btn-bg-outline-danger: #FFFFFFFF;
+  --pgn-color-btn-bg-outline-brand: #FFFFFFFF;
   --pgn-color-btn-text-warning: #000000FF;
   --pgn-color-btn-text-light: #000000FF;
   --pgn-color-btn-text-inverse-info: #03C7E8FF;

diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
@@ -5,6 +5,7 @@
         "inverse-brand": { "value": "{color.white}" }
       },
       "bg": {
+        "outline-brand": { "value": "{color.white}" },
         "inverse-brand": { "value": "{color.brand.500}", "modify": null }
       },
       "border": {

diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json
@@ -1,6 +1,9 @@
 {
   "color": {
     "btn": {
+      "bg": {
+        "outline-danger": { "value": "{color.white}" }
+      },
       "border": {
         "danger": { "value": "transparent" },
         "outline-danger": { "value": "{color.light.300}" }

diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json
@@ -1,6 +1,9 @@
 {
   "color": {
     "btn": {
+      "bg": {
+        "outline-dark": { "value": "{color.white}" }
+      },
       "active": {
         "bg": {
           "inverse-outline-dark": { "value": "{color.white}" }

diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json
@@ -2,6 +2,7 @@
   "color": {
     "btn": {
       "bg": {
+        "outline-primary": { "value": "{color.white}" },
         "inverse-primary": { "value": "{color.white}", "modify": null }
       },
       "border": {

diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json
@@ -1,6 +1,9 @@
 {
   "color": {
     "btn": {
+      "bg": {
+        "outline-success": { "value": "{color.white}" }
+      },
       "border": {
         "outline-success": { "value": "{color.light.300}" }
       },