v2.5.1

🐛 Bug fixes

This bug fix adds the lib directory to the published sfgov-design-system package so that the tailwind preset can be imported:

module.exports = {
  presets: [
    // like this
    'sfgov-design-system/tailwind.preset'
    // ...or this
    require('sfgov-design-system/tailwind.preset'),
  ]
}

🏠 Internal

We've resolved some critical dependency vulnerabilities in lerna-lite in #120.

v2.5.0

🚀 Features

• There's a new icons.css bundle, and sfgov-icon styles are included in sfds.css

🐛 Bug fixes

• Rendering improvements for <sfgov-icon>, which might address SG-1819

📝 Documentation

• We've moved all of our documentation to Docusaurus 🎉

🏠 Internal

• We now have a monorepo, which will one day house multiple npm packages in addition to sfgov-design-system

v2.4.0

🚀 Features

• A new Tailwind preset!

  module.exports = {
    presets: ['sfgov-design-system/tailwind.preset']
  }

• A public Tailwind config (sfgov-design-system/tailwind.config) for extending directly

🐛 Bug fixes

• Updated color values from Figma in #97

📝 Documentation

• New button component docs!
• Improved good/bad example rendering
• Delegated click event listener on empty links (href="#") to prevent janky scrolling

🏠 Internal

• ESLint for JS with the no-expiring-todo-comments rule
• Stylelint for CSS with a no-expiring-todo-comments-like rule
• Markdownlint for our docs with a rule insisting that every page have a title in YAML frontmatter

Full Changelog: v2.3.1...v2.4.0

v2.3.1

What's Changed

• Bump node-fetch from 2.6.1 to 2.6.7 by @dependabot in #82
• Bump minimist from 1.2.5 to 1.2.6 by @dependabot in #83
• Replace "placeholder" with "hint" by @coreyhunt in #85

Full Changelog: v2.3.0...v2.3.1

v2.3.0

What's Changed

• Upgrade eleventy to 1.0, resolve npm audits by @shawnbot in #71
• Adds Icon documentation by @coreyhunt in #68
• Create fields-and-forms.md by @coreyhunt in #81
• Release 2.3.0 by @shawnbot in #76

Full Changelog: v2.2.2...v2.3.0

v2.2.2

🐛 Bug fixes

• The action color token has been updated to match Figma (#4f66ee is now #495ed4) (#61)
• The medium font-weight value has been updated from 500 to 600 to reflect Figma values. (part of #66)

📖 Documentation

• In the typography intro, the font-weights we use are now specified (part of #66)
• Fonts are now pulled in at improved speeds ⚡ (described in #66)

v2.2.1

📝 Documentation

This is a documentation-focused patch release intended to fix some issues we've observed since 2.2.0:

• The "Resources" nav link is now present
• The grid overlay keyboard shortcut now works
• The package version in the top grey bar now shows the current version

See #60 for more information.

v2.2.0

🚀 Features

• We have our first pass at the grid system, powered by Tailwind's CSS grid utilities (#52)
• Icons are now part of the system! We publish SVG files for each one, and JavaScript bundles that make it easy to embed them in HTML (#22)
• We now offer a details-reset class and open: utility variants (e.g. hidden open:block to show when the <details> element is open) to support great-looking disclosure components. There's a new docs page for the "Details" component, too (part of #54)
• Our CSS now also includes width (w-) and max-width (max-w-) utilities for 4 discretely sized content widths: sm, md, lg and xl (part of #52)
• In addition to grid plugins, our Tailwind theme now also includes gap, opacity, pointerEvents, visibility, and zIndex to support the documentation site (part of #52)
• We now have a md breakpoint for responsive utilities that applies to screens 420px an wider (part of #49)
• Our spacing scale now includes both 96 and 100 values. 100 will be deprecate in the 3.0.0 release

🐛 Bug fixes

• The title-sm and title-xs classes now work on both small and large screens (part of #49)
• The slate-1 color value (previously #CEDAE4) now matches the #EFF3F4 in Figma
• <kbd> components no longer overlap, and have better documentation (#48)

📖 Documentation

• Most of the web site has been updated to match new designs in #52
• Source links in the footer of each docs page have been fixed
• HTML code examples have been redesigned with CodePen links and nicer clipboard copy buttons (#50)

v2.0.0

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

v1.3.0

🚀 Features

• w-auto and variants (lg:w-auto, etc.) for setting width: auto responsively (see #34)

🐛 Fixes

• Link buttons (.btn-link) are now underlined (see #36)

🏠 Internal

• Added pre-publish checks to catch when key files aren't built (see #31)