npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@owlui/design

v0.0.46

Published

- Open Adobe XD and create a [new file](./readme-assets/01-new-file.png) - Add some `Text` to the canvas, select the text and add its color and character styles to the [document assets](./readme-assets/02-text-example.png). - Save the file to the [Creativ

Downloads

34

Readme

Creating a Design

  • Open Adobe XD and create a new file
  • Add some Text to the canvas, select the text and add its color and character styles to the document assets.
  • Save the file to the Creative Cloud
  • Select the publish as a library button and click the publish button in the current file section
  • Click the browse tab, then click the done button on the Browse shared libraries
  • Go to the Files tab of the Creative Cloud portal and select the Your libraries section
  • You should see a card of your file, hover over the card and click the menu icon then select the share option. You should see a modal open and a link being generated. COPY that link.

Using the Design

To use the design we need to import the design file from XD then create a Design System Package (DSP).

CC Lib Link

https://shared-assets.adobe.com/link/bf505209-e2bf-4af5-6378-307f3338bd14

Importing to VS Code

  • Install the Adobe VS Code extension
  • Open the extension cmd + opt + x. It may try to locate a DSP, just close the file explorer if it does
  • Go to the DSP settings
  • Change the Languages so that only SCSS is selected
  • Paste the link into the CC LIBRARY LINK field and click import
  • Click Save
  • Click Start Editing then Finish Editing
  • Use your terminal apply changes to the Theme component: yarn run presetup

Updating the DSP

  • Go to the DSP settings
  • Click the Re-import button of CC LIBRARY LINK field
  • Click Save
  • Click Start Editing then Finish Editing
  • Use your terminal apply changes to the Theme component yarn run presetup

Design Tokens

The DSP makes use of reference and contextual tokens. Reference tokens are hard values taken from import of the XD file. The contextual tokens are custom to the DSP and use the reference tokens as a value. This methodology has been directly inspired from material design.

Example

owl.ref.palette.dark is used as the value for owl.sys.color.on.light and owl.sys.bg.dark.

This approach allows the developer to be concerned with only having to implement the appropriate context to element styling and leaves the designer free to make changes to references without having to worry about breaking code.