Uploaded image for project: 'Data Management'
  1. Data Management
  2. DM-25861

Switch to CSS custom properties-based design system for www.lsst.io

    XMLWordPrintable

    Details

    • Type: Story
    • Status: Done
    • Resolution: Done
    • Fix Version/s: None
    • Component/s: www_lsst_io
    • Labels:
      None

      Description

      Originally in www_lsst_io we tried to used styled-theming to build a design system, including a dark mode. The problem, though, is that these styles aren't getting added to the site on initial load (they do after an in-app page transition, though). I think that a safer and more compatible approach will be to take out the styled-theming integration and instead build up a design system using CSS custom properties. This will also let us support a dark mode (https://github.com/insin/gatsby-plugin-dark-mode)

        Attachments

          Activity

          Hide
          Permalink
          jsick Jonathan Sick added a comment -

          Here we're adopting CSS custom properties (CSS variables) for building the design system and implementing a dark mode. Previously we used styled-theming for this, but I had trouble getting themed properties to appear correctly on the app's initial load. By moving to a CSS-native solution, we also get a straightforward dark mode implementation based on gatsby-plugin-dark-mode. Notes:

          • Design tokens are now CSS custom properties in globalStyle.js. Colours are still interpolated from the design/color.js module in case we need to access colours from JavaScript.
          • It's straightforward to theme icons embedded in JSX as <svg> elements since the fill property can take the value of a custom property. Background image icons in CSS are trickier. In one case we use a mask-image technique, in another case we had to create a specialized icon with a fixed colour.
          • Added some styling (including an elevation system) for the search hit components and made those hits look better in dark mode.
          • Did some initial work on fixing mobile issues in the responsive design; the logic in the media queries is still quite limited.

          See https://github.com/lsst-sqre/www_lsst_io/pull/17 for screen shots.

          Show
          jsick Jonathan Sick added a comment - Here we're adopting CSS custom properties (CSS variables) for building the design system and implementing a dark mode. Previously we used styled-theming for this, but I had trouble getting themed properties to appear correctly on the app's initial load. By moving to a CSS-native solution, we also get a straightforward dark mode implementation based on gatsby-plugin-dark-mode . Notes: Design tokens are now CSS custom properties in globalStyle.js . Colours are still interpolated from the design/color.js module in case we need to access colours from JavaScript. It's straightforward to theme icons embedded in JSX as <svg> elements since the fill property can take the value of a custom property. Background image icons in CSS are trickier. In one case we use a mask-image technique, in another case we had to create a specialized icon with a fixed colour. Added some styling (including an elevation system) for the search hit components and made those hits look better in dark mode. Did some initial work on fixing mobile issues in the responsive design; the logic in the media queries is still quite limited. See https://github.com/lsst-sqre/www_lsst_io/pull/17  for screen shots.

            People

            Assignee:
            jsick Jonathan Sick
            Reporter:
            jsick Jonathan Sick
            Watchers:
            Jonathan Sick
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Jenkins

                No builds found.