feat: @kth/style 10

[belanglos]

Migrate to KTH Style 10

Install dependencies

• npm i kth-style@10-latest
• npm i @kth/style@latest
• npm i @kth/kth-node-web-common@9

Setup environment

• Changed CM_HOST_URL in local .env to https://www-r-new.referens.sys.kth.se/cm/.

Memo page adjustments

• Referenced localhost | DD1390/DD139020222-1. Compared with ref | DD1390/DD139020222-1.
• Added class main to wrapping div with class container. Also added .container.main { @include mixins.container; }.

TODO: Use handlebar helper to render breadcrumbs.

Style organization

• Extracted table styles to _table.scss.
• Extracted print-specific (e.g. @media print) styles to _print.scss.

Typography

• Referenced Typograhy.
• Added @import "~@kth/style/scss/tokens/typography.scss";.
• Removed font-family in kurs-pn-web.scss.
• Added article { @include prose.prose; } rule.
• Evaluated use of font-size:
  • short-text-font-style is used in table div:s and sub-section-header. It’s aimed to keep font-size and line-height slightly smaller. I removed the styling, but kept the html as is.
  • long-text-font-style is used for p and li in content-center. It seems to mostly have played out it’s role and was removed.
  • Removed font-size: 1rem; from page-sub-heading-admin-link and @media width related related rules for various p and li.
  • Styled h3 in info-box as a h4 with @include font-heading-s.
  • Kept font-size for @media print.

TODO: How should we deal with font-size for sub-section-header?

Colors

• Referenced Colors.
• Add theme: 'student-web' to all res.render in controllers.
• Evaluated use of color, border-color, and background-color:
  • Add @include theme-student-web to table and .info-box.
  • $grey: #65656c is used for table header backgrounds. I replaced it with the darker color $color-gray-dark.
  • $lightGrey: #f6f6f6 is used as td background-color. I replaced it with $color-gray-lighter.
  • $white: #fff is used as:
    • color for th, tr, and td. Switched it to --color-on-primary.
    • border color for th, var(--color-border), and tr. Switched it to --color-border.
    • color for h4 and p inside tr. Switched it to --color-on-primary.
  • .info-box had background-color: #f4f4f4. Switched it to --color-background-alt.
  • Removed background-color for #page-sub-heading-wrapper.
  • Removed unused menu-memos.
  • Removed body background-color for @media print.
  • Links in side menu has class .nav-link.active with color set to black. Changed it to --color-text.

TODO: The side menu needs to be updated after redesign in Cortina.

Spacing

• See Spacing.
• TODO: Analyze use of margins and paddings.

[belanglos]

Will this be wrapped inside a cortina-block?

[karlandindrakryggen]

#373