{"id":13632075,"url":"https://github.com/radicle-dev/radicle-design-system","last_synced_at":"2025-04-18T01:32:26.858Z","repository":{"id":52995862,"uuid":"519237117","full_name":"radicle-dev/radicle-design-system","owner":"radicle-dev","description":"Radicle Design System 🎨","archived":false,"fork":false,"pushed_at":"2024-02-14T10:18:37.000Z","size":4135,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-08-01T22:51:39.458Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/radicle-dev.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":"SupportButton.svelte","governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-07-29T14:05:42.000Z","updated_at":"2024-05-21T03:35:09.000Z","dependencies_parsed_at":"2024-01-22T01:09:54.711Z","dependency_job_id":"b1be675c-0590-45b5-8cb4-a1885b3db583","html_url":"https://github.com/radicle-dev/radicle-design-system","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radicle-dev%2Fradicle-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radicle-dev%2Fradicle-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radicle-dev%2Fradicle-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radicle-dev%2Fradicle-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/radicle-dev","download_url":"https://codeload.github.com/radicle-dev/radicle-design-system/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223772124,"owners_count":17199968,"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-08-01T22:02:50.526Z","updated_at":"2024-11-09T00:30:36.695Z","avatar_url":"https://github.com/radicle-dev.png","language":"Svelte","funding_links":[],"categories":["Svelte"],"sub_categories":[],"readme":"## Radicle Design System 🎨\n\nA showcase of the latest version is deployed [here][dp].\nAlso [hosted on Radicle][hr].\n\n## Getting started\n\nAdd this to your `package.json`:\n```\n{\n  \"dependencies\": {\n    \"radicle-design-system\": \"https://github.com/radicle-dev/radicle-design-system\",\n  },\n  \"scripts\": {\n    \"postinstall\": \"scripts/install-twemoji-assets.sh \u0026\u0026 scripts/install-design-system-static-assets.sh\"\n  }\n}\n```\n\nIf you're using yarn v2, configure yarn to use the `node-modules` linker to\nensure that assets are stored in your project's `node_modules` by running:\n\n```\nyarn config set nodeLinker node-modules\n```\n\nThen, create the following scripts and make sure they're executable:\n\n- `scripts/install-twemoji-assets.sh`\n```\n#!/bin/bash\n# Download the Twemoji SVGs and put them into public/twemoji.\n\nset -Eeou pipefail\nversion=\"$(node -e 'console.log(require(\"twemoji/package.json\").version)')\"\necho \"Installing Twemoji SVG assets v${version}\"\n\ncurl -sSL \"https://github.com/twitter/twemoji/archive/refs/tags/v${version}.tar.gz\" \\\n  | tar -x -z -C public/twemoji/ --strip-components=3 \"twemoji-${version}/assets/svg\"\n```\n\n- `scripts/install-design-system-static-assets.sh`\n```\n#!/bin/bash\n# Install design system assets.\n\nset -Eeou pipefail\necho \"Installing Radicle Design System assets\"\ncp ./node_modules/radicle-design-system/static/*.css ./public/styles\ncp ./node_modules/radicle-design-system/static/fonts/*.otf ./public/fonts\n```\n\nAdjust the paths of the assets according to the requirements of your project\nand import all of the CSS files in your project root `index.html`.\n\nNote: Instead of serving the files and importing them client-side, you may also\nrequire the css files directly from `node_modules` if your bundler is set up to\nimport `.css` files. To do so, just `import` the css files directly from the\n`radicle-design-system` package:\n\n```\nimport 'radicle-design-system/static/reset.css';\nimport 'radicle-design-system/static/global.css';\nimport 'radicle-design-system/static/colors.css';\nimport 'radicle-design-system/static/elevation.css';\nimport 'radicle-design-system/static/typography.css';\n```\n\nThis will work out of the box on `sveltekit`. If you import the css files\ndirectly from the package, you can remove the following line:\n```\ncp ./node_modules/radicle-design-system/static/*.css ./public/styles\n```\nfrom the `install-design-system-static-assets.sh` script described above.\n\nFinally, run `yarn install`. Now you can start using the components and\nutility functions provided by the design system like this:\n\n```\n\u003cscript\u003e\n  import * as format from 'radicle-design-system/lib/format.ts';\n  import Button from 'radicle-design-system/Button.svelte';\n\u003c/script\u003e\n\n\u003cButton\u003eHello world!\u003c/Button\u003e\n{format.shortPeerId(\"hyyo6u8rhnuswory4c6symx471yseke74oq1myfesoig7zggcixejy\")}\n```\n\n\n## Colors\n\nThe design system supports multiple color palettes via themes which can be\nchanged by adding a `data-theme` attribute to your html document:\n```\n\u003chtml data-theme=\"light\"\u003e\n\u003c/html\u003e\n```\n\nCurrently the design system supports the `light`, `dark` and `h4x0r` themes.\nRead more about the colors [here][cs].\n\n\n## Typography\n\nThe design system provides a constrained set of typographic styles. This\nconsists of a set of styled headers, a set of styled paragraphs and a set of\nmodifiers. These also overlap with the components we have in our design system\nin Figma, where the design of the app exists. All classes are prefixed with\n`typo-` so this might be helpful if you have any autocomplete in your editor.\n\nFor the headers you can just use `\u003ch1\u003e` up to `\u003ch5\u003e`, if you want to apply the\nsame styles to other html elements you can use the matching classes\n`typo-header-1` to `typo-header-5` (use `\u003ch1\u003e` to `\u003ch5\u003e` where you can).\n\nFor text you can use the classes that start with `typo-text`. These come in\n2 sizes, the normal one and `typo-text-small`. Check out\n[typography.css][ty] to get an idea of the possible\ncombinations. All the ones we're using in Figma are represented here.\n\nThe modifiers give us some flexibility and allow us to create classes for\ncertain css functionality we use over and over. Such as,\n`typo-overflow-ellipsis` and `typo-all-caps`. These should be self-explanatory.\n\nWe also added a set of modifiers that allow you to add the font-family as a\nclass where you need it, here again we would recommend not doing that as most\nstyles should fit into one of the two categories above.\n\n\n## Contributing to design\n\nSince Radicle is an open source project, anyone can contribute. This is normal\nin open source development, but we do it for design too!\n\n  - Start by joining our [Discord server][dc] to chat with anyone on the core\n    team and ask any questions you have. It’s all public and open for anyone to\n    join and chat. We even have our \"internal\" chats in public where we chat\n    regularly about features.\n\n  - If you need any help getting set up with our [Figma file][ff] just ask one\n    of the core designers on the team [@brandonhaslegs][bo] or\n    [@juliendonck][jd]. You’ll need to duplicate the file and make changes in\n    your own private file. If we accept them, we’ll integrate them into the\n    official file.\n\n  - Please submit design solutions on GitHub. Just post screenshots, videos, or\n    Figma prototype links of your solution and a description on the issue.\n\n\n## Attribution\n\nThe Radicle Design System uses:\n  - [Twemoji by Twitter][tw]\n  - [The Inter typeface family by Rasmus Andersson][ra]\n  - [Source Code Pro font family by Adobe][so]\n\n\n[bo]: https://github.com/brandonhaslegs\n[cs]: https://radicle.community/t/color-system/166\n[dc]: https://discord.com/channels/841318878125490186/841318878650302490\n[dp]: https://radicle-dev.github.io/radicle-design-system\n[ff]: https://www.figma.com/file/owmgsbs6lnUt8R1bixstCA/Radicle?node-id=0%3A1\n[hr]: https://app.radicle.network/seeds/maple.radicle.garden/rad:git:hnrkm5drkd7huqxhbtbqwsun81ciomo536kgo\n[jd]: https://github.com/juliendonck\n[ra]: https://rsms.me/inter\n[so]: https://adobe-fonts.github.io/source-code-pro\n[tw]: https://twemoji.twitter.com\n[ty]: ./static/typography.css\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradicle-dev%2Fradicle-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradicle-dev%2Fradicle-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradicle-dev%2Fradicle-design-system/lists"}