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

Create a package for design tokens and reusable components for Science Platform apps

    XMLWordPrintable

    Details

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

      Description

      The purpose of this ticket is to create an "npm" package that contains reusable elements for Science Platform websites and applications based on a React and styled-components stack. This package can also be used by the documentation portal (https://github.com/lsst-sqre/www_lsst_io). Specific goals are:

      • Encode colours in YAML files in such a way that those colours can be imported/embedded into style sheets or other components.
      • Provide a source for reusable base style sheets
      • Provide an importable package for styled-components and other common react components.

        Attachments

          Issue Links

          relates to

          Story - Created by Jira Software - do not edit or delete. Issue type for a user story. DM-28486 Squareone: Implement the basic design of the landing page

          • Done

          Story - Created by Jira Software - do not edit or delete. Issue type for a user story. DM-28537 Implement dark/light theme architecture in rubin-style-dictionary

          • Done

            Activity

            Hide
            Permalink
            jsick Jonathan Sick added a comment -

            The outcome of this ticket is that we've decided to use Style Dictionary, from Amazon. With this set up, we encode design tokens in YAML files and can export those tokens into any sort of export format. We've started with exports to CSS custom properties and ES6 modules. The repo is: https://github.com/lsst-sqre/rubin-style-dictionary

            This is packed in a node package, @lsst-sqre/rubin-style-dictionary, that we publish to GitHub Packages through a GitHub Actions release workflow.

            A major inspiration for this work is:

             

            Show
            jsick Jonathan Sick added a comment - The outcome of this ticket is that we've decided to use Style Dictionary, from Amazon. With this set up, we encode design tokens in YAML files and can export those tokens into any sort of export format. We've started with exports to CSS custom properties and ES6 modules. The repo is:  https://github.com/lsst-sqre/rubin-style-dictionary This is packed in a node package, @lsst-sqre/rubin-style-dictionary , that we publish to GitHub Packages through a GitHub Actions release workflow. A major inspiration for this work is: https://dbanks.design/blog/multi-platform/ https://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa https://medium.com/bumble-tech/design-tokens-beyond-colors-typography-and-spacing-ad7c98f4f228  

              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.