{"id":13402723,"url":"https://github.com/divriots/simba","last_synced_at":"2025-05-05T13:31:25.405Z","repository":{"id":38308956,"uuid":"381954488","full_name":"divriots/simba","owner":"divriots","description":"Lion-based Design System","archived":false,"fork":false,"pushed_at":"2023-04-19T07:42:20.000Z","size":669,"stargazers_count":22,"open_issues_count":2,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-04T07:45:58.304Z","etag":null,"topics":["backlight","design-system","lion","tailwindcss","webcomponents"],"latest_commit_sha":null,"homepage":"https://backlight.dev/review/5vtJtbY04aoD1dGKcsu1","language":"JavaScript","has_issues":true,"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/divriots.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-07-01T07:56:57.000Z","updated_at":"2024-08-22T16:29:03.000Z","dependencies_parsed_at":"2023-07-17T03:30:13.315Z","dependency_job_id":null,"html_url":"https://github.com/divriots/simba","commit_stats":{"total_commits":116,"total_committers":6,"mean_commits":"19.333333333333332","dds":0.3448275862068966,"last_synced_commit":"ae3942b651bcecc3d7f08f567de395793d13d322"},"previous_names":["divriots/starter-simba"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fsimba","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fsimba/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fsimba/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fsimba/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/simba/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252506416,"owners_count":21759042,"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":["backlight","design-system","lion","tailwindcss","webcomponents"],"created_at":"2024-07-30T19:01:19.999Z","updated_at":"2025-05-05T13:31:24.926Z","avatar_url":"https://github.com/divriots.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Simba\n\n\u003e For the old NPM package, see [starter-simba](https://www.npmjs.com/package/@divriots/starter-simba).\n\n\u003cp\u003e\n  \u003ca href=\"https://divRIOTS.com\"\u003eBrought to you by\u003cbr/\u003e\u003c/a\u003e\n  \u003ca href=\"https://divRIOTS.com#gh-light-mode-only\"\u003e\n    \u003cimg width=\"150\" height=\"40\" src=\"https://divRIOTS.com/divriots.svg\" alt=\"‹div›RIOTS\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://divRIOTS.com#gh-dark-mode-only\"\u003e\n    \u003cimg width=\"150\" height=\"40\" src=\"https://divRIOTS.com/divriots-dark.svg\" alt=\"‹div›RIOTS\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nA [lion](https://lion-web.netlify.app/) based design system as a starter kit\nfor [Backlight](https://backlight.dev/), an all-in-one Design System platform,\ndesign inspired by [TailwindCSS](https://tailwindcss.com/).\n\n## [🔗 See it in action](https://backlight.dev/preview/5vtJtbY04aoD1dGKcsu1)\n\nClick the \"Edit\" button to also see the source code in the Backlight editor.\n\n## Features\n\n- 🍴 Easy to fork and create your own variation using [Backlight](https://backlight.dev/)\n- ⚒️ Interoperable, built on top of platform-standards, [works in any framework](https://custom-elements-everywhere.com/)\n- 🌙 Darkmode out of the box\n- 🦄 Theming capabilities, choose any color from Tailwind palette out of the box, with room for more!\n- 📦 Available on NPM to extend or use directly\n\n\u003e In case you don't use Backlight.dev but use straight from NPM, refer to our [usage from NPM guide](./UsingNPM.md).\n\n## Migration\n\nMigrating to a new minor (since this is alpha), see [Migration Docs](./migration.md).\n\n## Usage\n\n### Duplicate in Backlight\n\nThis is the recommended way, as backlight gives you an all-in-one Design System platform.\n\nIn order to create your own project from this starter kit using Backlight, go to the [Backlight website](https://backlight.dev/) and sign up, request early access, or log in if you already have an account.\n\nMake sure you have a Backlight Workspace, then go to [simba-starter on backlight](https://backlight.dev/edit/5vtJtbY04aoD1dGKcsu1) and click the **Duplicate** button in the top right corner, this will create a project based on this starter-kit for you.\n\n```js\nimport { html } from '~/core';\nimport '~/button/define';\n\nexport const templ = html`\u003csimba-button\u003eSubmit\u003c/simba-button\u003e`;\n```\n\n## Contributing\n\nSee our [Contribution Guidelines](./CONTRIBUTING.md)\n\n## Rationales\n\n### Types\n\nLion comes with type definition files and can be used in TypeScript. At the moment, simba-starter does not come with types out of the box just yet, but as this starter-kit progresses, we may add them, either by converting the project to Typescript or by using JSDocs similar to Lion's setup.\n\n### Tests\n\nLion comes with thousands of tests already, so 95% of the functionality that simba relies on is quite thoroughly unit-tested already. That said, simba adds opinionated extensions on top of lion that are not tested as of now. This will likely be added later and contributions are of course welcome.\n\n### Docs\n\nFor documentation, we opt for [MDJS](https://rocket.modern-web.dev/docs/markdown-javascript/overview/), Markdown Javascript. This is markdown files with custom codeblock syntaxes to allow for interactive demos, right in the middle of your written documentation. We believe this is a good way to showcase components, as it is both narrative and live-demo-based. If you use Backlight, `MDJS` integration comes out of the box, so you can go ahead and start writing your MDJS-markdown files straight away without any setup!\n\n### Structure\n\nIn the `studio.config.json` we define the structure of this starter-kit, which basically consists of four sections:\n\n- Tokens, values such as colors and spacings, needed to construct and maintain the design system and components\n- Components, lion-based UI components\n- Infrastructure, utilities and mixins used across multiple components.\n- Docs, any utilities used to style the documentation in Backlight or add functionality.\n\n### Importing lion modules\n\nAt this moment, simba does not re-export everything from `@lion` just yet.\nEverything from `@lion/core` is re-exported, meaning that you can import things like `html`, `LitElement`, etc. from `@divriots/simba-starter/core` or `~/core` locally.\nThis is recommended, because it avoids deduplication issues.\n\nIf you need to import from `@lion` directly, it's important that installations of lion and its dependencies are properly deduped.\nIn Backlight, this is taken care of for you on the backend, and you won't have to worry about it.\nIf you use `simba` outside of Backlight, you will need to ensure that deduplication is handled, otherwise you will run into breaking bugs.\n\n### !important in ::slotted selectors\n\nRight now, as per W3C specs, ::slotted CSS specificity is just that of a pseudo element.\nUnlike :host, it does not include the specificity of the passed argument selector.\n\nThis means that almost any selector from outside that targets the slotted element will override your ::slotted CSS.\nThis is not ideal, [there's an open issue](https://github.com/w3c/csswg-drafts/issues/6466) to try to improve this.\n\nFor now the workaround is to use `!important` for all your CSS rules inside ::slotted to protect them from being overriden by the outside.\nSadly, this means you will have to fight cascade battles and use `!important` yourself too, which is probably worse than fighting specificity battles, but so be it until the spec changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fsimba","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Fsimba","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fsimba/lists"}