Skip to content

v2.0.0

Choose a tag to compare

View all tags
@shawnbot shawnbot released this 26 Aug 17:49
· 45 commits to main since this release
v2.0.0
50113d9
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

This release includes a complete rebuild of the design-system.sf.gov site with Eleventy. There are a lot of changes to the system included:

Tailwind

We've enabled a bunch of Tailwind plugins:

  • flexDirection and flexWrap to support reverse-column ordering and wrapping of flex contents
  • inset to support positioning via top, right, bottom, and left CSS properties with our spacing scale
  • position CSS utilities of the same name
  • overflow for overflow visibility utilities and scrolling support

I also updated some variants:

  • display now also has group-hover variants to support showing heading links on hover (in docs)
  • flexDirection is responsive, so you can vary the flex direction by viewport width
  • inset and position are also responsive, because relative and absolute positioning usually differ responsively

Theme

Our Tailwind theme has some changes to support docs:

  • borderWidth.DEFAULT has changed from 4px to 3px, affecting the border and related utilities
  • borderRadius['0'] = '0' gives us rounded-0 and edge- and corner-specific utilities to flatten corners on certain elements
  • I've added 2, 3, and 4 keys (all px values) to the borderWidth object to give us more explicit utilities
  • fontFamily.inherit = 'inherit' and textColor.inherit = 'inherit' enable the font-inherit and text-inherit utilities, which make it easier to explicitly allow typography settings to affect child elements
  • The width and height theme keys now include our spacing scale so you can set the sizes of elements to any size in our scale with w- and h- utilities

CSS updates

base.css

Base styles now:

  • reset padding and margin on <html> and <body>
  • set <a> color to bright ("action") blue with text-action
  • color input placeholders (::placeholder) with text-slate-light

docs.css

The new docs.css bundle includes styles to support the new docs site. There is currently a .prose scope that applies styles to elements like headings, but it's very much a work in progress and nowhere near ready to roll out on, say, Drupal-generated content on sf.gov. The most important part of this are the syntax highlighting colors.

fonts.css

The fonts bundle now also loads the Traditional Chinese subset of Noto Sans TC.

typography.css

Our typography bundle now explicitly styles <pre> and <code> elements with font-mono and forces children to inherit the monospace font with font-inherit. <pre> elements also get whitespace-pre-wrap out of the box.

Postcss config

I've removed two things from our postcss setup because we weren't using them:

  1. SCSS syntax (postcss-scss)
  2. postcss-custom-properties
Assets 2
Loading