├── ui-src ├── assets │ └── do_not_delete ├── figma-ds │ ├── lib.scss │ ├── figma-plugin-ds │ │ ├── scss │ │ │ ├── base │ │ │ │ ├── _base.scss │ │ │ │ ├── _typography.scss │ │ │ │ ├── _mixins.scss │ │ │ │ └── _variables.scss │ │ │ ├── components │ │ │ │ ├── _divider.scss │ │ │ │ ├── _label.scss │ │ │ │ ├── _section-title.scss │ │ │ │ ├── _onboarding-tip.scss │ │ │ │ ├── _textarea.scss │ │ │ │ ├── _switch.scss │ │ │ │ ├── _checkbox.scss │ │ │ │ ├── _icon.scss │ │ │ │ ├── _input.scss │ │ │ │ ├── _button.scss │ │ │ │ ├── _input-icon.scss │ │ │ │ ├── _disclosure.scss │ │ │ │ ├── _visual-bell.scss │ │ │ │ ├── _type.scss │ │ │ │ └── _select-menu.scss │ │ │ ├── icons │ │ │ │ ├── _plus.scss │ │ │ │ ├── _minus.scss │ │ │ │ ├── _warning.scss │ │ │ │ ├── _layout-align-horiz-cent.scss │ │ │ │ ├── _layout-align-vert-cent.scss │ │ │ │ ├── _star-on.scss │ │ │ │ ├── _type.scss │ │ │ │ ├── _corner-radius.scss │ │ │ │ ├── _play.scss │ │ │ │ ├── _angle.scss │ │ │ │ ├── _frame.scss │ │ │ │ ├── _draft.scss │ │ │ │ ├── _list.scss │ │ │ │ ├── _layout-grid-columns.scss │ │ │ │ ├── _layout-grid-rows.scss │ │ │ │ ├── _stroke-weight.scss │ │ │ │ ├── _dist-vert-spacing.scss │ │ │ │ ├── _instance.scss │ │ │ │ ├── _tidy-up-list-vert.scss │ │ │ │ ├── _layout-align-left.scss │ │ │ │ ├── _layout-align-right.scss │ │ │ │ ├── _layout-align-top.scss │ │ │ │ ├── _tidy-up-list-horiz.scss │ │ │ │ ├── _dist-horiz-spacing.scss │ │ │ │ ├── _layout-align-bottom.scss │ │ │ │ ├── _align-top.scss │ │ │ │ ├── _align-bottom.scss │ │ │ │ ├── _close.scss │ │ │ │ ├── _return.scss │ │ │ │ ├── _resolve-filled.scss │ │ │ │ ├── _arrow-up-down.scss │ │ │ │ ├── _arrow-left-right.scss │ │ │ │ ├── _corners.scss │ │ │ │ ├── _link-broken.scss │ │ │ │ ├── _star-off.scss │ │ │ │ ├── _lock-unlocked.scss │ │ │ │ ├── _animated-fill.scss │ │ │ │ ├── _recent.scss │ │ │ │ ├── _lock.scss │ │ │ │ ├── _list-detailed.scss │ │ │ │ ├── _search-large.scss │ │ │ │ ├── _align-middle.scss │ │ │ │ ├── _eyedropper.scss │ │ │ │ ├── _link-connected.scss │ │ │ │ ├── _resolve.scss │ │ │ │ ├── _ellipses.scss │ │ │ │ ├── _vector-handles.scss │ │ │ │ ├── _comment.scss │ │ │ │ ├── _restore.scss │ │ │ │ ├── _import.scss │ │ │ │ ├── _trash.scss │ │ │ │ ├── _node-connect.scss │ │ │ │ ├── _reset-instance.scss │ │ │ │ ├── _resize-to-fit.scss │ │ │ │ ├── _search.scss │ │ │ │ ├── _tidy-up-grid.scss │ │ │ │ ├── _mask.scss │ │ │ │ ├── _layout-grid-uniform.scss │ │ │ │ ├── _group.scss │ │ │ │ ├── _visible.scss │ │ │ │ ├── _styles.scss │ │ │ │ ├── _hidden.scss │ │ │ │ ├── _adjust.scss │ │ │ │ ├── _hyperlink.scss │ │ │ │ ├── _alert.scss │ │ │ │ ├── _blend.scss │ │ │ │ ├── _image.scss │ │ │ │ ├── _component.scss │ │ │ │ ├── _timer.scss │ │ │ │ ├── _smiley.scss │ │ │ │ ├── _blend-empty.scss │ │ │ │ ├── _break.scss │ │ │ │ ├── _share.scss │ │ │ │ ├── _effects.scss │ │ │ │ └── _library.scss │ │ │ └── figma-plugin-ds.scss │ │ └── README.md │ ├── Divider.vue │ ├── Label.vue │ ├── SectionTitle.vue │ ├── Disclosure.vue │ ├── Tip.vue │ ├── Bell.vue │ ├── index.ts │ ├── Textarea.vue │ ├── Button.vue │ ├── Icon.vue │ ├── FigmaSwitch.vue │ ├── Checkbox.vue │ ├── DisclosureItem.vue │ ├── Input.vue │ └── Select.vue ├── shims-vue.d.ts ├── ui.html ├── main.ts ├── shims-tsx.d.ts ├── api.ts └── App.vue ├── plugin-public └── manifest.json ├── plugin-src ├── iapi.d.ts ├── utils.ts └── index.ts ├── .gitignore ├── tsconfig.json ├── package.json ├── LICENSE ├── vue.config.js ├── README.md └── figma.d.ts /ui-src/assets/do_not_delete: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ui-src/figma-ds/lib.scss: -------------------------------------------------------------------------------- 1 | @import "./figma-plugin-ds/scss/figma-plugin-ds.scss"; -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | -------------------------------------------------------------------------------- /plugin-public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Figma plugin boilerplate", 3 | "id": "751819288534552922", 4 | "api": "1.0.0", 5 | "main": "code.js", 6 | "ui": "ui.html" 7 | } -------------------------------------------------------------------------------- /ui-src/ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
-------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/components/_divider.scss: -------------------------------------------------------------------------------- 1 | .divider { 2 | display: block; 3 | 4 | width: 100%; 5 | height: 1px; 6 | margin: 8px 0 8px 0; 7 | padding: 0; 8 | 9 | background-color: $figma-silver; 10 | } 11 | -------------------------------------------------------------------------------- /ui-src/figma-ds/Divider.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 11 | 12 | -------------------------------------------------------------------------------- /plugin-src/iapi.d.ts: -------------------------------------------------------------------------------- 1 | export type UIMethods = { 2 | 3 | }; 4 | 5 | export type PluginMethods = { 6 | /** return created node id */ 7 | createRectangle(width: number, height: number): string; 8 | 9 | listenSelectionChange(onSelectionChange: (selectionNodeIds: string[]) => void): void; 10 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/components/_label.scss: -------------------------------------------------------------------------------- 1 | .label { 2 | display: flex; 3 | align-items: center; 4 | 5 | height: 32px; 6 | padding: 8px 4px 8px 8px; 7 | 8 | cursor: default; 9 | 10 | color: $figma-black-3; 11 | background-color: $figma-white; 12 | 13 | @include font-ui-pos('small', 'normal'); 14 | } 15 | -------------------------------------------------------------------------------- /ui-src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | import './figma-ds/lib.scss'; 4 | import App from './App.vue'; 5 | 6 | import { initApi } from './api'; 7 | 8 | Vue.config.productionTip = false; 9 | 10 | (async () => { 11 | await initApi(); 12 | 13 | new Vue({ 14 | render: h => h(App), 15 | }).$mount('#app'); 16 | })(); -------------------------------------------------------------------------------- /ui-src/figma-ds/Label.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/components/_section-title.scss: -------------------------------------------------------------------------------- 1 | .section-title { 2 | display: flex; 3 | align-items: center; 4 | 5 | height: 32px; 6 | padding: 8px 4px 8px 8px; 7 | 8 | cursor: default; 9 | 10 | color: $figma-black-8; 11 | background-color: $figma-white; 12 | 13 | @include font-ui-pos('small', 'bold'); 14 | } 15 | -------------------------------------------------------------------------------- /ui-src/figma-ds/SectionTitle.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /ui-src/figma-ds/Disclosure.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | -------------------------------------------------------------------------------- /ui-src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode { } 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue { } 9 | interface IntrinsicElements { 10 | [elem: string]: any 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /plugin-src/utils.ts: -------------------------------------------------------------------------------- 1 | export const isEqualNodeArray = (a1: readonly SceneNode[], a2: readonly SceneNode[]) => { 2 | if (a1.length !== a2.length) return false; 3 | if (a1.length === a2.length && a1.length === 0) return true; 4 | 5 | const ids = a1.map(x => x.id); 6 | for (const n of a2) { 7 | if (!ids.includes(n.id)) { 8 | return false; 9 | } 10 | } 11 | return true; 12 | }; -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_plus.scss: -------------------------------------------------------------------------------- 1 | .icon--plus { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m15.5 15.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m15.5 47.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m15.5 79.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z" fill="%2318a0fb"/%3E%3Cpath d="m15.5 111.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_minus.scss: -------------------------------------------------------------------------------- 1 | .icon--minus { 2 | background-image: url('data:image/svg+xml,%3Csvg fill=\'none\' height=\'128\' viewBox=\'0 0 32 128\' width=\'32\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg clip-rule=\'evenodd\' fill-rule=\'evenodd\'%3E%3Cpath d=\'m21.5 16.5h-11v-1h11z\' fill=\'%23000\' fill-opacity=\'.8\'/%3E%3Cpath d=\'m21.5 48.5h-11v-1h11z\' fill=\'%23000\' fill-opacity=\'.3\'/%3E%3Cpath d=\'m21.5 80.5h-11v-1h11z\' fill=\'%2318a0fb\'/%3E%3Cpath d=\'m21.5 112.5h-11v-1h11z\' fill=\'%23fff\'/%3E%3C/g%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_warning.scss: -------------------------------------------------------------------------------- 1 | .icon--warning { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m16 38 10 18h-20zm-1 11v-4h2v4zm0 2v2h2v-2z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16 6 10 18h-20zm-1 11v-4h2v4zm0 2v2h2v-2z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16 70 10 18h-20zm-1 11v-4h2v4zm0 2v2h2v-2z" fill="%2318a0fb"/%3E%3Cpath d="m16 102 10 18h-20zm-1 11v-4h2v4zm0 2v2h2v-2z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/Tip.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_layout-align-horiz-cent.scss: -------------------------------------------------------------------------------- 1 | .icon--layout-align-horiz-cent { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m16.5 9.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16.5 41.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16.5 73.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z" fill="%2318a0fb"/%3E%3Cpath d="m16.5 105.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_layout-align-vert-cent.scss: -------------------------------------------------------------------------------- 1 | .icon--layout-align-vert-cent { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m12.5 15.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m12.5 47.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m12.5 79.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z" fill="%2318a0fb"/%3E%3Cpath d="m12.5 111.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_star-on.scss: -------------------------------------------------------------------------------- 1 | .icon--star-on { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m16 8 2 6 6-.0141-5 4.0141 2 6-5-3.7945-5 3.7945 2-6-5-4.0141 6 .0141z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16 40 2 6 6-.0141-5 4.0141 2 6-5-3.7945-5 3.7945 2-6-5-4.0141 6 .0141z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16 72 2 6 6-.0141-5 4.0141 2 6-5-3.7945-5 3.7945 2-6-5-4.0141 6 .0141z" fill="%2318a0fb"/%3E%3Cpath d="m16 104 2 6 6-.014-5 4.014 2 6-5-3.794-5 3.794 2-6-5-4.014 6 .014z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_type.scss: -------------------------------------------------------------------------------- 1 | .icon--type { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m10 10h11v3h-1v-2h-4v9.9986h1.9442v1h-4.8884v-1h1.9442v-9.9986h-4v2h-1z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m10 42h11v3h-1v-2h-4v9.9986h1.9442v1h-4.8884v-1h1.9442v-9.9986h-4v2h-1z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m10 74h11v3h-1v-2h-4v9.9986h1.9442v1h-4.8884v-1h1.9442v-9.9986h-4v2h-1z" fill="%2318a0fb"/%3E%3Cpath d="m10 106h11v3h-1v-2h-4v9.999h1.9442v1h-4.8884v-1h1.9442v-9.999h-4v2h-1z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_corner-radius.scss: -------------------------------------------------------------------------------- 1 | .icon--corner-radius { 2 | background-image: url('data:image/svg+xml,%3Csvg fill=\'none\' height=\'128\' viewBox=\'0 0 32 128\' width=\'32\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'m21 13h-4c-2.2091 0-4 1.7909-4 4v4h-1v-4c0-2.7614 2.2386-5 5-5h4z\' fill=\'%23000\' fill-opacity=\'.8\'/%3E%3Cpath d=\'m21 45h-4c-2.2091 0-4 1.7909-4 4v4h-1v-4c0-2.7614 2.2386-5 5-5h4z\' fill=\'%23000\' fill-opacity=\'.3\'/%3E%3Cpath d=\'m21 77h-4c-2.2091 0-4 1.7909-4 4v4h-1v-4c0-2.7614 2.2386-5 5-5h4z\' fill=\'%2318a0fb\'/%3E%3Cpath d=\'m21 109h-4c-2.2091 0-4 1.791-4 4v4h-1v-4c0-2.761 2.2386-5 5-5h4z\' fill=\'%23fff\'/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_play.scss: -------------------------------------------------------------------------------- 1 | .icon--play { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m13 10.0979 9.4434 5.9021-9.4434 5.9021zm1 1.8042v8.1958l6.5566-4.0979z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m13 42.0979 9.4434 5.9021-9.4434 5.9021zm1 1.8042v8.1958l6.5566-4.0979z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m13 74.0979 9.4434 5.9021-9.4434 5.9021zm1 1.8042v8.1958l6.5566-4.0979z" fill="%2318a0fb"/%3E%3Cpath d="m13 106.098 9.4434 5.902-9.4434 5.902zm1 1.804v8.196l6.5566-4.098z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/api.ts: -------------------------------------------------------------------------------- 1 | import { connectToPlugin, proxyMapRemote, ProxyMapRemoteApi } from 'rpct/browser'; 2 | import { UIMethods, PluginMethods } from '../plugin-src/iapi'; 3 | 4 | export let api: ProxyMapRemoteApi; 5 | let apiLoadingPromise: Promise; 6 | 7 | export const initApi = () => { 8 | if (apiLoadingPromise) return apiLoadingPromise; 9 | 10 | if (!api) { 11 | apiLoadingPromise = new Promise(async loaded => { 12 | const rpctapi = await connectToPlugin({ 13 | 14 | }); 15 | api = proxyMapRemote(rpctapi); 16 | 17 | loaded(); 18 | }); 19 | 20 | return apiLoadingPromise; 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /ui-src/figma-ds/Bell.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/components/_onboarding-tip.scss: -------------------------------------------------------------------------------- 1 | .onboarding-tip { 2 | display: flex; 3 | align-items: top; 4 | flex-direction: row; 5 | 6 | padding: 0 16px 0 0; 7 | 8 | cursor: default; 9 | 10 | &__icon { 11 | width: 32px; 12 | height: 32px; 13 | margin-right: 8px; 14 | } 15 | 16 | &__msg { 17 | padding: 8px 0 8px 0; 18 | 19 | color: $figma-black-8; 20 | 21 | @include font-ui-pos('small', 'normal'); 22 | 23 | a:link, a:hover, a:active, a:visited { 24 | text-decoration: none; 25 | 26 | color: $figma-blue; 27 | } 28 | } 29 | 30 | 31 | &--hidden { 32 | display: none; 33 | } 34 | 35 | &--light { 36 | color: $figma-black-3; 37 | } 38 | 39 | &--pt5 { 40 | padding-top: 8px; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_angle.scss: -------------------------------------------------------------------------------- 1 | .icon--angle { 2 | background-image: url('data:image/svg+xml,%3Csvg fill=\'none\' height=\'128\' viewBox=\'0 0 32 128\' width=\'32\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg clip-rule=\'evenodd\' fill-rule=\'evenodd\'%3E%3Cpath d=\'m12 12v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-3-3z\' fill=\'%23000\' fill-opacity=\'.8\'/%3E%3Cpath d=\'m12 44v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-3-3z\' fill=\'%23000\' fill-opacity=\'.3\'/%3E%3Cpath d=\'m12 76v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-3-3z\' fill=\'%2318a0fb\'/%3E%3Cpath d=\'m12 108v8h8v-1h-3c0-2.209-1.7909-4-4-4v-3zm1 4v3h3c0-1.657-1.3431-3-3-3z\' fill=\'%23fff\'/%3E%3C/g%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_frame.scss: -------------------------------------------------------------------------------- 1 | .icon--frame { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m11 24v-3h-3v-1h3v-8h-3v-1h3v-3h1v3h8v-3h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m11 56v-3h-3v-1h3v-8h-3v-1h3v-3h1v3h8v-3h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m11 88v-3h-3v-1h3v-8h-3v-1h3v-3h1v3h8v-3h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z" fill="%2318a0fb"/%3E%3Cpath d="m11 120v-3h-3v-1h3v-8h-3v-1h3v-3h1v3h8v-3h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_draft.scss: -------------------------------------------------------------------------------- 1 | .icon--draft { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m10 9h7.7071l4.2929 4.2929v9.7071h-12zm1 1v12h10v-8h-4v-4zm7 .7071 2.2929 2.2929h-2.2929z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m10 41h7.7071l4.2929 4.2929v9.7071h-12zm1 1v12h10v-8h-4v-4zm7 .7071 2.2929 2.2929h-2.2929z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m10 73h7.7071l4.2929 4.2929v9.7071h-12zm1 1v12h10v-8h-4v-4zm7 .7071 2.2929 2.2929h-2.2929z" fill="%2318a0fb"/%3E%3Cpath d="m10 105h7.7071l4.2929 4.293v9.707h-12zm1 1v12h10v-8h-4v-4zm7 .707 2.2929 2.293h-2.2929z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_list.scss: -------------------------------------------------------------------------------- 1 | .icon--list { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m23 10h-14v1h14z" fill-opacity=".8"/%3E%3Cpath d="m9 15.5h14v1h-14z" fill-opacity=".8"/%3E%3Cpath d="m9 21h14v1h-14z" fill-opacity=".8"/%3E%3Cpath d="m23 42h-14v1h14z" fill-opacity=".3"/%3E%3Cpath d="m9 47.5h14v1h-14z" fill-opacity=".3"/%3E%3Cpath d="m9 53h14v1h-14z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m23 74h-14v1h14z" fill="%2318a0fb"/%3E%3Cpath d="m9 79.5h14v1h-14z" fill="%2318a0fb"/%3E%3Cpath d="m9 85h14v1h-14z" fill="%2318a0fb"/%3E%3Cpath d="m23 106h-14v1h14z" fill="%23fff"/%3E%3Cpath d="m9 111.5h14v1h-14z" fill="%23fff"/%3E%3Cpath d="m9 117h14v1h-14z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | // "moduleResolution": "node", 9 | // "allowSyntheticDefaultImports": true, 10 | // "sourceMap": true, 11 | "baseUrl": ".", 12 | "types": [ 13 | "webpack-env", 14 | "./figma" 15 | ], 16 | "paths": { 17 | "@/*": [ 18 | "ui-src/*" 19 | ] 20 | }, 21 | "lib": [ 22 | "es2018", 23 | "dom", 24 | "dom.iterable" 25 | ] 26 | }, 27 | "include": [ 28 | "ui-src/**/*.ts", 29 | "ui-src/**/*.tsx", 30 | "ui-src/**/*.vue", 31 | "tests/**/*.ts", 32 | "tests/**/*.tsx", 33 | "plugin-src/**/*.ts" 34 | ], 35 | "exclude": [ 36 | "node_modules" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_layout-grid-columns.scss: -------------------------------------------------------------------------------- 1 | .icon--layout-grid-columns { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9 9h3v14h-3z" fill-opacity=".8"/%3E%3Cpath d="m14.5 9h3v14h-3z" fill-opacity=".8"/%3E%3Cpath d="m20 9h3v14h-3z" fill-opacity=".8"/%3E%3Cpath d="m9 41h3v14h-3z" fill-opacity=".3"/%3E%3Cpath d="m14.5 41h3v14h-3z" fill-opacity=".3"/%3E%3Cpath d="m20 41h3v14h-3z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9 73h3v14h-3z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 73h3v14h-3z" fill="%2318a0fb"/%3E%3Cpath d="m20 73h3v14h-3z" fill="%2318a0fb"/%3E%3Cpath d="m9 105h3v14h-3z" fill="%23fff"/%3E%3Cpath d="m14.5 105h3v14h-3z" fill="%23fff"/%3E%3Cpath d="m20 105h3v14h-3z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_layout-grid-rows.scss: -------------------------------------------------------------------------------- 1 | .icon--layout-grid-rows { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9 9h14v3h-14z" fill-opacity=".8"/%3E%3Cpath d="m9 14.5h14v3h-14z" fill-opacity=".8"/%3E%3Cpath d="m9 20h14v3h-14z" fill-opacity=".8"/%3E%3Cpath d="m9 41h14v3h-14z" fill-opacity=".3"/%3E%3Cpath d="m9 46.5h14v3h-14z" fill-opacity=".3"/%3E%3Cpath d="m9 52h14v3h-14z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9 73h14v3h-14z" fill="%2318a0fb"/%3E%3Cpath d="m9 78.5h14v3h-14z" fill="%2318a0fb"/%3E%3Cpath d="m9 84h14v3h-14z" fill="%2318a0fb"/%3E%3Cpath d="m9 105h14v3h-14z" fill="%23fff"/%3E%3Cpath d="m9 110.5h14v3h-14z" fill="%23fff"/%3E%3Cpath d="m9 116h14v3h-14z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_stroke-weight.scss: -------------------------------------------------------------------------------- 1 | .icon--stroke-weight { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m10 10h12v1h-12z" fill-opacity=".8"/%3E%3Cpath d="m10 14h12v2h-12z" fill-opacity=".8"/%3E%3Cpath d="m22 19h-12v3h12z" fill-opacity=".8"/%3E%3Cpath d="m10 42h12v1h-12z" fill-opacity=".3"/%3E%3Cpath d="m10 46h12v2h-12z" fill-opacity=".3"/%3E%3Cpath d="m22 51h-12v3h12z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m10 74h12v1h-12z" fill="%2318a0fb"/%3E%3Cpath d="m10 78h12v2h-12z" fill="%2318a0fb"/%3E%3Cpath d="m22 83h-12v3h12z" fill="%2318a0fb"/%3E%3Cpath d="m10 106h12v1h-12z" fill="%23fff"/%3E%3Cpath d="m10 110h12v2h-12z" fill="%23fff"/%3E%3Cpath d="m22 115h-12v3h12z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_dist-vert-spacing.scss: -------------------------------------------------------------------------------- 1 | .icon--dist-vert-spacing { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9.5 10h13v1h-13z" fill-opacity=".8"/%3E%3Cpath d="m12.5 15h7v2h-7z" fill-opacity=".8"/%3E%3Cpath d="m22.5 21h-13v1h13z" fill-opacity=".8"/%3E%3Cpath d="m9.5 42h13v1h-13z" fill-opacity=".3"/%3E%3Cpath d="m12.5 47h7v2h-7z" fill-opacity=".3"/%3E%3Cpath d="m22.5 53h-13v1h13z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9.5 74h13v1h-13z" fill="%2318a0fb"/%3E%3Cpath d="m12.5 79h7v2h-7z" fill="%2318a0fb"/%3E%3Cpath d="m22.5 85h-13v1h13z" fill="%2318a0fb"/%3E%3Cpath d="m9.5 106h13v1h-13z" fill="%23fff"/%3E%3Cpath d="m12.5 111h7v2h-7z" fill="%23fff"/%3E%3Cpath d="m22.5 117h-13v1h13z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_instance.scss: -------------------------------------------------------------------------------- 1 | .icon--instance { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m7.00037 15.9999 8.99983-8.99999 8.9999 8.99999-8.9999 9.0001zm8.99983 7.6565 7.6564-7.6565-7.6564-7.65648-7.65634 7.65648z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m7.00037 47.9999 8.99983-9 8.9999 9-8.9999 9.0001zm8.99983 7.6565 7.6564-7.6565-7.6564-7.6565-7.65634 7.6565z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m7.00037 79.9999 8.99983-9 8.9999 9-8.9999 9.0001zm8.99983 7.6565 7.6564-7.6565-7.6564-7.6565-7.65634 7.6565z" fill="%2318a0fb"/%3E%3Cpath d="m7.00037 112 8.99983-9 8.9999 9-8.9999 9zm8.99983 7.656 7.6564-7.656-7.6564-7.657-7.65634 7.657z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_tidy-up-list-vert.scss: -------------------------------------------------------------------------------- 1 | .icon--tidy-up-list-vert { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9.5 10h13v2h-13z" fill-opacity=".8"/%3E%3Cpath d="m9.5 15h13v2h-13z" fill-opacity=".8"/%3E%3Cpath d="m22.5 20h-13v2h13z" fill-opacity=".8"/%3E%3Cpath d="m9.5 42h13v2h-13z" fill-opacity=".3"/%3E%3Cpath d="m9.5 47h13v2h-13z" fill-opacity=".3"/%3E%3Cpath d="m22.5 52h-13v2h13z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9.5 74h13v2h-13z" fill="%2318a0fb"/%3E%3Cpath d="m9.5 79h13v2h-13z" fill="%2318a0fb"/%3E%3Cpath d="m22.5 84h-13v2h13z" fill="%2318a0fb"/%3E%3Cpath d="m9.5 106h13v2h-13z" fill="%23fff"/%3E%3Cpath d="m9.5 111h13v2h-13z" fill="%23fff"/%3E%3Cpath d="m22.5 116h-13v2h13z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_layout-align-left.scss: -------------------------------------------------------------------------------- 1 | .icon--layout-align-left { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m10 22.5h-1v-13h1z" fill-opacity=".8"/%3E%3Cpath d="m22 14.5h-10v-2h10z" fill-opacity=".8"/%3E%3Cpath d="m12 19.5h6v-2h-6z" fill-opacity=".8"/%3E%3Cpath d="m10 54.5h-1v-13h1z" fill-opacity=".3"/%3E%3Cpath d="m22 46.5h-10v-2h10z" fill-opacity=".3"/%3E%3Cpath d="m12 51.5h6v-2h-6z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m10 86.5h-1v-13h1z" fill="%2318a0fb"/%3E%3Cpath d="m22 78.5h-10v-2h10z" fill="%2318a0fb"/%3E%3Cpath d="m12 83.5h6v-2h-6z" fill="%2318a0fb"/%3E%3Cpath d="m10 118.5h-1v-13h1z" fill="%23fff"/%3E%3Cpath d="m22 110.5h-10v-2h10z" fill="%23fff"/%3E%3Cpath d="m12 115.5h6v-2h-6z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_layout-align-right.scss: -------------------------------------------------------------------------------- 1 | .icon--layout-align-right { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m22 22.5h1v-13h-1z" fill-opacity=".8"/%3E%3Cpath d="m10 14.5h10v-2h-10z" fill-opacity=".8"/%3E%3Cpath d="m20 19.5h-6v-2h6z" fill-opacity=".8"/%3E%3Cpath d="m22 54.5h1v-13h-1z" fill-opacity=".3"/%3E%3Cpath d="m10 46.5h10v-2h-10z" fill-opacity=".3"/%3E%3Cpath d="m20 51.5h-6v-2h6z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m22 86.5h1v-13h-1z" fill="%2318a0fb"/%3E%3Cpath d="m10 78.5h10v-2h-10z" fill="%2318a0fb"/%3E%3Cpath d="m20 83.5h-6v-2h6z" fill="%2318a0fb"/%3E%3Cpath d="m22 118.5h1v-13h-1z" fill="%23fff"/%3E%3Cpath d="m10 110.5h10v-2h-10z" fill="%23fff"/%3E%3Cpath d="m20 115.5h-6v-2h6z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_layout-align-top.scss: -------------------------------------------------------------------------------- 1 | .icon--layout-align-top { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m14.5 22v-10h-2v10z" fill-opacity=".8"/%3E%3Cpath d="m22.5 10v-1h-13v1z" fill-opacity=".8"/%3E%3Cpath d="m19.5 12v6h-2v-6z" fill-opacity=".8"/%3E%3Cpath d="m14.5 54v-10h-2v10z" fill-opacity=".3"/%3E%3Cpath d="m22.5 42v-1h-13v1z" fill-opacity=".3"/%3E%3Cpath d="m19.5 44v6h-2v-6z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m14.5 86v-10h-2v10z" fill="%2318a0fb"/%3E%3Cpath d="m22.5 74v-1h-13v1z" fill="%2318a0fb"/%3E%3Cpath d="m19.5 76v6h-2v-6z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 118v-10h-2v10z" fill="%23fff"/%3E%3Cpath d="m22.5 106v-1h-13v1z" fill="%23fff"/%3E%3Cpath d="m19.5 108v6h-2v-6z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_tidy-up-list-horiz.scss: -------------------------------------------------------------------------------- 1 | .icon--tidy-up-list-horiz { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m10 22.5v-13h2v13z" fill-opacity=".8"/%3E%3Cpath d="m15 22.5v-13h2v13z" fill-opacity=".8"/%3E%3Cpath d="m20 9.5v13h2v-13z" fill-opacity=".8"/%3E%3Cpath d="m10 54.5v-13h2v13z" fill-opacity=".3"/%3E%3Cpath d="m15 54.5v-13h2v13z" fill-opacity=".3"/%3E%3Cpath d="m20 41.5v13h2v-13z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m10 86.5v-13h2v13z" fill="%2318a0fb"/%3E%3Cpath d="m15 86.5v-13h2v13z" fill="%2318a0fb"/%3E%3Cpath d="m20 73.5v13h2v-13z" fill="%2318a0fb"/%3E%3Cpath d="m10 118.5v-13h2v13z" fill="%23fff"/%3E%3Cpath d="m15 118.5v-13h2v13z" fill="%23fff"/%3E%3Cpath d="m20 105.5v13h2v-13z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_dist-horiz-spacing.scss: -------------------------------------------------------------------------------- 1 | .icon--dist-horiz-spacing { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m11 22.5v-13h-1v13z" fill-opacity=".8"/%3E%3Cpath d="m22 9.5v13h-1v-13z" fill-opacity=".8"/%3E%3Cpath d="m17 12.5v7h-2v-7z" fill-opacity=".8"/%3E%3Cpath d="m11 54.5v-13h-1v13z" fill-opacity=".3"/%3E%3Cpath d="m22 41.5v13h-1v-13z" fill-opacity=".3"/%3E%3Cpath d="m17 44.5v7h-2v-7z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m11 86.5v-13h-1v13z" fill="%2318a0fb"/%3E%3Cpath d="m22 73.5v13h-1v-13z" fill="%2318a0fb"/%3E%3Cpath d="m17 76.5v7h-2v-7z" fill="%2318a0fb"/%3E%3Cpath d="m11 118.5v-13h-1v13z" fill="%23fff"/%3E%3Cpath d="m22 105.5v13h-1v-13z" fill="%23fff"/%3E%3Cpath d="m17 108.5v7h-2v-7z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/figma-plugin-ds/scss/icons/_layout-align-bottom.scss: -------------------------------------------------------------------------------- 1 | .icon--layout-align-bottom { 2 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m14.5 10v10h-2v-10z" fill-opacity=".8"/%3E%3Cpath d="m22.5 22v1h-13v-1z" fill-opacity=".8"/%3E%3Cpath d="m19.5 20v-6h-2v6z" fill-opacity=".8"/%3E%3Cpath d="m14.5 42v10h-2v-10z" fill-opacity=".3"/%3E%3Cpath d="m22.5 54v1h-13v-1z" fill-opacity=".3"/%3E%3Cpath d="m19.5 52v-6h-2v6z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m14.5 74v10h-2v-10z" fill="%2318a0fb"/%3E%3Cpath d="m22.5 86v1h-13v-1z" fill="%2318a0fb"/%3E%3Cpath d="m19.5 84v-6h-2v6z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 106v10h-2v-10z" fill="%23fff"/%3E%3Cpath d="m22.5 118v1h-13v-1z" fill="%23fff"/%3E%3Cpath d="m19.5 116v-6h-2v6z" fill="%23fff"/%3E%3C/svg%3E'); 3 | } 4 | -------------------------------------------------------------------------------- /ui-src/figma-ds/index.ts: -------------------------------------------------------------------------------- 1 | import Button from "./Button.vue"; 2 | import Checkbox from "./Checkbox.vue"; 3 | import FigmaSwitch from "./FigmaSwitch.vue"; 4 | import Disclosure from "./Disclosure.vue"; 5 | import DisclosureItem from "./DisclosureItem.vue"; 6 | import Input from "./Input.vue"; 7 | import Icon from "./Icon.vue"; 8 | import Label from "./Label.vue"; 9 | import SectionTitle from "./SectionTitle.vue"; 10 | import Divider from "./Divider.vue"; 11 | import Tip from "./Tip.vue"; 12 | import Select from "./Select.vue"; 13 | import Textarea from "./Textarea.vue"; 14 | import Bell from "./Bell.vue"; 15 | 16 | export default { 17 | Button, 18 | Checkbox, 19 | FigmaSwitch, 20 | Disclosure, 21 | DisclosureItem, 22 | Input, 23 | Icon, 24 | Label, 25 | SectionTitle, 26 | Divider, 27 | Tip, 28 | Select, 29 | Textarea, 30 | Bell, 31 | }; -------------------------------------------------------------------------------- /ui-src/figma-ds/Textarea.vue: -------------------------------------------------------------------------------- 1 |