{"id":13472095,"url":"https://github.com/socketsupply/components","last_synced_at":"2025-08-20T03:31:09.080Z","repository":{"id":40297527,"uuid":"143901399","full_name":"socketsupply/components","owner":"socketsupply","description":"Example Components (Built with Tonic)","archived":false,"fork":false,"pushed_at":"2024-04-25T11:12:49.000Z","size":7956,"stargazers_count":84,"open_issues_count":8,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-08-18T03:49:37.041Z","etag":null,"topics":["cba","component-library","components","jam","jamstack","minimal","minimalist","ui","ui-components","ui-design","ui-router","web-components"],"latest_commit_sha":null,"homepage":"https://tonicframework.dev","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/socketsupply.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2018-08-07T16:41:53.000Z","updated_at":"2025-05-04T03:31:32.000Z","dependencies_parsed_at":"2023-07-18T07:11:21.805Z","dependency_job_id":"bc497abf-acd2-43e9-bf79-aff4eda9cdfb","html_url":"https://github.com/socketsupply/components","commit_stats":{"total_commits":1555,"total_committers":14,"mean_commits":"111.07142857142857","dds":0.4771704180064309,"last_synced_commit":"c65d007a3895c7d56e025544fd31170ffbc0ffaf"},"previous_names":["optoolco/components","operatortc/components"],"tags_count":172,"template":false,"template_full_name":null,"purl":"pkg:github/socketsupply/components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/socketsupply","download_url":"https://codeload.github.com/socketsupply/components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/socketsupply%2Fcomponents/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271258711,"owners_count":24728130,"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-08-20T02:00:09.606Z","response_time":69,"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":["cba","component-library","components","jam","jamstack","minimal","minimalist","ui","ui-components","ui-design","ui-router","web-components"],"created_at":"2024-07-31T16:00:51.871Z","updated_at":"2025-08-20T03:31:08.748Z","avatar_url":"https://github.com/socketsupply.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# SYNOPSIS\nA bundle of example components built with [Tonic](https://github.com/hxoht/tonic).\n\n![](https://github.com/socketsupply/components/workflows/ci/badge.svg)\n\n# USAGE\nTo use this example component library, install the following dependencies,\nThen, either register the components you want to bundle.\n\n```bash\nnpm install @socketsupply/tonic\nnpm install @socketsupply/components\n```\n\n#### INCLUDE INDIVIDUAL COMPONENTS\n\n```js\nimport Tonic from '@socketsupply/tonic'\nimport { TonicInput } from '@socketsupply/components/input'\nimport { TonicIcon } from '@socketsupply/components/icon'\n\nTonic.add(TonicInput, 'tonic-input')\nTonic.add(TonicIcon, 'tonic-icon')\n```\n\n#### INCLUDE COMPONENT COLLECTION\n\n```js\nimport Tonic from '@socketsupply/tonic'\nimport bundle from '@socketsupply/components'\n\nbundle(Tonic) // attach everything\n```\n\n### THEME\nTonic uses CSS variables (which work in all major browsers) to theme components.\nSo you can use any css framework you want. The following variables are observed\nbut are not required.\n\n#### FONTS\n```css\nbody {\n  --tonic-body: 'Inter', sans-serif;\n  --tonic-header: 'Inter Black', sans-serif;\n  --tonic-subheader: 'Inter Medium', sans-serif;\n  --tonic-monospace: 'FiraMono', monospace;\n}\n```\n\n#### LIGHT THEME (DEFAULT)\n\n```css\nbody, *[theme=\"light\"] {\n  --tonic-background: rgba(245, 245, 245, 1);\n  --tonic-window: rgba(255, 255, 255, 1);\n  --tonic-accent: rgba(56, 185, 255, 1);\n  --tonic-primary: rgba(54, 57, 61, 1);\n  --tonic-secondary: rgba(232, 232, 228, 1);\n  --tonic-light: rgba(153, 157, 160, 1);\n  --tonic-medium: rgba(153, 157, 160, 1);\n  --tonic-shadow: rgba(150, 150, 150, 0.25);\n  --tonic-dark: rgba(54, 57, 61, 1);\n  --tonic-disabled: rgba(152, 161, 175, 1);\n  --tonic-button-text: rgba(54, 57, 61, 1);\n  --tonic-button-shadow: rgba(0, 0, 0, 33%);\n  --tonic-button-background: rgba(245, 245, 245, 1);\n  --tonic-button-background-hover: rgba(230, 230, 230, 1);\n  --tonic-button-background-focus: rgba(237, 237, 237, 1);\n  --tonic-input-text: rgba(54, 57, 61, 1);\n  --tonic-input-text-hover: rgba(228, 228, 228, 1);\n  --tonic-input-border: rgba(201, 201, 201, 1);\n  --tonic-input-border-hover: rgba(54, 57, 61, 1);\n  --tonic-input-background: rgba(248, 248, 248, 1);\n  --tonic-input-background-focus: rgba(238, 238, 238, 1);\n  --tonic-border: rgba(224, 224, 224, 1);\n  --tonic-border-accent: rgba(206, 206, 206, 1);\n  --tonic-error: rgba(240, 102, 83, 1);\n  --tonic-notification: rgba(240, 102, 83, 1);\n  --tonic-danger: rgba(240, 102, 83, 1);\n  --tonic-success: rgba(133, 178, 116, 1);\n  --tonic-warning: rgba(249, 169, 103, 1);\n  --tonic-info: rgba(153, 157, 160, 1);\n  --tonic-overlay: rgba(255, 255, 255, 0.75);\n}\n```\n\n#### DARK THEME\n\n```css\n*[theme=\"dark\"] {\n  --tonic-background: rgba(40, 40, 40, 1);\n  --tonic-window: rgba(49, 49, 49, 1);\n  --tonic-accent: rgba(56, 185, 255, 1);\n  --tonic-primary: rgba(255, 255, 255, 1);\n  --tonic-secondary: rgba(195, 195, 195, 1);\n  --tonic-medium: rgba(153, 157, 160, 1);\n  --tonic-dark: rgba(41, 41, 41, 1);\n  --tonic-shadow: rgba(0, 0, 0, 0.3);\n  --tonic-disabled: rgba(170, 170, 170, 1);\n  --tonic-button-text: rgba(255, 255, 255, 1);\n  --tonic-button-shadow: rgba(0, 0, 0, 1);\n  --tonic-button-background: rgba(74, 74, 74, 1);\n  --tonic-button-background-hover: rgba(94, 94, 94, 1);\n  --tonic-button-background-focus: rgba(84, 84, 84, 1);\n  --tonic-input-text: rgba(255, 255, 255, 1);\n  --tonic-input-text-hover: rgba(255, 255, 255, 1);\n  --tonic-input-background: rgba(45, 45, 45, 1);\n  --tonic-input-background-focus: rgba(30, 30, 30, 1);\n  --tonic-input-border: rgba(80, 80, 80, 1);\n  --tonic-input-border-hover: rgba(105, 105, 105, 1);\n  --tonic-border: rgba(72, 72, 72, 1);\n  --tonic-border-accent: rgba(90, 90, 90, 1);\n  --tonic-error: rgba(240, 102, 83, 1);\n  --tonic-notification: rgba(240, 102, 83, 1);\n  --tonic-caution: rgba(240, 102, 83, 1);\n  --tonic-success: rgba(133, 178, 116, 1);\n  --tonic-warn: rgba(249, 169, 103, 1);\n  --tonic-overlay: rgba(0, 0, 0, 0.40);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocketsupply%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsocketsupply%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsocketsupply%2Fcomponents/lists"}