Skip to content

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

Open
@macandcheese

Description

@macandcheese

monday.com sync: #9434628486

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)

Metadata

Metadata

Assignees

Labels

1 - assignedIssues that are assigned to a sprint and a team member.ArcGIS Maps SDK for JavaScriptIssues logged by ArcGIS SDK for JavaScript team members.Calcite (design)Issues logged by Calcite designers.breaking changeIssues and pull requests with code changes that are not backwards compatible.designIssues that need design consultation prior to, or during, development.design-tokensIssues requiring design tokens.enhancementIssues tied to a new feature or request.estimate - 3A day or two of work, likely requires updates to tests.monday.com syncMonday.com syncp - mediumIssue is non core or affecting less that 60% of people using the libraryready for devIssues ready for development implementation.

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions