{"id":23927130,"url":"https://github.com/rolemodel/optics","last_synced_at":"2025-04-12T06:08:21.257Z","repository":{"id":37509744,"uuid":"468074286","full_name":"RoleModel/optics","owner":"RoleModel","description":"Optics, a RoleModel Design System is a CSS package that provides base styles and components that can be integrated and customized in a variety of projects.","archived":false,"fork":false,"pushed_at":"2025-04-01T19:06:37.000Z","size":17766,"stargazers_count":15,"open_issues_count":6,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-12T06:08:07.079Z","etag":null,"topics":["css","design","design-system","design-systems","optics","storybook"],"latest_commit_sha":null,"homepage":"https://docs.optics.rolemodel.design","language":"CSS","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/RoleModel.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}},"created_at":"2022-03-09T19:58:26.000Z","updated_at":"2025-04-09T10:20:56.000Z","dependencies_parsed_at":"2023-10-11T16:25:45.657Z","dependency_job_id":"7517f01c-5322-497c-97d9-4fd7f3392788","html_url":"https://github.com/RoleModel/optics","commit_stats":{"total_commits":160,"total_committers":8,"mean_commits":20.0,"dds":"0.23750000000000004","last_synced_commit":"2d4d85116222d58b8fdc8b598b1d28d30c71562b"},"previous_names":["rolemodel/rolemodel-design-system"],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Foptics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Foptics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Foptics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoleModel%2Foptics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RoleModel","download_url":"https://codeload.github.com/RoleModel/optics/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525141,"owners_count":21118619,"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":["css","design","design-system","design-systems","optics","storybook"],"created_at":"2025-01-05T22:14:25.282Z","updated_at":"2025-04-12T06:08:21.247Z","avatar_url":"https://github.com/RoleModel.png","language":"CSS","readme":"# Optics, a RoleModel Design System\n\n\u003cdiv style='display: flex; gap: 10px;'\u003e\n\n[![Code](https://img.shields.io/badge/GitHub-Code-232323.svg?logo=github\u0026logoColor=white)](https://github.com/RoleModel/optics)\n\n[![License](https://img.shields.io/badge/license-MIT-232323.svg)](https://github.com/RoleModel/optics/blob/main/LICENSE)\n\n[![npm](https://img.shields.io/npm/dw/@rolemodel/optics?label=npm)](https://www.npmjs.com/package/@rolemodel/optics)\n\n[![Linting CI](https://github.com/RoleModel/optics/actions/workflows/linting.yml/badge.svg)](https://github.com/RoleModel/optics/actions/workflows/linting.yml)\n\n\u003c/div\u003e\n\nOptics is an css package that provides base styles and components that can be integrated and customized in a variety of projects.\n\n## Installation\n\n### NPM\n\n```sh\nnpm install @rolemodel/optics\n```\n\n### Yarn\n\n```sh\nyarn add @rolemodel/optics\n```\n\n### Import\n\nYou can add this import to the top of your root level `css` file.\n\n```css\n@import '@rolemodel/optics'; /* Using webpack to compile */\n/* Or */\n@import '@rolemodel/optics/dist/css/optics'; /* Using a different compiler or no compiler */\n/* Or */\n@import '@rolemodel/optics/dist/css/optics.min.css'; /* If you want a single file with all the styles in it. */\n```\n\n## Documentation\n\nWe use [Storybook](https://storybook.js.org/docs/html/get-started/introduction) as a way to provide informative and interactive documentation.\n\nIt can be found here [Optics Documentation](https://docs.optics.rolemodel.design/)\n\n### Token Documentation\n\nWe use the Storybook Design Token for showing design tokens in the documentation. This allows us to tag groups of tokens with a category and a presenter.\n\n[Available Presenters](https://github.com/UX-and-I/storybook-design-token#available-presenters)\n\nAdd the following above a group to categorize the tokens.\n\n```css\n/**\n* @tokens Basic Colors\n* @presenter Color\n*/\n```\n\n### Component Documentation\n\nFor instructions on how to create a new component, see [Process for Creating New Components](./NEW_COMPONENT.md)\n\nAdditional stories can be added using the following command, or copying an existing story.\n\n```sh\nnpm run generate\n```\n\nThe visual graphic found on the Selective Imports page in the documentation is generated from the `tools/generate-graph.dot` file. You can preview and export a newer svg version of the graphic by using the `tintinweb.graphviz-interactive-preview` VSCode extension.\n\n## License\n\n[MIT](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frolemodel%2Foptics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frolemodel%2Foptics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frolemodel%2Foptics/lists"}