{"id":21070369,"url":"https://github.com/stencila/designa","last_synced_at":"2025-05-16T05:30:48.934Z","repository":{"id":39042680,"uuid":"114327722","full_name":"stencila/designa","owner":"stencila","description":"📐 Stencila's design system","archived":false,"fork":false,"pushed_at":"2025-05-02T18:49:34.000Z","size":51728,"stargazers_count":12,"open_issues_count":43,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-02T19:37:23.434Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stencila.github.io/designa","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stencila.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-12-15T04:37:48.000Z","updated_at":"2025-02-26T18:15:29.000Z","dependencies_parsed_at":"2023-11-10T14:36:31.551Z","dependency_job_id":"8d91e531-8c3a-4149-b3a2-1cd686518b57","html_url":"https://github.com/stencila/designa","commit_stats":{"total_commits":932,"total_committers":13,"mean_commits":71.6923076923077,"dds":0.4334763948497854,"last_synced_commit":"cd66b1982d1c702efac64bfe794db7954e7aacdd"},"previous_names":["stencila/style"],"tags_count":433,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencila%2Fdesigna","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencila%2Fdesigna/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencila%2Fdesigna/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stencila%2Fdesigna/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stencila","download_url":"https://codeload.github.com/stencila/designa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254120179,"owners_count":22017953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T18:46:42.105Z","updated_at":"2025-05-16T05:30:43.907Z","avatar_url":"https://github.com/stencila.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📐 Designa\n\n#### Visual design components for executable documents\n\n[![Build Status](https://github.com/stencila/designa/workflows/Build%20and%20Publish%20packages/badge.svg?branch=master)](https://github.com/stencila/designa/actions?query=workflow%3A%22Build+and+Publish+packages%22)\n[![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://stencila.github.io/designa/)\n[![Community](https://img.shields.io/badge/join-community-green.svg)](https://discord.gg/uFtQtk9)\n\n## 👋 Introduction\n\nThis is the place for Stencila's visual design resources (e.g. CSS, icons,\nlogos), styles and Web Components. The resources here are reused across a number of\nother repositories including our main [`website`](https://github.com/stencila/website), the\n[`hub`](https://github.com/stencila/hub), and [`thema`](https://github.com/stencila/thema).\n\nWe aim to maintain browser support for popular browsers according to [Browserslist](https://github.com/browserslist/browserslist#best-practices), [excluding IE11 and below](https://github.com/stencila/designa/blob/d3b70de5206d7e0380455cbc7f81ff64612b80c6/package.json#L10-L14).\n\n## 📦 Packages\n\nThis repository is a [monorepo](https://en.wikipedia.org/wiki/Monorepo), and contains the following packages.\n\n| Name                                        | Description                                                                                                      | NPM                                                                                                                                    |\n| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| [components](./packages/components)         | Web Components built using [StencilJS](https://stenciljs.com), styled using the `style-*` packages listed below. | [![NPM](https://img.shields.io/npm/v/@stencila/components.svg?style=flat)](https://www.npmjs.com/package/@stencila/components)         |\n| [style-stencila](./packages/style-stencila) | CSS for styling semantic HTML markup in Stencila's own visual language.                                          | [![NPM](https://img.shields.io/npm/v/@stencila/style-stencila.svg?style=flat)](https://www.npmjs.com/package/@stencila/style-stencila) |\n| [style-material](./packages/style-material) | CSS for styling semantic HTML markup in Google's Material Design visual language.                                | [![NPM](https://img.shields.io/npm/v/@stencila/style-material.svg?style=flat)](https://www.npmjs.com/package/@stencila/style-material) |\n| [brand](./packages/brand)                   | Stencila branding elements such as fonts, logos, and illustrations.                                              | [![NPM](https://img.shields.io/npm/v/@stencila/brand.svg?style=flat)](https://www.npmjs.com/package/@stencila/brand)                   |\n\n## 📜 Documentation\n\nSee the [guide](./packages/components) for getting started with integrating our Web Components into your site. Then, more detailed, interactive documentation for each component is available at https://stencila.github.io/designa/. For example, see the docs on the [code editor](https://stencila.github.io/designa/?path=/docs/atoms-editor-) and executable [code chunk](https://stencila.github.io/designa/?path=/docs/schema-nodes-code-chunk) components.\n\n## 🛠 Development\n\nTo get started with development, clone this repo:\n\n```sh\ngit clone git@github.com:stencila/designa.git\n```\n\nThen install the necessary Node.js packages:\n\n```sh\nnpm install\n```\n\nBuild the styles:\n\n```sh\nnpm run build:styles\n```\n\nThen build the components on changes,\n\n```sh\nnpm run build:components:watch\n```\n\n\u003e 👩‍💻 There are also `build:styles:stencila:watch` and `build:styles:material:watch` scripts for building styles on changes.\n\nIn a _separate terminal window_ start Storybook:\n\n```sh\nnpm run storybook\n```\n\n\u003e 🏎 Note: To significantly reduce development build times you can disable the `cssnano` PostCSS plugins from the the `.postcssrs.json` files in `packages/style-stencila` and `packages/style-material`.\n\n### Adding Components\n\nCreate a [new Storybook story](https://storybook.js.org/docs/basics/writing-stories/)\nand avoid using CSS classes as much as possible. Use semantic HTML tags and WAI-ARIA\nattributes instead. See the [External Resources](#External-Resources) section\nbelow for useful references.\n\nOnce the story is written, you will need to add appropriate styles for each design system.\nCurrently we support:\n\n- [Stencila's own design system](./packages/style-stencila)\n- [Material Design system](./packages/style-stencila)\n\n### Commit Messages\n\nPlease use [conventional\nchangelog](https://github.com/conventional-changelog/conventional-changelog)\nstyle commit messages e.g. `docs(readme): fixed spelling mistake`.\n[`semantic-release`](https://github.com/semantic-release/semantic-release) is\nenabled to automate version management: minor version releases are done if\nany `feat(...)` commits are pushed, patch version releases are done if any\n`fix(...)` commits are pushed. See [the\nspecifications](https://www.conventionalcommits.org/en/v1.0.0-beta.2/) for\nfull details.\n\n### External Resources\n\n- [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1)\n- [Inclusive Components](https://inclusive-components.design)\n- [TailwindCSS](https://tailwindcss.com)\n\n## 🙏 Acknowledgments\n\nWe rely on many tools and services for which we are grateful ❤ to their developers and contributors for all their time and energy.\n\n| Tool                                                                                                                    | Use                                                                                                |\n| ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"Sauce Labs\"\u003e\u003cimg src=\"./.github/PoweredBySauceLabs.svg\" width=\"150\" alt=\"Testing powered by Sauce Labs\" /\u003e\u003c/a\u003e | Cross-browser Testing Platform and Open Source \u003c3 Provided by [Sauce Labs](https://saucelabs.com). |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstencila%2Fdesigna","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstencila%2Fdesigna","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstencila%2Fdesigna/lists"}