search

patternfly / patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.
https://patternflyelements.org/
MIT License
377 stars 91 forks source link

Replace contents of pfe-base.css with _globals.scss from PF core #899

Open starryeyez024 opened 4 years ago

starryeyez024 commented 4 years ago

@patternfly/patternfly/base/_globals.scss is 1:1 with the pfe-base file, it should just extend from the sass partial.

castastrophe commented 3 years ago

@starryeyez024 Didn't we opt for keeping them separate because the globals from PF Core had higher specificity?

starryeyez024 commented 3 years ago

I looked at the two files side by side and they are not 1:1 (anymore). We could keep this issue open and review & discuss the differences with UXD to try to bring them back into parity. We would need another round of typography updates, so that PFE uses PF core variables with the pf-global prefix.

Example snippet from @patternfly/patternfly/base/_globals.scss

  body {
    font-family: var(--pf-global--FontFamily--sans-serif);
    font-size: var(--pf-global--FontSize--md);
    font-weight: var(--pf-global--FontWeight--normal);
    line-height: var(--pf-global--LineHeight--md);
    text-align: left;
    background-color: var(--pf-global--BackgroundColor--100);
  }

  // Links styles

  a {
    font-weight: var(--pf-global--link--FontWeight);
    color: var(--pf-global--link--Color);
    text-decoration: var(--pf-global--link--TextDecoration);

    &:hover {
      --pf-global--link--Color: var(--pf-global--link--Color--hover);
      --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover);
    }
  }