fix: add delta theming for Forms (#1996)

* forms input * inputs * forms message
SAP · Jan 4, 2021 · 5ba3859 · 5ba3859
1 parent fbc6e2e
commit 5ba3859
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 1 deletion.
diff --git a/src/form-message.scss b/src/form-message.scss
@@ -19,7 +19,8 @@ $block: #{$fd-namespace}-form-message;
   line-height: normal;
   color: var(--sapTextColor);
   white-space: pre-line !important;
-  box-shadow: var(--sapContent_Shadow1);
+  box-shadow: var(--fdMessage_Box_Shadow);
+  border: var(--fdMessage_Border);
 
   @include fd-rtl() {
     right: 0;

diff --git a/src/mixins/_forms.scss b/src/mixins/_forms.scss
@@ -27,6 +27,8 @@
   &.is-error {
     background-color: var(--sapField_InvalidBackground);
     border-color: var(--sapField_InvalidColor);
+    font-style: var(--fdInput_State_Text_Style);
+    font-weight: var(--fdInput_State_Font_Weight);
 
     @include fd-hover() {
       background-color: var(--sapField_InvalidBackground);
@@ -38,6 +40,8 @@
   &.is-alert {
     background-color: var(--sapField_WarningBackground);
     border-color: var(--sapField_WarningColor);
+    font-style: var(--fdInput_State_Text_Style);
+    font-weight: var(--fdInput_State_Font_Weight);
 
     @include fd-hover() {
       background-color: var(--sapField_WarningBackground);
@@ -68,6 +72,7 @@
   &.is-information,
   &.is-error {
     border-width: $fd-form-border-thick-width;
+    border-style: var(--fdInput_State_Border_Type);
 
     @include fd-focus() {
       box-shadow: none;

diff --git a/src/theming/sap_fiori_3.scss b/src/theming/sap_fiori_3.scss
@@ -101,6 +101,14 @@
 
   /* Input */
   --fdInput_Text_Shadow: none;
+  --fdInput_State_Text_Style: normal;
+  --fdInput_State_Font_Weight: normal;
+  --fdInput_State_Border_Type: solid;
+  --fdPlaceholder_Text_Style: normal;
+
+  /* Form Message */
+  --fdMessage_Box_Shadow: var(--sapContent_Shadow1);
+  --fdMessage_Border: none;
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;

diff --git a/src/theming/sap_fiori_3_dark.scss b/src/theming/sap_fiori_3_dark.scss
@@ -101,6 +101,13 @@
 
   /* Input */
   --fdInput_Text_Shadow: none;
+  --fdInput_State_Text_Style: normal;
+  --fdInput_State_Font_Weight: normal;
+  --fdInput_State_Border_Type: solid;
+
+  /* Form Message */
+  --fdMessage_Box_Shadow: var(--sapContent_Shadow1);
+  --fdMessage_Border: none;
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;

diff --git a/src/theming/sap_fiori_3_hcb.scss b/src/theming/sap_fiori_3_hcb.scss
@@ -101,6 +101,13 @@
 
   /* Input */
   --fdInput_Text_Shadow: 0 0 0.125rem #000;
+  --fdInput_State_Text_Style: italic;
+  --fdInput_State_Font_Weight: bold;
+  --fdInput_State_Border_Type: dashed;
+
+  /* Form Message */
+  --fdMessage_Box_Shadow: none;
+  --fdMessage_Border: calc(2 * var(--sapField_BorderWidth)) solid var(--sapField_BorderColor);
 
   /* Calendar */
   --fdCalendar_Text_Shadow: 0 0 0.125rem #000;

diff --git a/src/theming/sap_fiori_3_hcw.scss b/src/theming/sap_fiori_3_hcw.scss
@@ -101,6 +101,13 @@
 
   /* Input */
   --fdInput_Text_Shadow: none;
+  --fdInput_State_Text_Style: italic;
+  --fdInput_State_Font_Weight: bold;
+  --fdInput_State_Border_Type: dashed;
+
+  /* Form Message */
+  --fdMessage_Box_Shadow: none;
+  --fdMessage_Border: calc(2 * var(--sapField_BorderWidth)) solid var(--sapField_BorderColor);
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;

diff --git a/src/theming/sap_fiori_3_light_dark.scss b/src/theming/sap_fiori_3_light_dark.scss
@@ -101,6 +101,13 @@
 
   /* Input */
   --fdInput_Text_Shadow: none;
+  --fdInput_State_Text_Style: normal;
+  --fdInput_State_Font_Weight: normal;
+  --fdInput_State_Border_Type: solid;
+
+  /* Form Message */
+  --fdMessage_Box_Shadow: var(--sapContent_Shadow1);
+  --fdMessage_Border: none;
 
   /* Calendar */
   --fdCalendar_Text_Shadow: none;