{"id":13725217,"url":"https://github.com/thomas-lowry/figma-plugin-ds-svelte","last_synced_at":"2025-04-05T01:08:47.030Z","repository":{"id":36937078,"uuid":"231628801","full_name":"thomas-lowry/figma-plugin-ds-svelte","owner":"thomas-lowry","description":"Figma Plugin DS components made with Svelte","archived":false,"fork":false,"pushed_at":"2024-07-17T02:53:14.000Z","size":440,"stargazers_count":183,"open_issues_count":17,"forks_count":27,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T00:07:34.247Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/thomas-lowry.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":"2020-01-03T16:53:42.000Z","updated_at":"2025-02-06T00:26:38.000Z","dependencies_parsed_at":"2024-10-30T18:00:46.646Z","dependency_job_id":"10b8d6c5-008a-4d24-902d-d3955a31f427","html_url":"https://github.com/thomas-lowry/figma-plugin-ds-svelte","commit_stats":{"total_commits":80,"total_committers":9,"mean_commits":8.88888888888889,"dds":0.55,"last_synced_commit":"612afa98a79d799750b50bbced97eac109b225f7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigma-plugin-ds-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigma-plugin-ds-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigma-plugin-ds-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomas-lowry%2Ffigma-plugin-ds-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomas-lowry","download_url":"https://codeload.github.com/thomas-lowry/figma-plugin-ds-svelte/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247271532,"owners_count":20911587,"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":[],"created_at":"2024-08-03T01:02:16.130Z","updated_at":"2025-04-05T01:08:47.010Z","avatar_url":"https://github.com/thomas-lowry.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Figma Plugin DS Svelte\n\nWORK IN PROGRESS—This is a Svelte version of the Figma Plugin DS specifically for use in creating Figma Plugins. I decided to create this because Svelte seems like a great lightweight approach well suited for creating Figma plugins, and also improves the developer experience when compared to my vanilla JS Figma Plugin DS due to simplified markup.\n\nYou can also get started with [Figsvelte](https://github.com/thomas-lowry/figsvelte), a boilerplate for Figma plugins that already has this library setup as a dependency.\n\n## Installation\n\nTo install into your own Svelte project.\n`npm i -D figma-plugin-ds-svelte`\n\n## To use\n\n```javascript\n//import the global css which includes Figma color, spacing, and type vars\n//also includes a basic set of utility classes\nimport { GlobalCSS } from 'figma-plugin-ds-svelte';\n\n//import the desired components\nimport { Button, Input, SelectMenu } from 'figma-plugin-ds-svelte';\n```\n\n---\n\n## Components\n_All components can accept class props to add global or utility classes to each component_\n\n* [Button](#Button)\n* [Checkbox](#Checkbox)\n* [Disclosure panel](#Disclosure)\n* [Icon](#Icon)\n* [Icon button](#Icon-button)\n* [Input](#Input)\n* [Labels and sections](#Labels-and-sections)\n* [Onboarding tip](#Onboarding-tip)\n* [Radio button](#Radio-button)\n* [Select menu](#Select-menu)\n* [Switch](#Switch)\n* [Textarea](#Textarea)\n* [Type](#Type)\n* [Tokens](#Tokens)\n\n---\n\n### Button\n```javascript\nimport { Button } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cButton on:click={funcName}\u003eLabel\u003c/Button\u003e\n\u003cButton on:click={funcName} variant=\"secondary\"\u003eLabel\u003c/Button\u003e\n\u003cButton on:click={funcName} variant=\"secondary\" destructive\u003eLabel\u003c/Button\u003e\n\u003cButton on:click={funcName} disabled\u003eLabel\u003c/Button\u003e\n```\n**Props**\n\n| Prop           | Type    | Options/notes                                                   |\n|:---------------|:--------|:----------------------------------------------------------------|\n| `on:click`     | Func    | Assign a function to execute on click. Ex: `on:click={funcName}`|\n| `variant`      | String  | Default: `\"primary\"`, Options: `\"secondary\"`, `\"tertiary\"`      |\n| `disabled`     | Boolean | Default: `false`                                                |\n| `destructive` | Boolean | Default: `false`                                                |\n\n---\n\n### Checkbox\n```javascript\nimport { Checkbox } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cCheckbox\u003eLabel\u003c/Checkbox\u003e\n\u003cCheckbox checked\u003eLabel\u003c/Checkbox\u003e\n\u003cCheckbox disabled\u003eLabel\u003c/Checkbox\u003e\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                                            |\n|:-----------|:--------|:-----------------------------------------------------------------------------------------|\n| `on:change`| Func    | Funtion to execute on change. Ex: `on:change={funcName}`                                 |\n| `value`    | Boolean | Default: `false`;                                                                        |\n| `checked`  | Boolean | Default: `false`; You can bind the value when checked to a var. `bind:checked={varName}` |\n| `disabled` | Boolean | Default: `false`                                                                         |\n\n---\n\n### Disclosure\n```javascript\nimport { Disclosure, DisclosureItem } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cDisclosure\u003e\n  \u003cDisclosureItem title=\"Item 1\" open\u003eContent here\u003c/DisclosureItem\u003e\n  \u003cDisclosureItem title=\"Item 2\"\u003eContent here\u003c/DisclosureItem\u003e\n  \u003cDisclosureItem title=\"Item 3\"\u003eContent here\u003c/DisclosureItem\u003e\n\u003c/Disclosure\u003e\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                     |\n|:-----------|:--------|:------------------------------------------------------------------|\n| `title`    | String  | Title of disclosure item                                          |\n| `open`     | Boolean | Default: `false`; Only one disclosure item can be opened at once  |\n| `section`  | Boolean | Default: `false`; Bold section header for disclosure title        |\n\n---\n\n### Icon\n```javascript\n//You need to import the icon component + whatever icons you want to use,\n//pass the names of your icon modules to the iconName prop in the Icon component\nimport { Icon, IconName } from 'figma-plugin-ds-svelte';\n\n//You can also import your own svg icon (32x32) and pass it to the icon component\nimport SvgName from './src/directory/image.svg';\n\n//Example\nimport { Icon, IconVisible, IconSpinner } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cIcon iconName={IconVisible} color=\"black\"/\u003e\n\u003cIcon iconName={IconSpinner} color=\"blue\" spin/\u003e\n\u003cIcon iconText=\"W\" color=\"blue\"/\u003e\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                                                |\n|:-----------|:--------|:---------------------------------------------------------------------------------------------|\n| `iconName` | Var     | Pass an imported SVG to this prop. `iconName={IconImport}`                                   |\n| `iconText` | String  | Pass a text character to use instead of an icon. Ex: width and height inputs `iconText=\"W\"`  |\n| `color`    | String  | Pass the name of any Figma color var to this prop. `color=\"blue\"`                            |\n| `spin`     | Boolean | Default: `false`; This will rotate the icon in an endless loop.                              |\n\n**Icons**\n\n\n| Icon                                                                                   | Var                               |\n|----------------------------------------------------------------------------------------|-----------------------------------|\n| ![IconAdjust](src/icons/adjust.svg \"icon\")                                             | `IconAdjust`                      |\n| ![IconAlert](src/icons/alert.svg \"icon\")                                               | `IconAlert`                       |\n| ![IconAngle](src/icons/angle.svg \"icon\")                                               | `IconAngle`                       |\n| ![IconArrowLeftRight](src/icons/arrow-left-right.svg \"icon\")                           | `IconArrowLeftRight`              |\n| ![IconUpDown](src/icons/arrow-up-down.svg \"icon\")                                      | `IconUpDown`                      |\n| ![IconAutoLayoutHorizontal](src/icons/auto-layout-horizontal.svg \"icon\")               | `IconAutoLayoutHorizontal`        |\n| ![IconAutoLayoutVertical](src/icons/auto-layout-vertical.svg \"icon\")                   | `IconAutoLayoutVertical`          |\n| ![IconBack](src/icons/back.svg \"icon\")                                                 | `IconBack`                        |\n| ![IconBlendEmpty](src/icons/blend-empty.svg \"icon\")                                    | `IconBlendEmpty`                  |\n| ![IconBlend](src/icons/blend.svg \"icon\")                                               | `IconBlend`                       |\n| ![IconBreak](src/icons/break.svg \"icon\")                                               | `IconBreak`                       |\n| ![IconCaretDown](src/icons/caret-down.svg \"icon\")                                      | `IconCaretDown`                   |\n| ![IconCaretLeft](src/icons/caret-left.svg \"icon\")                                      | `IconCaretLeft`                   |\n| ![IconCaretRight](src/icons/caret-right.svg \"icon\")                                    | `IconCaretRight`                  |\n| ![IconCaretUp](src/icons/caret-up.svg \"icon\")                                          | `IconCaretUp`                     |\n| ![IconCheck](src/icons/check.svg \"icon\")                                               | `IconCheck`                       |\n| ![IconClose](src/icons/close.svg \"icon\")                                               | `IconClose`                       |\n| ![IconComponent](src/icons/component.svg \"icon\")                                       | `IconComponent`                   |\n| ![IconCornerRadius](src/icons/corner-radius.svg \"icon\")                                | `IconCornerRadius`                |\n| ![IconCorners](src/icons/corners.svg \"icon\")                                           | `IconCorners`                     |\n| ![IconDistributeHorizontalSpacing](src/icons/distribute-horizontal-spacing.svg \"icon\") | `IconDistributeHorizontalSpacing` |\n| ![IconDistributeVerticalSpacing](src/icons/distribute-vertical-spacing.svg \"icon\")     | `IconDistributeVerticalSpacing`   |\n| ![IconDraft](src/icons/draft.svg \"icon\")                                               | `IconDraft`                       |\n| ![IconEffects](src/icons/effects.svg \"icon\")                                           | `IconEffects`                     |\n| ![IconEllipses](src/icons/ellipses.svg \"icon\")                                         | `IconEllipses`                    |\n| ![IconEyedropper](src/icons/eyedropper.svg \"icon\")                                     | `IconEyedropper`                  |\n| ![IconForward](src/icons/forward.svg \"icon\")                                           | `IconForward`                     |\n| ![IconFrame](src/icons/frame.svg \"icon\")                                               | `IconFrame`                       |\n| ![IconGroup](src/icons/group.svg \"icon\")                                               | `IconGroup`                       |\n| ![IconHidden](src/icons/hidden.svg \"icon\")                                             | `IconHidden`                      |\n| ![IconHorizontalPadding](src/icons/horizontal-padding.svg \"icon\")                      | `IconHorizontalPadding`           |\n| ![IconHyperlink](src/icons/hyperlink.svg \"icon\")                                       | `IconHyperlink`                   |\n| ![IconImage](src/icons/image.svg \"icon\")                                               | `IconImage`                       |\n| ![IconInstance](src/icons/instance.svg \"icon\")                                         | `IconInstance`                    |\n| ![IconKey](src/icons/key.svg \"icon\")                                                   | `IconKey`                         |\n| ![IconLayoutAlignBottom](src/icons/layout-align-bottom.svg \"icon\")                     | `IconLayoutAlignBottom`           |\n| ![IconAlignHorizontalCenters](src/icons/layout-align-horizontal-centers.svg \"icon\")    | `IconAlignHorizontalCenters`      |\n| ![IconAlignLeft](src/icons/layout-align-left.svg \"icon\")                               | `IconAlignLeft`                   |\n| ![IconAlignRight](src/icons/layout-align-right.svg \"icon\")                             | `IconAlignRight`                  |\n| ![IconAlignTop](src/icons/layout-align-top.svg \"icon\")                                 | `IconAlignTop`                    |\n| ![IconAlignVerticalCenters](src/icons/layout-align-vertical-centers.svg \"icon\")        | `IconAlignVerticalCenters`        |\n| ![IconLayoutGridColumns](src/icons/layout-grid-columns.svg \"icon\")                     | `IconLayoutGridColumns`           |\n| ![IconLayoutGridRows](src/icons/layout-grid-rows.svg \"icon\")                           | `IconLayoutGridRows`              |\n| ![IconLayoutGridUniform](src/icons/layout-grid-uniform.svg \"icon\")                     | `IconLayoutGridUniform`           |\n| ![IconLibrary](src/icons/library.svg \"icon\")                                           | `IconLibrary`                     |\n| ![IconLinkBroken](src/icons/link-broken.svg \"icon\")                                    | `IconLinkBroken`                  |\n| ![IconLinkConnected](src/icons/link-connected.svg \"icon\")                              | `IconLinkConnected`               |\n| ![IconListDetailed](src/icons/list-detailed.svg \"icon\")                                | `IconListDetailed`                |\n| ![IconListTile](src/icons/list-tile.svg \"icon\")                                        | `IconListTile`                    |\n| ![IconList](src/icons/list.svg \"icon\")                                                 | `IconList`                        |\n| ![IconLockOff](src/icons/lock-off.svg \"icon\")                                          | `IconLockOff`                     |\n| ![IconLockOn](src/icons/lock-on.svg \"icon\")                                            | `IconLockOn`                      |\n| ![IconMinus](src/icons/minus.svg \"icon\")                                               | `IconMinus`                       |\n| ![IconPlay](src/icons/play.svg \"icon\")                                                 | `IconPlay`                        |\n| ![IconPlus](src/icons/plus.svg \"icon\")                                                 | `IconPlus`                        |\n| ![IconRandom](src/icons/random.svg \"icon\")                                             | `IconRandom`                      |\n| ![IconRecent](src/icons/recent.svg \"icon\")                                             | `IconRecent`                      |\n| ![IconResizeToFit](src/icons/resize-to-fit.svg \"icon\")                                 | `IconResizeToFit`                 |\n| ![IconResolveFilled](src/icons/resolve-filled.svg \"icon\")                              | `IconResolveFilled`               |\n| ![IconResolve](src/icons/resolve.svg \"icon\")                                           | `IconResolve`                     |\n| ![IconReverse](src/icons/reverse.svg \"icon\")                                           | `IconReverse`                     |\n| ![IconSearchLarge](src/icons/search-large.svg \"icon\")                                  | `IconSearchLarge`                 |\n| ![IconSearch](src/icons/search.svg \"icon\")                                             | `IconSearch`                      |\n| ![IconSettings](src/icons/settings.svg \"icon\")                                         | `IconSettings`                    |\n| ![IconShare](src/icons/share.svg \"icon\")                                               | `IconShare`                       |\n| ![IconSmiley](src/icons/smiley.svg \"icon\")                                             | `IconSmiley`                      |\n| ![IconSortAlphaAsc](src/icons/sort-alpha-asc.svg \"icon\")                               | `IconSortAlphaAsc`                |\n| ![IconSortAlphaDsc](src/icons/sort-alpha-dsc.svg \"icon\")                               | `IconSortAlphaDsc`                |\n| ![IconSortTopBottom](src/icons/sort-top-bottom.svg \"icon\")                             | `IconSortTopBottom`               |\n| ![IconSpacing](src/icons/spacing.svg \"icon\")                                           | `IconSpacing`                     |\n| ![IconSpinner](src/icons/spinner.svg \"icon\")                                           | `IconSpinner`                     |\n| ![IconStarOff](src/icons/star-off.svg \"icon\")                                          | `IconStarOff`                     |\n| ![IconStarOn](src/icons/star-on.svg \"icon\")                                            | `IconStarOn`                      |\n| ![IconStrokeWeight](src/icons/stroke-weight.svg \"icon\")                                | `IconStrokeWeight`                |\n| ![IconStyles](src/icons/styles.svg \"icon\")                                             | `IconStyles`                      |\n| ![IconSwap](src/icons/swap.svg \"icon\")                                                 | `IconSwap`                        |\n| ![IconTheme](src/icons/theme.svg \"icon\")                                               | `IconTheme`                       |\n| ![IconTidyUpGrid](src/icons/tidy-up-grid.svg \"icon\")                                   | `IconTidyUpGrid`                  |\n| ![IconTidyUpListHorizontal](src/icons/tidy-up-list-horizontal.svg \"icon\")              | `IconTidyUpListHorizontal`        |\n| ![IconTidyUpListVertical](src/icons/tidy-up-list-vertical.svg \"icon\")                  | `IconTidyUpListVertical`          |\n| ![IconTimer](src/icons/timer.svg \"icon\")                                               | `IconTimer`                       |\n| ![IconTrash](src/icons/trash.svg \"icon\")                                               | `IconTrash`                       |\n| ![IconVerticalPadding](src/icons/vertical-padding.svg \"icon\")                          | `IconVerticalPadding`             |\n| ![IconVisible](src/icons/visible.svg \"icon\")                                           | `IconVisible`                     |\n| ![IconWarningLarge](src/icons/warning-large.svg \"icon\")                                | `IconWarningLarge`                |\n| ![IconWarning](src/icons/warning.svg \"icon\")                                           | `IconWarning`                     |\n\n\n---\n\n### Icon button\n```javascript\n//use this component as you would an Icon, it accepts the same props (except color)\nimport { IconButton } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cIconButton on:click={funcName} iconName={IconVisible}/\u003e\n\u003cIconButton on:click={funcName} iconName={IconVisible} selected/\u003e\n\u003cIconButton on:click={funcName} iconText=\"@\"/\u003e\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                    |\n|------------|---------|------------------------------------------------------------------|\n| `on:click` | Func    | Assign a function to execute on click. Ex: `on:click={funcName}` |\n| `selected` | Boolean | Default: `false`                                                 |\n| `iconName` | String  | _See Icon component for usage._                                  |\n| `IconText` | String  | _See Icon component for usage._                                  |\n| `spin`     | Boolean | _See Icon component for usage._                                  |\n\n---\n\n### Input\n```javascript\nimport { Input } from 'figma-plugin-ds-svelte';\n\n//var to define and store value\nvar inputValue = 'Default value'; \n```\n```html\n\u003cInput bind:value={inputValue}/\u003e\n\u003cInput bind:value={inputValue} disabled/\u003e\n\u003cInput placeholder=\"Enter some info...\"/\u003e\n\n\u003c!-- You can also pass Icon props to use the icon component inside the input --\u003e\n\u003cInput iconName={IconName} /\u003e\n\u003cInput iconName={IconSpinner} spin placeholder=\"Fetching data...\" /\u003e\n\n\u003c!-- Force borders on the input --\u003e\n\u003cInput value=\"Value\" borders/\u003e\n```\n**Props**\n\n| Prop          | Type    | Options/notes                                                      |\n|:--------------|:--------|:-------------------------------------------------------------------|\n| `on:change`   | Func    | Funtion to execute on change. Ex: `on:change={funcName}`           |\n| `value`       | String  | Value that will get populated by user or specify predefined value. You can also bind this to a variable. |\n| `placeholder` | String  | Placeholder text.                                                  |\n| `borders`     | Boolean | Default: `false`; Force a border on the input field.               |\n| `disabled`    | Boolean | Default: `false`                                                   |\n| `iconName`    | Var     | _See Icon component for usage._                                    |\n| `iconText`    | String  | _See Icon component for usage._                                    |\n| `spin`        | Boolean | _See Icon component for usage._                                    |\n\n---\n\n### Labels and sections\n```javascript\nimport { Label, SectionHeader } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cLabel\u003eLabel name\u003c/Label\u003e\n\u003cSection\u003eSection name\u003c/Section\u003e\n```\n\n---\n\n### Onboarding tip\n```javascript\nimport { OnboardingTip } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cOnboardingTip iconName={IconStyles}\u003e\n  Tip text goes here\n\u003c/OnboardingTip\u003e\n```\n**Props**\n\n| Prop       | Type    | Options/notes                   |\n|:-----------|:--------|:--------------------------------|\n| `iconName` | Var     | _See Icon component for usage._ |\n| `iconText` | String  | _See Icon component for usage._ |\n| `spin`     | Boolean | _See Icon component for usage._ |\n\n---\n\n### Radio button\n```javascript\nimport { Radio } from 'figma-plugin-ds-svelte';\n\n//use bind:group, with a var to create a radio group and store the value of selected item\n//set value if this var to same value as radio item to set initial selection\nvar radioValue;\n```\n```html\n\u003cRadio bind:group={radioValue} value=\"a\"\u003eLabel\u003c/Radio\u003e\n\u003cRadio bind:group={radioValue} value=\"b\"\u003eLabel\u003c/Radio\u003e\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                             |\n|:-----------|:--------|:----------------------------------------------------------|\n| `on:change`| Func    | Funtion to execute on change. Ex: `on:change={funcName}`  |\n| `group`    | Var     | Pass name of var to store selected item from radio group. |\n| `value`    | String  | Value of radio item.                                      |\n| `disabled` | Boolean | Default: `false`                                          |\n\n---\n\n### Select menu\n```javascript\nimport { SelectMenu } from 'figma-plugin-ds-svelte';\n\n//You will need to pass and bind an array of menu items to this\n//Note: it is up to you to sort this array however you want\nlet menuItemArray = [\n  { 'value': 'item1', 'label': 'Menu item 1', 'group': null, 'selected': false },\n  { 'value': 'item2', 'label': 'Menu item 2 ', 'group': null, 'selected': false }\n];\n\n//use bind:value, with a var bind the data of the selected item\nvar selectedItem;\n```\n```html\n\u003cSelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem}/\u003e\n\u003cSelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} showGroupLabels/\u003e\n\u003cSelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} iconName={IconBlend}/\u003e\n\u003cSelectMenu bind:menuItems={menuItemArray} bind:value={selectedItem} disabled/\u003e\n```\n**Props**\n\n| Prop              | Type    | Options/notes                                                                                                                            |\n|-------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------|\n| `on:change`       | Func    | Function to execute on change. Ex: `on:change={funcName}`                                                                                |\n| `menuItems`       | Var     | Pass in array of menu item objects. See example above for format.  If you want to use option groups, update the group keys to a string.  |\n| `value`           | Var     | Bind the value of the selected item to a var. Ex: `bind:value={selectedItem}`                                                       |\n| `placeholder`     | String  | Override default placeholder text with a string when there is no item selected.                                                          |\n| `showGroupLabels` | Boolean | Default: `false`; If you are using option groups, this will show the group labels.                                                       |\n| `disabled`        | Boolean | Default: `false`                                                                                                                         |\n| `macOSBlink`      | Boolean | Default: `false`; Easter egg, old school Mac OS triple blink on select.                                                                  |\n| `iconName`        | Var     | _See Icon component for usage._                                                                                                          |\n| `iconText`        | String  | _See Icon component for usage._                                                                                                          |\n\n---\n\n### Switch\n```javascript\nimport { Switch } from 'figma-plugin-ds-svelte';\n\n//use bind:group, with a var to create a radio group and store the value of selected item\n//set value if this var to same value as radio item to set initial selection\nvar switchValue;\n```\n```html\n\u003cSwitch value=\"value\" bind:checked={switchValue}\u003eLabel\u003c/Switch\u003e\n```\n**Props**\n\n| Prop       | Type    | Options/notes                                                                            |\n|:-----------|:--------|:-----------------------------------------------------------------------------------------|\n| `on:change`| Func    | Funtion to execute on change. Ex: `on:change={funcName}`                                 |\n| `value`    | Boolean | Default: `false`;                                                                        |\n| `checked`  | Boolean | Default: `false`; You can bind the value when checked to a var. `bind:checked={varName}` |\n| `disabled` | Boolean | Default: `false`                                                                         |\n\n---\n\n### Textarea\n```javascript\nimport { Textarea } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cTextarea placeholder=\"Enter some text\"\u003e\u003c/Textarea\u003e\n```\n**Props**\n\n| Prop          | Type    | Options/notes                                                         |\n|:--------------|:--------|:----------------------------------------------------------------------|\n| `on:change`   | Func    | Function to execute on change. Ex: `on:change={funcName}`             |\n| `value`       | String  | Value of textarea. Can bind to a variable. Ex: `bind:value={someVar}` |\n| `placeholder` | String  | Override default placeholder text with a string.                      |\n| `rows`        | Int     | Default: `2`; Number of rows (height) to display.                     |\n| `disabled`    | Boolean | Default: `false`                                                      |\n\n---\n\n### Type\n```javascript\nimport { Type } from 'figma-plugin-ds-svelte';\n```\n```html\n\u003cType size=\"large\" weight=\"bold\"\u003eContent here\u003c/Type\u003e\n```\n**Props**\n\n| Prop      | Type    | Options/notes                                                                          |\n|:----------|:--------|:---------------------------------------------------------------------------------------|\n| `size`    | String  | Default: `\"small\"`; Also accepts `\"xsmall\"`,`\"large\"`, `\"xlarge\"`                      |\n| `weight`  | String  | Default: `\"normal\"`; Also accepts `\"medium\"`,`\"bold\"`                                  |\n| `color`   | String  | Default: `\"black8\"`; Pass the name of any Figma color var to this prop. `color=\"blue\"`, Default color is white when inverse is `true` and no value specified |\n| `inverse` | Boolean | Default: `false`; Optimizes letter-spacing for light on dark applications.             |\n\n---\n\n## Tokens\n\n**Color**\n\n| Name          | Var               | Type             | Notes                                                         |\n|:--------------|:------------------|:-----------------|:--------------------------------------------------------------|\n| blue          | `--blue`          | Accent           | Ex: primary button, hyperlinks, focus/selected states         |\n| purple        | `--purple`        | Accent           | Ex: components/instances                                      |\n| hot-pink      | `--hot-pink`      | Accent           | Ex: smart selection handles                                   |\n| green         | `--green`         | Accent           | Ex: Toolbar selections                                        |\n| red           | `--red`           | Accent           | Ex: Error                                                     |\n| yellow        | `--yellow`        | Accent           | Ex: Caution/warning                                           |\n| black         | `--black`         | Basic foreground | Ex: active states                                             |\n| black8        | `--black8`        | Basic foreground | 80% black, ex: most common black used in UI text and icons    |\n| black8-opaque | `--black8-opaque` | Basic foreground | Opaque version of black8                                      |\n| black3        | `--black3`        | Basic foreground | 30% black, ex: lower priority messages, disabled states       |\n| black3-opaque | `--black3-opaque` | Basic foreground | Opaque version of black3                                      |\n| white         | `--white`         | Basic foreground | Used in same way as black8, but on dark backgrounds           |\n| white8        | `--white8`        | Basic foreground | Rarely used, only in toolbar                                  |\n| white4        | `--white4`        | Basic foreground | Used in same way as black3, Ex: option group headers in menus |\n| white         | `--white`         | Basic background | (Duplicate) White is also the most common background color    |\n| grey          | `--grey`          | Basic background | Used behind controls in active state                          |\n| silver        | `--silver`        | Basic background | Ex: horizontal separators, default canvas background          |\n| hud           | `--hud`           | Basic background | Ex: background for menus                                      |\n| toolbar       | `--toolbar`       | Basic background | Ex: background for the toolbar                                |\n| black1        | `--black1`        | Special          | Ex: input placeholder underline, textarea border              |\n| blue3         | `--blue3`         | Special          | Ex: text range selection in inputs                            |\n| purple4       | `--purple4`       | Special          | Ex: disabled components/instances                             |\n| hover-fill    | `--hover-fill`    | Special          | Hover state for items without borders, ex: icon button        |\n| selection-a   | `--selection-a`   | Special          | Selected cells, ex: selected top level layer                  |\n| selection-b   | `--selection-b`   | Special          | Selected cells, ex: selected child layers                     |\n| white2        | `--white2`        | Special          | Ex: menu separators                                           |\n\n\n**Type**\n\n| Property         | Var                                | Value               | Notes                                                        |\n|:-----------------|:-----------------------------------|:--------------------|:-------------------------------------------------------------|\n| `font-family`    | `--font-stack`                     | 'Inter', sans-serif | Default font everywhere                                      |\n| `font-size`      | `--font-size-xsmall`               | 11px                | Most common font size                                        |\n| `font-size`      | `--font-size-small`                | 12px                | Used in menus                                                |\n| `font-size`      | `--font-size-large`                | 13px                | Rarely used in editor                                        |\n| `font-size`      | `--font-size-xlarge`               | 14px                | Rarely used in editor                                        |\n| `font-weight`    | `--font-weight-normal`             | 400                 |                                                              |\n| `font-weight`    | `--font-weight-medium`             | 500                 |                                                              |\n| `font-weight`    | `--font-weight-bold`               | 600                 |                                                              |\n| `line-height`    | `--font-line-height`               | 16px                | For use with xsmall and small font sizes                     |\n| `line-height`    | `--font-line-height-large`         | 24px                | For use with large and xlarge font sizes                     |\n| `letter-spacing` | `--font-letter-spacing-pos-xsmall` | .005em              | Optimized letter spacing for xsmall text on light background |\n| `letter-spacing` | `--font-letter-spacing-neg-xsmall` | .01em               | Optimized letter spacing for xsmall text on dark background  |\n| `letter-spacing` | `--font-letter-spacing-pos-small`  | 0                   | Optimized letter spacing for small text on light background  |\n| `letter-spacing` | `--font-letter-spacing-neg-small`  | .005em              | Optimized letter spacing for small text on dark background   |\n| `letter-spacing` | `--font-letter-spacing-pos-large`  | -.0025em            | Optimized letter spacing for large text on light background  |\n| `letter-spacing` | `--font-letter-spacing-neg-large`  | .0025em             | Optimized letter spacing for large text on dark background   |\n| `letter-spacing` | `--font-letter-spacing-pos-xlarge` | -.001em             | Optimized letter spacing for xlarge text on light background |\n| `letter-spacing` | `--font-letter-spacing-neg-xlarge` | -.001em             | Optimized letter spacing for xlarge text on dark background  |\n\n**Border Radius**\n\n| Var                     | Value | Notes                                 |\n|:------------------------|:------|:--------------------------------------|\n| `--border-radius-small` | 2px   | Ex: menus, input borders, icon button |\n| `--border-radius-med`   | 5px   | Ex: visual bell, toasts               |\n| `--border-radius-large` | 6px   | Ex: buttons                           |\n\n**Shadows**\n\n| Var                         | Notes                       |\n|:----------------------------|:----------------------------|\n| `--shadow-hud`              | Ex: menus, tooltips, toasts |\n| `--shadow-floating-window:` | Ex: modal, dialog           |\n\n**Sizes**\n\n| Var               | Value |\n|:------------------|:------|\n| `--size-xxxsmall` | 4px   |\n| `--size-xxsmall`  | 8px   |\n| `--size-xsmall`   | 16px  |\n| `--size-small`    | 24px  |\n| `--size-medium`   | 32px  |\n| `--size-large`    | 40px  |\n| `--size-xlarge`   | 48px  |\n| `--size-xxlarge`  | 64px  |\n| `--size-huge`     | 80px  |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-lowry%2Ffigma-plugin-ds-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomas-lowry%2Ffigma-plugin-ds-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomas-lowry%2Ffigma-plugin-ds-svelte/lists"}