{"id":19076127,"url":"https://github.com/gapur/twilio-paste-intellisense","last_synced_at":"2025-04-30T01:16:06.060Z","repository":{"id":37989883,"uuid":"496767561","full_name":"Gapur/twilio-paste-intellisense","owner":"Gapur","description":"Intelligent Twilio Paste Design tooling for VS Code","archived":false,"fork":false,"pushed_at":"2022-06-12T20:39:39.000Z","size":519,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-30T01:16:00.686Z","etag":null,"topics":["css","extension","javascript","paste","twilio","twilio-paste","typescript","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Gapur.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-26T20:47:55.000Z","updated_at":"2023-03-08T20:12:09.000Z","dependencies_parsed_at":"2022-08-29T14:31:59.597Z","dependency_job_id":null,"html_url":"https://github.com/Gapur/twilio-paste-intellisense","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Ftwilio-paste-intellisense","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Ftwilio-paste-intellisense/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Ftwilio-paste-intellisense/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Ftwilio-paste-intellisense/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gapur","download_url":"https://codeload.github.com/Gapur/twilio-paste-intellisense/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251608465,"owners_count":21616859,"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","extension","javascript","paste","twilio","twilio-paste","typescript","vscode-extension"],"created_at":"2024-11-09T01:57:17.191Z","updated_at":"2025-04-30T01:16:06.033Z","avatar_url":"https://github.com/Gapur.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg height=\"320px\" src=\"https://raw.githubusercontent.com/Gapur/twilio-paste-intellisense/main/assets/favicon.png\" alt=\"Twilio Paste\" /\u003e\n  \u003cbr/\u003e\n  Twilio Paste Intellisense\n\u003c/h1\u003e\n\nTwilio Paste Intellisense extends the development experience of Twilio Paste by giving Visual Studio Code users additional functionality such as hover.\n\n## About Paste\n\n[Paste](https://paste.twilio.design/introduction/about-paste/) is a design system used to build accessible, cohesive, and high-quality customer experiences at Twilio. Paste supports Product Designers and Engineers with tooling and assets that help them build customer UIs in Figma and React.\n\n\u003eDesign tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. — Salesforce UX, [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/)\n\n\nTokens are named for their use case, rather than their value. For example `$color-background-error` is named to indicate the appropriate background color for an error, as opposed to `$color-background-red` which is less specific and could be used in a number of ways depending on cultural context and design language. This makes their intended use clear and intentional, and allows us to develop a scalable and consistent visual language.\n\nIn Paste, 1 rem unit = 16 pixels.\n\n## Why should we use Twilio Paste Intellisense\n\nTwilio Paste is a great design system, but working with tokens is time consuming. Because before using the token, we need to check the list of tokens, which one suits us. For example, if we want to use a margin like 20px, we need to check what `space` token is [20px (space60 = 20px)](https://paste.twilio.design/tokens/list/#spacings). This is where Twilio Paste Intellisense comes into play. It has two features:\n   - `Hover preview` - check the value of the token by hovering over it;\n   - `Autocomplete` - use a dropdown menu with the name and value of the token when we start typing the component's paste properties.\n\n## Installation\n\n**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=Gapur.twilio-paste-intellisense)**\n\n## Features\n\n### Autocomplete\n\nIntelligent suggestions for twilio paste token attributes.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Gapur/twilio-paste-intellisense/main/assets/completion-example.png\" alt=\"completion\" /\u003e\n\n### Hover Preview\n\nView the value and description of the Twilio Paste token property by hovering over it.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Gapur/twilio-paste-intellisense/main/assets/hover-example.png\" alt=\"hover\" /\u003e\n\n## How to contribute?\n\n1. Fork this repo\n2. Clone your fork\n3. Code 🤓\n4. Test your changes\n5. Submit a PR!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapur%2Ftwilio-paste-intellisense","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgapur%2Ftwilio-paste-intellisense","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapur%2Ftwilio-paste-intellisense/lists"}