Switchable borders for fields with the 11.1.36 theming-base-content

Version 11.1.36 of the @sap-theming/theming-base-content introduced two new sets of parameters:

• @sapField_BackgroundStyle that should be used for the CSS background shorthand property (as well as @sapField_InvalidBackgroundStyle and others for different states), and
• @sapField_BorderStyle for the CSS border-style property (also @sapField_InvalidBorderStyle etc).

These two sets of parameters allow fields to be prepared to switch between a “bottom” border, which is implemented using the BackgroundStyle-parameters, and a border around the whole control, toggled with the BorderStyle-parameters.

You can use those two sets of parameters in your own technology stack by using them as CSS custom properties (from the css_variables.css file), or as Less or Sass variables (from less_variables.less or sass_variables.scss).

This post describes

• how you can map the parameters in your field controls, and
• how switchable borders are achieved with carefully crafted parameter values in the theming-base-content.

Mapping the parameters

From a control developer perspective, mapping the parameters is straightforward: map all the parameters you can get a hold of and the values from theming-base-content should do the rest.

A field implementation just for regular and invalid fields (without hover/focus states etc.) could look like this:

input {
  /* parameters to describe border and background */
  background: var(--sapField_BackgroundStyle);
  /*
   * make sure to define background-color after background, otherwise the
   * shorthand will overwrite the background-color with a default
   */
  background-color: var(--sapField_Background);
  border-style: var(--sapField_BorderStyle);
  border-width: var(--sapField_BorderWidth);
  border-color: var(--sapField_BorderColor);
  /* additional parameters to make an <input> look like a Fiori field */
  appearance: none;
  margin: calc((var(--sapElement_LineHeight) - var(--sapElement_Height)) / 2) 0;
  padding: 0 .75rem;
  line-height: var(--sapElement_Height);
  border-radius: var(--sapField_BorderCornerRadius);
  font-family: var(--sapFontFamily);
  font-size: var(--sapFontSize);
}
input:invalid {
  /* invalid (and other state) fields have to apply all background/border parameters */
  background: var(--sapField_InvalidBackgroundStyle);
  background-color: var(--sapField_InvalidBackground);
  border-width: var(--sapField_InvalidBorderWidth);
  border-style: var(--sapField_InvalidBorderStyle);
  border-color: var(--sapField_InvalidColor);
}

Switching between borders

With that setup, a BorderStyle=none would disable the border, leaving only the background active. On the other hand, a BackgroundStyle=none would remove the background-image, leaving a border intact.

Therefore, for all themes prior to SAP Horizon, the BackgroundStyle parameters are all set to none, but the BorderStyle parameters are set to solid. However for SAP Horizon the parameters are created like

@sapField_BorderStyle: none;
@sapField_BackgroundStyle: 0 100% / 100% .0625rem no-repeat linear-gradient(0deg, #556b81, #556b81) border-box;

Where the background is a shorthand for

background-position: 0 100%;
background-size: 100% 0.0625rem;
background-repeat: no-repeat;
background-image: linear-gradient(0deg, #556b81, #556b81);
background-origin: border-box;

This allows to easily switch between a bottom border and a four-sided border by simply setting

• all BorderStyle-parameters to solid (for a four-sided border) or none (for the bottom border), and
• all BackgroundStyle-parameters to none (for a four-sided border) or the carefully crafted value above (for the bottom border)

Conclusion

This goes to show that if you map all theming parameters, especially sapField_BorderStyle and sapField_BackgroundStyle (and their counterparts for different states), you are easily able to achieve switchable borders with just different parameter values.

Try it out in your own components and let me know how it worked in the comments!