{"id":23823229,"url":"https://github.com/3lvia/designsystem","last_synced_at":"2025-09-07T05:32:26.108Z","repository":{"id":224941762,"uuid":"295383407","full_name":"3lvia/designsystem","owner":"3lvia","description":"Designsystem for all Elvia websites and apps https://design.elvia.io/","archived":false,"fork":false,"pushed_at":"2025-09-06T02:49:25.000Z","size":115370,"stargazers_count":4,"open_issues_count":4,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-09-06T04:22:32.559Z","etag":null,"topics":["angular","design-system","docs","react","web-components"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/3lvia.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-09-14T10:36:32.000Z","updated_at":"2025-09-06T02:48:35.000Z","dependencies_parsed_at":"2025-09-06T04:26:19.942Z","dependency_job_id":null,"html_url":"https://github.com/3lvia/designsystem","commit_stats":{"total_commits":4794,"total_committers":20,"mean_commits":239.7,"dds":0.710680016687526,"last_synced_commit":"b0b81d2ab651e2b9d777f48a77a6ce11eb973d56"},"previous_names":["3lvia/designsystem"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/3lvia/designsystem","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3lvia%2Fdesignsystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3lvia%2Fdesignsystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3lvia%2Fdesignsystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3lvia%2Fdesignsystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3lvia","download_url":"https://codeload.github.com/3lvia/designsystem/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3lvia%2Fdesignsystem/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273986619,"owners_count":25202707,"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","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular","design-system","docs","react","web-components"],"created_at":"2025-01-02T10:15:35.272Z","updated_at":"2025-09-07T05:32:26.088Z","avatar_url":"https://github.com/3lvia.png","language":"HTML","readme":"# Elvia design system\n\n\u003e [!NOTE]\n\u003e Further development of the design system is currently on hold.\n\n![Decorative image of the design system](https://design.elvia.io/assets/HomeIllustration.png)\n\nRead our documentation at: [Design.elvia.io](https://design.elvia.io/)\n\nElvia’s design system (Elvis) is a scalable system of visual language, components and design assets which\nenables us to work together towards an ultimate brand experience.\n\n## ✨ Features\n\n- 🌈 Style guide and CSS library with lots of classes and utilities\n- 📦 Components built in TypeScript and React (Supported in all JavaScript frameworks)\n- 💚 Elvia’s brand guide\n- 🛠 Design and development tools\n- 📑 Patterns to solve common user flow to ensure consistent experience across applications\n\n## ✅ Environment support\n\n- Chrome latest\n- Safari latest\n- Firefox latest\n- Edge latest\n\n## 📚 How to use\n\nRead our [get started guide](https://design.elvia.io/about/get-started) at design.elvia.io to get started\nusing our CSS library and components. The CSS library and the components can be used through NPM packages.\n\n### CSS library\n\n**CSS library usage example:**\n\n```html\n\u003cbutton class=\"e-btn\"\u003eButton\u003c/button\u003e\n```\n\n### Components\n\n**Component usage example:**\n\n```html\n\u003celvia-progress-linear [value]=\"20\"\u003e\u003c/elvia-progress-linear\u003e\n```\n\n### Using icons\n\nOur icon library is based on Streamline icons. The icons that are from Streamline is not made accessible under\nthe same license as this npm package. Those icons are still the property of Webablys LLC. Elvia has bought a\nlicense for the use of these icons in the organization. They can also be used in open source projects as long\nas you follow their license.\n\n[Streamline license information](https://help.streamlineicons.com/license-premium)\n\n## 💻 Development\n\n- [Design system Architecture](https://elvia.atlassian.net/wiki/spaces/TEAMATOM/pages/64486539701/Designsystem+v2).\n  Find more information about the CSS library and Components library in the Confluence folder\n  [Development / Architecture](https://elvia.atlassian.net/wiki/spaces/TEAMATOM/pages/309562041/Utvikling+og+arkitektur).\n\n### Technology\n\n- We use **Yarn**, NPM will probably not work as expected.\n- We use a monorepo structure with **Yarn workspaces**.\n- We use **Angular** for the main documentation page and **Azure Static Web Apps** to host the site.\n- We use **React** to build our components and wrap them as\n  **[Custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)** to\n  make them accessible for multiple JavaScript frameworks.\n- We have some newer components written either as pure web components, or using **[@lit](https://lit.dev/)**.\n- We use **Jest** for unit testing of our components.\n- **[@emotion](https://emotion.sh/docs/introduction)**,\n  **[classnames](https://www.npmjs.com/package/classnames)** and **SCSS** for styling our components.\n- We use **[Percy](https://percy.io/)** for visual regression testing for our CSS library and components.\n- We use **Figma** for sketching the components. The\n  [Elvia figma](https://www.figma.com/files/880078299274452916/project/5995782/%F0%9F%92%9A-Designsystemet?fuid=911220117114249697)\n  has all the sketches for our components.\n- We use **SonarCloud** for automatic code quality checks.\n\n### How we work\n\nRead more about how we work inside the team e.g. with our backlog in Jira, or our component flow (creating new\ncomponents from start to finish) in this Confluence folder:\n[Team Atom - Workflow](https://elvia.atlassian.net/wiki/spaces/TEAMATOM/pages/64486736397/Arbeidsflyt).\n\n### Setup\n\nSetup for development environment:\n\n0. Clone repository, checkout new branch from master, and run `yarn`.\n1. Building projects:\n   1. Run `yarn build` to build all projects for productions.\n   2. Run `yarn build:web` to build the web project.\n   3. Run `yarn build:components` to build the components (will first clean all dist-folders).\n   4. Run `yarn build:tokens` to build the two token packages.\n2. Running projects:\n   1. Run `yarn start:web` to run the main documentation page (design.elvia.io).\n   2. Run `yarn start:components` to watch for the components (every time components are changed).\n   3. Run `yarn start:elvis` to watch for the style-library components (every time elvis-components are\n      changed).\n   4. Run `yarn start:react` to run the react test-project (testing components).\n   5. Run `yarn start:vue` to run the vue test-project (testing components).\n\n### Start developing\n\nTo start developing components and styling follow the guides below:\n\n- To start development for the CSS library Elvis follow the\n  [Elvis README guide](https://github.com/3lvia/designsystem/blob/master/packages/elvis/README.md).\n- To start development for Components (JavaScript) follow the\n  [Components README guide](https://github.com/3lvia/designsystem/blob/master/packages/components/README.md).\n- Read more about working on our documentation page here:\n  [Web (design.elvia.io)](https://github.com/3lvia/designsystem/blob/master/packages/web/README.md).\n\n### Publish\n\nAll packages that are merged to the master branch with a new version in their `package.json` will\nautomatically be published to npm. If you wish to publish beta versions of packages that can be done manually.\n\nIf for some reason a package publishing fails, you can publish all the packages to npm at once by using\n`yarn publish --otp \u003cINSERT_OTP\u003e` from root. It will publish all packages where the version number is updated\nfrom what is currently published and the package is not marked as private in the `package.json`.\n\n## 🤝 Contribute\n\nFeedback from everyone in Elvia is welcomed and developers and designers are urged to contribute where they\ncan.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3lvia%2Fdesignsystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3lvia%2Fdesignsystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3lvia%2Fdesignsystem/lists"}