feat(typography): support typography theming #1664

booc0mtaco · 2023-06-22T22:12:00Z

Summary:

Support the ability to theme typography presets that match each consuming project. This has the added benefit of also decoupling us from having to use the postCSS mixin stuff. More functionality with less complexity.

use font property instead of fixed mixins and property templates
add in tokens for each preset and usage
ensure mapping and snapshots match without change

Test Plan:

Wrote automated tests
CI tests / new tests are not applicable
Manually tested my changes, but I want to keep the details secret
Manually tested my changes, and here are the details:
- Create an alpha publish and try out in edu-stack or traject as a sanity check if changes affect build or deploy, or are breaking, such as token changes, widely used component updates, hooks changes, and major dependency upgrades.

github-actions · 2023-06-22T22:15:07Z

size-limit report 📦

Path	Size
components	111.98 KB (0%)
styles	37.05 KB (+1.37% 🔺)

codecov · 2023-06-22T22:15:17Z

Codecov Report

Merging #1664 (5a7def6) into next (7137da6) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next    #1664   +/-   ##
=======================================
  Coverage   93.23%   93.23%           
=======================================
  Files         222      222           
  Lines        2970     2970           
  Branches      721      721           
=======================================
  Hits         2769     2769           
  Misses        184      184           
  Partials       17       17

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

jinlee93 · 2023-06-23T16:18:13Z

src/design-tokens/tier-1-definitions/typography.json

+            "value": "var(--eds-font-weight-bold) var(--eds-font-size-40)/1.2 var(--eds-font-family-primary)"
+          },
+          "mobile": {
+            "value": "var(--eds-font-weight-bold) var(--eds-font-size-32)/1.25 var(--eds-font-family-primary)"


Now that this is separated, the component itself would have to handle breaks?

correct. I marked a TODO for this, but I think that's probably the better way to do this anyway. Tokens shouldn't have logic like that IMO

Makes sense to me

booc0mtaco · 2023-06-27T22:31:59Z

Changes to note in this PR:

removing legacy tokens used in pages and recipes (removing body-XX-bold as they are legacy only)

booc0mtaco · 2023-06-28T18:35:17Z

.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.tsx

@@ -110,7 +110,7 @@ export const ProjectCard = ({
        <Heading
          as={headingAs}
          className={styles['project-card__title']}
-          size="body-sm"
+          size="title-xs"


body-sm may have changed in design while this was under way, so picked a near neighbor for this demo.

Makes sense and body-sm prob being removed as part of Heading ticket anyways

booc0mtaco · 2023-06-28T18:36:14Z

.storybook/pages/StudentRefinement/StudentRefinement.module.css

@@ -82,7 +82,8 @@
 * The title communicates card organization.
 */
 .data-summary-card__title {
-  @mixin eds-theme-typography-overline-sm;
+  font: var(--eds-theme-typography-overline-sm);
+  text-transform: uppercase;


There are a few examples of adding in text-transform to some cases, because font only supports CSS 2.1 values which doesn't include all-caps sadly

- use font property instead of fixed mixins and property templates - add in tokens for each preset and usage - ensure mapping and snapshots match without change - replace documentation to explain font-based approach - fix and sync typography items not represented in code - replace legacy typography uses in components with near neighbors - update page example code - remove along example due to CSS variable mismatch

booc0mtaco · 2023-06-28T20:10:08Z

This fiddle shows how mixing :root and other classes of the same specificity doesn't apply font family or other overrides as you might expect. In this example, the family used in the shortcut font: rule value doesn't apply even tho chrome indicates it should

https://jsfiddle.net/booc0mtaco/q1h6s5dk/

booc0mtaco · 2023-06-28T20:14:13Z

.storybook/pages/AlongDemo/AlongDemo.module.css

Removed the along demo as along itself is now going to use EDS, has the updated theme, and keeping this as-is would show:

an outdated theme

improper overrides for font family values (manifesting from a limitation in how storybook fetches per-component styles and variables)

page structure that may change in the future

This avoids us having to keep it in sync with any product code/branding.

Think the wireframe page should be enough now?

yah. eventually we will invest in a proper wireframe theme (possibly as the default), and use this demo to show how to prototype with EDS

u m b r e l l a b r a n d

jinlee93 · 2023-06-28T23:08:53Z

.storybook/components/DesignTokens/Tier2/TypographyUsage.module.css

 }

 .typography-usage--overline-sm {
-  @mixin eds-typography-preset-012-bold;
+  font: var(--eds-typography-preset-012);
+  text-transform: uppercase;


Are we removing the larger weight treatment on the overline tokens?

Actually, food for thought, perhaps overline can be a Text component variant only and not a token itself since it also has text-transform

This is the confusing thing... as I was working thru things, i was just applying the values in our designs, and it says we should have had this?

I don't know if this had been out of sync for a while, or was a recent change (pls add some kinda diffing to Figma)

Think it's been out of sync for a while and never got noticed since this token prob has low usage... could consider even removing these

@jinlee93 Ohh, yeah, all usages could be run thru Text for clarity and simplicity. This would give us a nice way to avoid exposing this text-transform thing.

Then we can greatly simplify these typography token pages and probably remove the css modules for those

jinlee93 · 2023-06-28T23:09:15Z

.storybook/components/Docs/Guildelines/Typography.stories.mdx

+    }
+  }
+}
+```


Nice updates

jinlee93 · 2023-06-28T23:10:14Z

.storybook/data/tokens.json

+  "eds-typography-preset-011": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
+  "eds-typography-preset-011-bold": "var(--eds-font-weight-medium) var(--eds-font-size-12)/1.333333333 var(--eds-font-family-primary)",
+  "eds-typography-preset-012": "var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",
+  "eds-typography-preset-012-bold": "var(--eds-font-weight-medium) var(--eds-font-size-11)/1.272727272 var(--eds-font-family-primary)",


Although there are more tokens, I am pretty happy this exists now since it will ACTUALLy align our typography tokens closer to Figma and the designer's idea of type tokens

jinlee93

I think it looks good, great work! I have some thoughts about overline, but don't think it should be blocking

## [12.3.0](v12.2.0...v12.3.0) (2023-06-29) ### Features * **breadcrumbs:** allow custom separators ([#1663](#1663)) ([1fe0e6c](1fe0e6c)) * **button:** create t3 token for border radius ([#1665](#1665)) ([eadd005](eadd005)) * **icons:** make icons rounded outline and add send, mail ([#1669](#1669)) ([669d01c](669d01c)) * **tokens:** add t2 color bg-brand-primary-subtle ([#1668](#1668)) ([7137da6](7137da6)) * **typography:** support typography theming ([#1664](#1664)) ([3148751](3148751))

booc0mtaco force-pushed the aholloway/EFI-1019 branch 3 times, most recently from 8f211a1 to 2175edb Compare June 23, 2023 14:55

jinlee93 reviewed Jun 23, 2023

View reviewed changes

booc0mtaco force-pushed the aholloway/EFI-1019 branch 7 times, most recently from 1dcac37 to 3519a3d Compare June 27, 2023 22:10

booc0mtaco force-pushed the aholloway/EFI-1019 branch 3 times, most recently from 5462488 to 77f9a1c Compare June 28, 2023 18:26

booc0mtaco marked this pull request as ready for review June 28, 2023 18:34

booc0mtaco commented Jun 28, 2023

View reviewed changes

booc0mtaco force-pushed the aholloway/EFI-1019 branch from 77f9a1c to 5a7def6 Compare June 28, 2023 19:01

booc0mtaco requested a review from czi-developer-foundations June 28, 2023 20:09

booc0mtaco commented Jun 28, 2023

View reviewed changes

jinlee93 reviewed Jun 28, 2023

View reviewed changes

.storybook/components/Docs/Guildelines/Typography.stories.mdx

}

}

}

```

Copy link

Contributor

jinlee93 Jun 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice updates

jinlee93 reviewed Jun 28, 2023

View reviewed changes

jinlee93 approved these changes Jun 28, 2023

View reviewed changes

booc0mtaco merged commit 3148751 into next Jun 29, 2023

booc0mtaco deleted the aholloway/EFI-1019 branch June 29, 2023 15:51

booc0mtaco mentioned this pull request Jun 29, 2023

Release v12.3.0 #1670

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(typography): support typography theming #1664

feat(typography): support typography theming #1664

booc0mtaco commented Jun 22, 2023

github-actions bot commented Jun 22, 2023 •

edited

Loading

codecov bot commented Jun 22, 2023 •

edited

Loading

jinlee93 Jun 23, 2023

booc0mtaco Jun 23, 2023

jinlee93 Jun 23, 2023

booc0mtaco commented Jun 27, 2023

booc0mtaco Jun 28, 2023

jinlee93 Jun 28, 2023

booc0mtaco Jun 28, 2023

booc0mtaco commented Jun 28, 2023

booc0mtaco Jun 28, 2023

jinlee93 Jun 28, 2023

booc0mtaco Jun 28, 2023

jinlee93 Jun 28, 2023

jinlee93 Jun 28, 2023

jinlee93 Jun 28, 2023

booc0mtaco Jun 28, 2023

jinlee93 Jun 28, 2023

booc0mtaco Jun 29, 2023

jinlee93 Jun 28, 2023

jinlee93 Jun 28, 2023

jinlee93 left a comment

feat(typography): support typography theming #1664

feat(typography): support typography theming #1664

Conversation

booc0mtaco commented Jun 22, 2023

Summary:

Test Plan:

github-actions bot commented Jun 22, 2023 • edited Loading

size-limit report 📦

codecov bot commented Jun 22, 2023 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

booc0mtaco commented Jun 27, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

booc0mtaco commented Jun 28, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jinlee93 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 22, 2023 •

edited

Loading

codecov bot commented Jun 22, 2023 •

edited

Loading