Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CSS] Ensure all components inherit font-family #7175

Open
macandcheese opened this issue Jun 14, 2023 · 4 comments
Open

[CSS] Ensure all components inherit font-family #7175

macandcheese opened this issue Jun 14, 2023 · 4 comments
Assignees
@macandcheese
Labels
1 - assigned Issues that are assigned to a sprint and a team member. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Milestone
2025-04-29 - Apr ...

Comments

@macandcheese
Copy link
Contributor

macandcheese commented Jun 14, 2023 •
edited
Loading

Description

Currently, the majority of our components can have their font set by simply setting a font-family on an element. However, some require an additional rule to be set with --calcite-sans-family, for example, Action and List:

Suggest having all components inherit from a font-family set on a parent component.

Screen Shot 2023-06-14 at 1 04 11 PM

Acceptance Criteria

As a user, I can easily override all fonts in my Calcite application with a single declaration.

Relevant Info

Codepen: https://codepen.io/mac_and_cheese/pen/NWExrER?editors=1000

The story for --calcite-sans-family is also unclear to me, do we need this variable, or could it be a more generic `--calcite-ui-font-family"?

For instances where text defined via prop is desired to have different fonts within the same component, that's really a story for css parts - which we do want to tackle but as part of a larger effort in the ... future.

Which Component

It's defined in a handful of components - Action, List, etc.

Example Use Case

As a user, I want to be able to easily override the font for my entire application with one declaration.

Priority impact

p3 - want for upcoming milestone

Esri team

Calcite (design)
@macandcheese macandcheese added enhancement Issues tied to a new feature or request. design Issues that need design consultation prior to development. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Jun 14, 2023
@github-actions github-actions bot added Calcite (design) Issues logged by Calcite designers. p3 - want for upcoming milestone labels Jun 14, 2023
@geospatialem geospatialem added design-tokens Issues requiring design tokens. ready for dev Issues ready for development implementation. and removed design Issues that need design consultation prior to development. labels Jun 15, 2023
@geospatialem geospatialem added ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. p - medium Issue is non core or affecting less that 60% of people using the library labels Nov 2, 2023
@geospatialem geospatialem mentioned this issue Nov 2, 2023
Open
@alisonailea
Copy link
Contributor

add --calcite-font-family as default font-family value to base component mixin (inside assets/styles/includes.scss)

@alisonailea alisonailea added this to the 2023 November Priorities milestone Nov 8, 2023
@brittneytewks brittneytewks removed the needs triage Planning workflow - pending design/dev review. label Nov 13, 2023
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Nov 20, 2023
@alisonailea alisonailea added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 30, 2023
@alisonailea alisonailea added the estimate - 3 A day or two of work, likely requires updates to tests. label Dec 7, 2023
This was referenced Dec 9, 2023
Merged
Merged
@brittneytewks brittneytewks added the design Issues that need design consultation prior to development. label Dec 11, 2023
alisonailea added a commit that referenced this issue Dec 18, 2023
@alisonailea
feat(font tokens): add font family fallbacks (#8389)
b2fd255 
**Related Issue:** #7175

## Summary

Add font family fallbacks to tokens and update the transformer to know
how to interpret those for Styles
@geospatialem geospatialem added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Dec 18, 2023
@github-actions github-actions bot assigned DitwanP and unassigned alisonailea Dec 18, 2023
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@DitwanP
Copy link
Contributor

DitwanP commented Dec 18, 2023

🍠 Verified locally on main

@DitwanP DitwanP closed this as completed Dec 18, 2023
@DitwanP DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Dec 18, 2023
@alisonailea alisonailea mentioned this issue Apr 26, 2024
Closed
6 tasks
alisonailea added a commit that referenced this issue Apr 26, 2024
@alisonailea @jcfranco
feat: ensure all components inherit font-family (#8388)
90f8923 
**Related Issue:** #7175 #9205

## Summary

All components now inherit from the font-family set at root and that
font-family is inherited from tokens.
This also updates tailwind to use the font-family token

---------

Co-authored-by: JC Franco <[email protected]>
@ashetland
Copy link
Contributor

Some components are still not inheriting font-family. Not all components are represented here, but notice Action, Block, and List show the wrong font in this example. https://codepen.io/ashetland/pen/qEBmEBX?editors=1000

Image

@ashetland ashetland reopened this Mar 4, 2025
@DitwanP DitwanP added 0 - new New issues that need assignment. and removed 4 - verified Issues that have been released and confirmed resolved. labels Mar 4, 2025
@DitwanP DitwanP added needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Mar 4, 2025
@DitwanP DitwanP added this to the 2025-04-29 - Apr Milestone milestone Mar 4, 2025
@DitwanP DitwanP removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Mar 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@macandcheese macandcheese

Labels
1 - assigned Issues that are assigned to a sprint and a team member. ArcGIS Maps SDK for JavaScript Issues logged by ArcGIS SDK for JavaScript team members. Calcite (design) Issues logged by Calcite designers. design Issues that need design consultation prior to development. design-tokens Issues requiring design tokens. enhancement Issues tied to a new feature or request. estimate - 3 A day or two of work, likely requires updates to tests. p - medium Issue is non core or affecting less that 60% of people using the library ready for dev Issues ready for development implementation.
Projects
None yet
Milestone
2025-04-29 - Apr Milestone
Development

No branches or pull requests
6 participants
@alisonailea @macandcheese @geospatialem @DitwanP @ashetland @brittneytewks