ADAPT-4155: Refactor for TW3 and Presets

[sherakama]

READY FOR REVIEW

Summary

• Preview of integration: https://github.com/SU-SWS/decanter-web/pull/96

Needed By (Date)

• • Shrugs *

Urgency

• None

Steps to Test

1. Read code
2. Try out local environment
3. Review integration PR
4. Make suggestions or demands
5. Win

Affected Projects or Products

• Everything using V7
• This will be marked as an rc build as it is changing a fair bit

[yvonnetangsu]

Is that a new record? 😄

I'll look at this tomorrow after finish another one of my My Account tickets 😄

[sherakama]

Lol,

"Took a little off the top"

No rush on this. Feel free to throw whatever changes to the tailwind config you want into the mix.

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR might be rejected due to its size.

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR might be rejected due to its size.

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR might be rejected due to its size.

[yvonnetangsu]

@sherakama I'm thinking that there are perhaps 2 ways we could deal with root font sizes

1. We handle this with TW presets. One preset with root font size = 62.5% like we currently have, and another preset with root font size = 100%. There are only a handful of theme files that uses rem values, so we can create 2 sets of those to use with the 2 presets.

2. In Decanter, we use this variable in for HTML font size in the TW base file

   html: {
       fontSize: 'calc(var(--root-font-size-factor) * 100%)',
   },

   In all our TW theme and plugin files, use calculations for font sizes and spacings that uses rem , eg: su-text-20 equals to calc(20rem / (var(--root-font-size-factor) * 16))

Finally, in each project that uses Decanter, we set the root font size for the project using the CSS variable, so eg, with our current setting, we would do this

:root {
  --root-font-size-factor: 0.625;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

For projects that want to use a 16 px root font size, we can do so by using a --root-font-size-factor: 1, and everything else will be the same because it's calculated based on this variable (I tested this and it seems to work). Also, this way we don't have to go back and refactor the other projects. Our UComm friend might also prefer to have 10px as the root font size since they originally came up with this idea and this allows different teams to pick their root font sizes.

[sherakama]

@yvonnetangsu,

There are a couple of things that would benefit from the new preset approach that I would like to get an RC out for so please have a review of this and we can open up a new PR for the font size stuff.

[yvonnetangsu]

@yvonnetangsu,

There are a couple of things that would benefit from the new preset approach that I would like to get an RC out for so please have a review of this and we can open up a new PR for the font size stuff.

Yeah that sounds like a good plan. I'll look at this today 👍🏼

[github-actions[bot]]

This PR exceeds the recommended size of 1000 lines. Please make sure you are NOT addressing multiple issues with one PR. Note this PR might be rejected due to its size.