{"id":19195940,"url":"https://github.com/sargamdesign/sargam-colors","last_synced_at":"2026-06-23T13:30:20.872Z","repository":{"id":61479927,"uuid":"549923901","full_name":"SargamDesign/sargam-colors","owner":"SargamDesign","description":"Colors for designing warm welcoming, caring sites \u0026 apps.","archived":false,"fork":false,"pushed_at":"2024-09-01T11:17:11.000Z","size":4092,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-04T14:49:18.316Z","etag":null,"topics":["caring","colors","oklch","oklch-color","warm"],"latest_commit_sha":null,"homepage":"https://sargamcolors.com/","language":"SCSS","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/SargamDesign.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","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-10-12T00:16:58.000Z","updated_at":"2024-09-01T11:17:14.000Z","dependencies_parsed_at":"2023-11-27T18:32:22.937Z","dependency_job_id":"922f4898-9b5e-4624-8f2e-c9590fd7a33d","html_url":"https://github.com/SargamDesign/sargam-colors","commit_stats":{"total_commits":31,"total_committers":2,"mean_commits":15.5,"dds":0.09677419354838712,"last_synced_commit":"0286f03eba7da145c0d2533ee7f1c04e0075c3f0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SargamDesign%2Fsargam-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SargamDesign%2Fsargam-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SargamDesign%2Fsargam-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SargamDesign%2Fsargam-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SargamDesign","download_url":"https://codeload.github.com/SargamDesign/sargam-colors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240271519,"owners_count":19774859,"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":["caring","colors","oklch","oklch-color","warm"],"created_at":"2024-11-09T12:12:02.632Z","updated_at":"2026-06-23T13:30:20.769Z","avatar_url":"https://github.com/SargamDesign.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](help/cover.png)\n\n# Sargam Colors\nColors for designing warm welcoming, caring sites \u0026 apps.\n\n## Installation\nInstall from your terminal via npm.\n\n```\nnpm i @sargamdesign/colors -D\n```\n\n## Usage\n\n```scss\n// Place this at the top of your SCSS/CSS file\n@import \"@sargamdesign/colors\";\n```\n\n```html\n\u003c!-- Add this attribute to the HTML wrapper --\u003e\n\u003chtml color-scheme=\"light\"\u003e\n```\n\n### Available Themes\n- light\n- dark\n\n## Usage Example\n\n```\n.button { background-color: var(--button-primary); color: var(--text-on-color); }\n.button:hover { background-color: var(--button-primary-hover); }\n.button:active { background-color: var(--button-primary-active); }\n```\n\n---\n\n## Color Tokens\n\n### Text\nVariable | Value(Light) | Value(Dark)| Role\n:--- |:--- |:--- |:---\n`--text-primary` | *--silver8* | *--silver1* | Body copy\n`--text-primary-alt` | *--silver7* | *--silver3* | Body copy alt\n`--text-secondary` | *--silver6* | *--silver5* | Secondary text color\n`--text-placeholder` | *--silver5* | *--silver6* | Placeholder text\n`--text-on-color` | *--silver1* | *--silver1* | Text on interactive colors\n`--text-error` | *--red6* | *--red4* | Error message text\n`--text-success` | *--green6* | *--green4* | Success message text\n\n### Support\nVariable | Value(Light) | Value(Dark)| Role\n:--- |:--- |:--- |:---\n`--support-error` | *--red5* | *--red4* | Error\n`--support-warning` | *--yellow5* | *--yellow4* | Warning\n`--support-success` | *--green5* | *--green4* | Success\n`--support-info` | *--teal5* | *--teal4* | Information\n\n\n### Link\nVariable | Value(Light) | Value(Dark)| Role\n:--- |:--- |:--- |:---\n`--link` | *--teal6* | *--teal4* | Primary links\n`--link-hover` | *--teal7* | *--teal6* | Hover state for primary links\n`--link-subtle` | *--teal5* | *--teal5* | Secondary links\n`--link-visited` | *--lavender6* | *--lavender4* | Link visited\n`--link-muted` | *--silver8* | *--silver1* | Link muted\n\n\n### Icon\nVariable | Value(Light) | Value(Dark)| Role\n:--- |:--- |:--- |:---\n`--icon-primary` | *--silver7* | *--silver3* | Primary icons\n`--icon-secondary` | *--silver6* | *--silver5* | Secondary icons\n`--icon-disabled` | *--silver5* | *--silver6* | Disabled state for icons\n`--icon-on-color` | *--silver1* | *--silver8* | Icons on interactive colors\n\n### Button\nVariable | Value(Light) | Value(Dark)| Role\n:--- |:--- |:--- |:---\n`--button-primary` | *--teal5* | *--teal4* | Primary button background\n`--button-primary-hover` | *--teal6* | *--teal3* | Primary button hover\n`--button-primary-active` | *--teal7* | *--teal2* | Primary button active\n`--button-secondary` | *--silver8* | *--silver6* | Secondary button background\n`--button-secondary-hover` | *--silver7* | *--silver7* | Secondary button hover\n`--button-secondary-active` | *--silver6* | *--silver8* | Secondary button active\n`--button-danger` | *--red5* | *--red4* | Danger button background\n`--button-danger-hover` | *--red6* | *--red3* | Danger button hover\n`--button-danger-active` | *--red7* | *--red2* | Danger button active\n`--button-disabled` | *--silver5* | *--silver6* | Disabled button\n`--button-disabled-alt` | *--silver4* | *--silver7* | Disabled button alt\n\n\n### Border\nVariable | Value(Light) | Value(Dark)| Role\n:--- |:--- |:--- |:---\n`--border-muted` | *--silver3* | *--silver7* | Muted borders and separators\n`--border-default` | *--silver5* | *--silver6* | Default borders and separators\n`--border-strong` | *--silver6* | *--silver5* | Strong borders and separators\n\n\n### Background\nVariable | Value(Light) | Value(Dark)| Role\n:--- |:--- |:--- |:---\n`--background` | *--silver1* | *--silver8* | Default app background\n`--background-subtle` | *--silver2* | *--silver7* | Subtle background\n`--background-selected` | *--silver3* | *--silver6* | Hovered UI element background\n`--background-red` | *--red1* | *--red8* | Subtle red background\n`--background-yellow` | *--yellow1* | *--yellow8* | Subtle yellow background\n`--background-green` | *--green1* | *--green8* | Subtle green background\n`--background-teal` | *--teal1* | *--teal8* | Subtle teal background\n`--background-lavender` | *--lavender1* | *--lavender8* | Subtle lavender background\n`--background-pink` | *--pink1* | *--pink8* | Subtle pink background\n\n## License\nMIT License, Copyright (c) 2024 Method Black.\nBrought to you by [@planetabhi](https://planetabhi.com/) 🙌 \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsargamdesign%2Fsargam-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsargamdesign%2Fsargam-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsargamdesign%2Fsargam-colors/lists"}