folkehelseinstituttet / fhi.frontend.style Goto Github PK

It should be possible to import only

• "core"
• individual components
• icons
  • individual icons

NB! Try to make this as simple an "low tech" as possible.

Prevent marking of words on sort trigger when fast switching between sort order (double click)

Sorting icon doesn't float with the cell when scrolling sideways in responsive table container

scss/style.scss -> scss/_style.scss
scss/variables.scss -> scss/_variables.scss

NB! This is a breaking change!

There should not be "tall" and "low" buttons on different screen sizes anymore.

Height should be 44px

$fhi-blue-grey-1: #f5f8fB -> $fhi-blue-grey-1: #edf4f7

Table with option to select row(s)

Create som guidelines for scss and js code.
Add .editorconfig to the project.

Use focus-visible instead of the data-attributes in html tag

Icon buttons design library:
https://xd.adobe.com/view/2a67f994-a3fd-4119-b26a-76ccac4d1ab4-7f34/

In common design library:
https://xd.adobe.com/view/816e1dd1-0d75-48ce-a1ea-adf18155fbd0-d43d/screen/23cb4268-1975-4343-b0b1-0123cd672f15/

This depends on #85 to be done

Bootstrap accordion

https://xd.adobe.com/view/816e1dd1-0d75-48ce-a1ea-adf18155fbd0-d43d/screen/6603b93a-f16c-45de-ad87-967750f3ebef/

Since the content of the README is what you see here https://www.npmjs.com/package/@folkehelseinstituttet/style, it should be tailored to suit this use case; ie. how to install and use.

Info about how to get started for develepers contributing to this project should be placed elsewhere.

Setup a maintainable solution for icons usage

Note:
Folkehelseinstituttet are using icons from both Font Awesome, Font Awesome Pro and custom ones. Also, after Bootstrap 5 upgrade, there might be icons from Bootstrap Icons as well in some instances.

This open source library will provide the free icons. Font Awesome Pro usage will be handled by the projects that needs it.

https://xd.adobe.com/view/816e1dd1-0d75-48ce-a1ea-adf18155fbd0-d43d/screen/23cb4268-1975-4343-b0b1-0123cd672f15

Ngb-stuff belongs in Fhi.Frontend.NgComponents

https://xd.adobe.com/view/7b92027b-0555-450b-b14d-394f07aca313-2ec1/

Some Bootstrap variables needs a new value to fit our "FHI theme".
Today these variables are spread out in multiple variable files based on use case.
I belive one dedicated file fore these "Bootstrap resets" is a better solution.

Rewise the file and folder structure for simpler maintenance and onboarding.

On sortable table, this should not happen:

Also, add user-select:none

Tables with possibility to sort the rows.

• add possibility for only including selected icons in any project build
• add better documentation (README in icon folder)

FHI-styling for https://getbootstrap.com/docs/4.5/components/forms/#switches

Since it's so hard to implement rounded corners for form inputs, especially in 3. party components, this should be made optional, and a new default focus style should be implemented.

When using high contrast (Windows 10 / Chrome 93) there's no way to tell if a radio button is checked or not.

Functionality to expand a (wide) table to full viewport

Fhi menu breaks between 992 - 1200
BS5 table have a 2px border on second row, should not be on fhi table

Accordion trigger, font size to be increased from 17 -> 19

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

https://sass-lang.com/documentation/at-rules/import

body text 19px all breakpoints
lead 22px all breakpoints
h5 22px all breakpoints

$fhi-blue-grey-1 -> #EDF4F7
$inline-link-color -> #075D8F
$inline-link-hover-color- #??????

Subject of the issue

The font "CrimsonText" is set to be the main serif-font used for headings in Fhi.Frontend.Style. This font does not seem to exist.
This font is not included, and neither do I think it actually exist, currently the fallback-font "Cambria" are used instead.

What do exist are the "Crimson Text" from Google Fonts.
This font are licensed under the Open Font License, and should be included in the prosject.

Remove red background color on focus

Today you need to do the following in your lib:

@import "~bootstrap/scss/functions";
@import "~@folkehelseinstituttet/style/import/variables";

...bootstrap/scss/functions should be imported into @folkehelseinstituttet/style/import/variables instead.

Note:
Bootstrap responsive

Move and rename variable

Initiated project: Allvis (figure selection: table, map, chart)

FHI-styling for https://ng-bootstrap.github.io/#/components/datepicker

PTSerif -> Crimson

Upgrading to Bootstrap 5

First: have a look at how extensive it will be.

After introducing language-service in a angular-project, the build-log returns issues from the Fhi.Frontend.Style dependency with using slash as devision mark.

Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator.

My issues points towards:

• _core.variables.scss:5 $fhi-px: 1rem/16;
  reccomended changed to $fhi-px: math.div(1rem, 16);
• _form-control.scss:12 border-radius: $fhi-input-height-xs / 2;
  reccomended changed to $fhi-px: math.div($fhi-input-height-xs , 2);
• _form-control.scss:39 border-radius: $fhi-input-height-lg / 2;
  reccomended changed to $fhi-px: math.div($fhi-input-height-lg , 2);

ref:

• slash as division https://sass-lang.com/documentation/breaking-changes/slash-div
• Angular Language Service https://angular.io/guide/language-service

The designers are changing the color palette: #28
Since we obviously have to deal with constant changes to core design features the system needs to be as robust as possible when it comes to color variables. Here are some best practices to achieve this:

• Create color aliases in the library for common use cases
• Create color aliases in each project using the library for less generic use cases
• Limit the use of color variables anywhere else than in the definition of color aliases

The result is a system where designers can add/remove colors without impacting other files than _variables.color-aliases.scss either in this library or in any given project using the library.