HSLdevcom / digitransit-ui

Digitransit UI ("Reittiopas.fi")
https://www.reittiopas.fi/
Other
237 stars 130 forks source link

Font-Family definitions scattered across the code #5022

Open hbruch opened 1 week ago

hbruch commented 1 week ago

For instances which should use other font families as the currently used Gotham, it is hard to adapt the styling.

Grepping for Gotham at least returns the following instances:

app/util/mapIconUtils.js:        }px Gotham XNarrow SSm A, Gotham XNarrow SSm B, Gotham Rounded A, Gotham Rounded B, Arial, sans-serif`;
app/util/mapIconUtils.js:        }px Gotham XNarrow SSm A, Gotham XNarrow SSm B, Gotham Rounded A, Gotham Rounded B, Arial, sans-serif`;
app/component/map/non-tile-layer/StopMarker.js:            font-family="Gotham XNarrow A, Gotham Rounded A, Gotham Rounded B, Roboto Condensed, Roboto, Arial, sans-serif"
digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.scss:    font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial, Georgia,
digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.scss:  font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial, Georgia,
digitransit-component/packages/digitransit-component-autosuggest/src/helpers/styles.scss:    font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial, Georgia,
digitransit-component/packages/digitransit-component-suggestion-item/src/helpers/styles.scss:        font-family: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B',
digitransit-component/packages/digitransit-component-favourite-bar/src/helpers/styles.scss:        font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial,
digitransit-component/packages/digitransit-component-favourite-bar/src/helpers/styles.scss:        font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial,
digitransit-component/packages/digitransit-component-favourite-modal/src/helpers/desktop.scss:        font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial,
digitransit-component/packages/digitransit-component-favourite-modal/src/helpers/desktop.scss:      font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial,
digitransit-component/packages/digitransit-component-favourite-modal/src/helpers/mobile.scss:      font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial,
digitransit-component/packages/digitransit-component-favourite-modal/src/helpers/mobile.scss:      font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial,
digitransit-component/packages/digitransit-component-control-panel/src/helpers/styles.scss:    font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial, Georgia,
digitransit-component/packages/digitransit-component-dialog-modal/src/helpers/styles.scss:    font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial, Georgia,
digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss:    font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial, Georgia,
digitransit-component/packages/digitransit-component-datetimepicker/src/helpers/styles.scss:  font-family: 'Gotham Rounded A', 'Gotham Rounded B', Roboto, Arial, Georgia,
node_modules/@hsl-fi/site-header/node_modules/@hsl-fi/sass/_fonts.scss:$font-stack: 'Gotham Rounded A', 'Gotham Rounded B', Arial, Georgia, serif;
node_modules/@hsl-fi/site-header/node_modules/@hsl-fi/sass/_fonts.scss:$font-stack-narrow: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B', Arial,
node_modules/@hsl-fi/sass/_fonts.scss:$font-stack: 'Gotham Rounded A', 'Gotham Rounded B', Arial, Georgia, serif;
node_modules/@hsl-fi/sass/_fonts.scss:$font-stack-narrow: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B', Arial,
sass/themes/hsl/_theme.scss:$font-family: 'Gotham Rounded A', 'Gotham Rounded B', arial, georgia, serif;
sass/themes/hsl/_theme.scss:$font-family-narrow: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B',
sass/themes/hsl/_theme.scss:  'Gotham Rounded A', 'Gotham Rounded B', arial, georgia, serif;
sass/themes/apphsl/_theme.scss:$font-family: 'Gotham Rounded A', 'Gotham Rounded B', arial, georgia, serif;
sass/themes/apphsl/_theme.scss:$font-family-narrow: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B',
sass/themes/apphsl/_theme.scss:  'Gotham Rounded A', 'Gotham Rounded B', arial, georgia, serif;

It would be nice to be able to declare font-families per theme and have this definition reused by components.

vesameskanen commented 1 week ago

Right. Originally fonts were defined in sass/themes per theme. I am not sure why shared components must redefine the fonts. I will experiment a bit.

Also, it is a bit strange that only a couple of UI components define a font directly. Maybe that can be fixed.

vesameskanen commented 1 week ago

I tested removing font defs from a couple of digitransit-component libs and did not see any change.

My guess is that scattered font styles are just some copy paste rubbish.

Maybe the only required place is in sass/themes/my-theme folder. Something to clean up during the upcoming techdebt theme days!