sebnitu / vrembem / 10102466376

94%

main: 100%

push

github

Apply form-control variables to create a consistent scaling (#1950)

This PR aligns form-controls sizing and scale by applying from-control variables. This allows form-controls to adjust their size based on the `font-size` property. This also removes a lot of previously used variables for controlling form-control size such as padding and line-height.

This is achieved by refactoring the `css.get` function to allow passing undefined properties as long as a fallback is also provided:

```scss
// Example usage
font-size: css.get("button", "font-size", css.get("form-control-font-size"));

// CSS output
font-size: var(--vb-button-font-size, var(--vb-form-control-font-size));
```

In the above example, `--vb-button-font-size` is not defined, but `--vb-form-control-font-size` is so it's value will be used while still allowing overriding the value whenever `--vb-button-font-size` is defined. Applying this methodology to all form-controls also means the size of all form-controls can be set by defining `--vb-form-control-font-size`.

Lastly, this PR fixes root output issues with the `vrembem` package and includes missing root exports in both `base` and `utility` components. When using `vrembem` in a Sass environment, it's important to import all base components before running any root `css.output()` calls. Here's an example of how a manifest might look:

```scss
// Import all base vrembem components.
@use "vrembem/base";

// Import all my custom components and project specific styles.
@use "./global";
@use "./my-component";
...

// Finally, run the root import to output all custom properties that have been set.
@use "vrembem/root";
```

508 of 508 branches covered (100.0%)

Branch coverage included in aggregate %.

2293 of 2293 relevant lines covered (100.0%)

43.94 hits per line