Contrib.social

Account for all breakpoints and order in typography partial

Open on Drupal.org →
Created on 18 July 2024, 7 months ago
Updated 4 September 2024, 6 months ago

Problem/Motivation

When writing the Typography map in a custom theme, the Typography Partials custom properties mixin does not take into account differences in breakpoints across typography types. This often results in missing custom properties or incorrect order of typography for different breakpoints when CSS is finally built for production.

Steps to reproduce

Write a custom typography map and include different breakpoints for each typography type. Example:

$typographic-scale: (
  heading: (
    72: (
      mobile:     (32, 44),
      tablet:     (44, 56),
      sm-desktop: (60, 72),
      desktop:    (72, 80),
    ),
    52: (
      mobile:   (24, 32),
      tablet:   (44, 56),
      desktop:  (52, 60),
    ),
  ),
);

Proposed resolution

The Typography CSS Custom Property mixin needs to be rewritten to include all breakpoints, if specified in Typography Scale, and build them in the correct order.

🐛 Bug report
Status

Fixed

Version

5.0

Component

Code

Created by

🇺🇸United States philip_stier Denver, Colorado

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024