shared css packages

[kfarkasHU]

for variables for common used classes

---

The following parameters should be standardized across the applications: low level

• paddings (4, 8, 12, 16, 20, 24, 28, 32)
• margins (4, 8, 12, 16, 20, 24, 28, 32)
• widths (100%)
• heights (100%)
• border widths (1px, 2px, 4px)
• border radiuses (2px, 4px, 8px)
• font families (only one)
• colors (primary, secondary, tertiary with on- variants; function colors with on- variants)
  • color themes should be generated by using SASS like somehow, ideally there would be a SASS function that takes the colors as arguments, and generates them properly

function createColorScheme(
  primary,
  secondary,
  tertiary
) {
 // magic
 // outputs: 
 /**
 :root {
  --primary-l: #RRBBGG;
  --primary-m: #RRBBGG;
  --primary-h: #RRBBGG;
 }
  **/
}

high level

• wl-button
• wl-input
• wl-password
• wl-textarea
• wl-radio
• wl-checkbox
• wl-select

For showcasing the above, use storybook.

---

• core.ui.theme-generator (contains the generators)
  • there should be different generators for different colors eg: lmhGenerator($variableName, $baseColor) -> (*-l, *-m, *-h) for primary, secondary and tertiary
• core.ui.variables (contains the variables in different folders)
• core.ui.elements (contains the classes listed above)