{"id":15062732,"url":"https://github.com/louffee/canada-design-system","last_synced_at":"2025-10-04T22:31:28.622Z","repository":{"id":49341670,"uuid":"517396184","full_name":"louffee/canada-design-system","owner":"louffee","description":"Canada is the Louffee's Design System intended to make beautiful UIs with a lot of UX touches 🧭","archived":true,"fork":false,"pushed_at":"2023-10-07T05:14:45.000Z","size":1506,"stargazers_count":2,"open_issues_count":28,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-10T15:43:22.664Z","etag":null,"topics":["accessibility","atoms","canada","components","design","design-system","molecules","monorepo","react","storybook","ui","ux","ux-ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/louffee.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-07-24T17:48:41.000Z","updated_at":"2024-03-26T00:37:51.000Z","dependencies_parsed_at":"2023-02-08T08:30:34.916Z","dependency_job_id":"ec3a1cfb-7e9f-4acd-a324-9c1811463c5f","html_url":"https://github.com/louffee/canada-design-system","commit_stats":{"total_commits":442,"total_committers":5,"mean_commits":88.4,"dds":0.02941176470588236,"last_synced_commit":"b1692d678b9f3514ae7f5c977c360b0ae9e7fb12"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/louffee%2Fcanada-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/louffee%2Fcanada-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/louffee%2Fcanada-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/louffee%2Fcanada-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/louffee","download_url":"https://codeload.github.com/louffee/canada-design-system/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234943395,"owners_count":18911117,"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":["accessibility","atoms","canada","components","design","design-system","molecules","monorepo","react","storybook","ui","ux","ux-ui"],"created_at":"2024-09-24T23:45:23.348Z","updated_at":"2025-10-04T22:31:23.222Z","avatar_url":"https://github.com/louffee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Canada 🇨🇦\n\nCanada is the Louffee's Design System intended to make beautiful UIs with a lot of UX touches 🧭.\n\nA **Design System** is a collection of components that can be used to build UIs, following determined principles and styles, which are technically named **tokens**, and are also applied from design to code.\n\n## Overview\n\nInside the folder **packages**, the **Design System** is divided into several folders, each one containing _one component_ or purpose.\n\nInside the same folder also can be found the **variables** and **mixins** files, which are used to define the **tokens**. As well as the **global dev environment packages**, such as the configurations for ESLint, Prettier and StyleLint.\n\n**Our status ⚙️**\n\n| Environment       | Latest Status                                                                                                                                                                                                                    |\n| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Production        | [![Publish Production-Ready](https://github.com/louffee/canada-design-system/actions/workflows/publish.yml/badge.svg?branch=main\u0026event=push)](https://github.com/louffee/canada-design-system/actions/workflows/publish.yml)     |\n| Release Candidate | [![Publish Release Candidate](https://github.com/louffee/canada-design-system/actions/workflows/publish.yml/badge.svg?branch=develop\u0026event=push)](https://github.com/louffee/canada-design-system/actions/workflows/publish.yml) |\n\n## Influences\n\nSure we don’t know everything, also we’re not trying to reinvent the wheel, so surely we have some influences that can be found in the hyperlinks below.\n\n- [MUI](https://mui.com)\n- [Tomahawk UI](https://github.com/tomahawk-ui/tui)\n- [Emotion](https://emotion.sh)\n\n## Naming\n\nWe know that naming stuff is the hardest thing on earth for developers, so we decided to use a **naming convention** to make it easier for us.\n\nTo the folders inside the **component packages** folder, we decided to use the following naming convention:\n\n- `packages/@louffee-{component_name}`\n\nFor **global dev environment packages**, we decided to use the following naming convention:\n\n- `packages/@louffee-{config_original_3rd_package_name}-config`\n\n- If the original 3rd party package name contains the namespace `@` (for example: `@namespace/package-name`), we follow up the naming convention found in the `@types` namespace.\n\n  - For example: `@types/namespace__package-name`.\n\nFor packages related to **systems** like a system for defining style, we add a `-system` suffix to the package name.\n\n- For example: `packages/@louffee-{component_name}-system`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouffee%2Fcanada-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flouffee%2Fcanada-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flouffee%2Fcanada-design-system/lists"}