WIP:No possibility to add steps in terms of typography and spacing scaling

[poziomapl]

When I create a scale for typography or spacing, there are 7 defined values, from 2xs to 2xl. Shouldn’t there be an option to add more values up and down? The lack of this limits the scaling possibilities, as is the case in many systems.

Just add a plus icon at the top and bottom, which will add new rows and generate new values. Both negative and positive, as you can see in the image below:

Maybe it’s not so much a bug as an improvement… but
Possibility to change the step value within the minimum and maximum scale

It is also worth mentioning the option that allows us to edit individual anchor points, such as the minimum and maximum pixel values for a specific step.

A given scale does not always give us the flexibility we need for a specific font. (and we know that they can be really different…) So we have to adjust these values ourselves…

For example, based on the final values given by Figma.

The ability to manually enter the scale for individual steps would be great!

Because, unfortunately, the type scale ratio is not always good.

And unfortunately, generating this through typography scale throws these values into variables. And there we have clamp rules with rem and calculations, so it is not easy to adapt it to our project afterwards.

Here I have described typography issues, but the same applies to spacing.

Here’s how this could be implemented in the current view:

Using variables to render clamp rules

An even better option would be to add a base font size here: e.g., as a value of 10/16px (or whatever someone wants).

And adding to the minimum and maximum viewport as variables that are ultimately generated/rendered in the clamp rule…

Then we could change these values in the settings at any time and the sizes would update themselves.

Unfortunately, this is not possible now, because if we change these values for the minimum and maximum viewport width once, or change the base font, we have to regenerate all the rules for typography from scratch.

Then we would have a CSS rule that is very easy to edit and very flexible. Here is an example of what I have been using so far:

:root {
  --f-3xs: calc(var(--f-s) * 0.512);
  --f-2xs: calc(var(--f-s) * 0.64);
  --f-xs: calc(var(--f-s) * 0.8);
  --f-s: clamp(calc(1rem * (16 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((20 - 16) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (16 / var(--base-font)))) + (((20 - 16) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (20 / var(--base-font))));
  --f-m: calc(var(--f-s) * 1.25);
  --f-l: calc(var(--f-s) * 1.563);
  --f-xl: calc(var(--f-s) * 1.953);
  --f-2xl: calc(var(--f-s) * 2.441);
  --f-3xl: calc(var(--f-s) * 3.052);
  --f-4xl: calc(var(--f-s) * 3.815);
}

[timmse]

Hi Natan,
Thanks so much for your report/improvement suggestions!

@poziomapl

Shouldn’t there be an option to add more values up and down?

Maybe, but that’d be an improvement and not a bug, so I’ll move this thread to the improvements category. Currently, you can add a custom scale and add as many steps as you want.

Overall, let’s see if we get more feedback on this to get a better picture of user needs (which vary).

[poziomapl]

Okay, indeed. Now I see that it is possible to change the custom settings.

Somehow, I didn’t think to click there…

Anyway, it’s cool that this option is available. But the question is, is there a chance to change the values manually? Or to have it as a panel that not only generates variables, but also gives us a fixed fluid typography option that we can reopen and edit the min and max values for.

Sometimes, while working on a project, we find that we want to change the size of the entire typography. And here, we only get a tool that allows us to regenerate all the values for the variables.

It would be nice if Style Manager was a place that allowed us to edit these values for scale and typography (i.e., min and max for each step) from this level and automatically update them for the entire design system in our project.

[simon]

Agreed, I already asked for min and max value entering Allow entry of min and max pixel sizes for a fluid typography step

[Andris]

Thank you for this thread. I also missed the custom scale type, but thanks to @timmse I was able to add more elements to the list (3xl, 4xl, etc).

Having manual options would be great but for now it is enough for me to start replacing Core Framework.

[DanielShuster96]

Agreed. Even if we can add custom values, still it’s better just to add a little anchor with a plus sign.

[Matej]

Hi guys,

Just to let you know that I’ve recorded the improvement in our task tracker, and it should be implemented when the stable version is released.

Thank you,
Matej

[sinanisler]

I will drop my feedback here since it is related.
min max and viewport min max precision not possible with current beta implementation.

I have solved clamp generator with my own implementation soooo easy
maybe it will give some inspiration the team

Allow entry of min and max pixel sizes for a fluid typography step

this is why I will still use my own clamp generator without precise min max settings the outputs are too arbitrary. [image] good thing is after bricks 2.2 there will be workarounds the scale needs to set custom for it otherwise it will create a bit random sizes for the other scales it is too much click for simple thing like this should be a default but atleast it is there after 2.2 and I have no idea what is the viewport calculations are for this yet… arbitrary… [image]

[Matej]

@sinanisler

min max and viewport min max precision not possible with current beta implementation.

Will take a look at your request as well, but just looking at your description (not checking the topic), it’s not exactly related to this one.

Best regards,
Matej