Elements

The directory at /src/styles/elements may look sparse at the moment, but rest assured we will be looking to add to this section of the Design System as we move forward with Elentra JS 2.0.

_elements.scss

The last thing that app.scss does is load in _elements.scss, which then imports the other SCSS partials which reside in styles/elements. Currently there is only one, anchor.scss.

These partials will in most cases pertain to HTML elements, and exist to define additional variables that are specific to the element in question, often making use of existing Elentra JS Design System variables.

A good example of this would be a proposed _input.scss. The most common text-based inputs are textarea and input[type="text"], but in most cases, the appearance of these inputs (border and border radius, focus state, etc.) should be consistent. What _input.scss would do is define new variables based on the Elentra JS Design System variables that are most appropriate:

_input.scss (Example)

:root {

    /* --- Input: --- */
    --ejs-element-input-border--weight:  var(--ejs-border-width---d);
    --ejs-element-input-border--radius:  var(--ejs-border-radius---d);

}

/* --- Input: --- */
$ejs-element-input-border--weight:    var(--ejs-element-input-border--weight);
$ejs-element-input-border--radius:    var(--ejs-element-input-border--radius);

With these in place, any new components that need to be custom built that include a text-based input field can utilize these mapped variables. The primary benefit of this process is that now, if it is decided at a later date that the appearance of all text based inputs must change, we can modify these rules in _input.scss, and it will cascade to all of those inputs, without the need to modify the root variables,--ejs-border-width---d or --ejs-border-radius---d, which may cause unintended visual changes elsewhere.