mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: added thumbnaails missing 2

Browse source
This commit is contained in:
Andrea N. Cardona 2022-05-02 12:10:20 -05:00
commit c3327a9a23
20 changed files with 623 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

59
carbon.yml
View file

@ -38,8 +38,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/breakpoint.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -64,8 +63,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/button-set.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -89,8 +87,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/clickable-tile.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -122,8 +119,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/composed-modal.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -146,8 +142,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/context-menu.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -198,8 +193,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/expandable-tile.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -223,8 +217,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/fluid-form.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -280,8 +273,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/inline-loading.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -308,13 +300,12 @@ assets:
action: link action: link
url: https://carbon-components-svelte.onrender.com/components/Loading url: https://carbon-components-svelte.onrender.com/components/Loading
local-storage: local-storage:
name: local-storage name: Local storage
status: stable status: stable
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/local-storage.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -356,8 +347,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/ordered-list.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -402,8 +392,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/password-input.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -469,8 +458,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/recursive-list.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -503,8 +491,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/selectable-tile.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -518,8 +505,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/skeleton-placeholder.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -534,8 +520,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/skeleton-text.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -628,8 +613,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/toast-notification.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -669,8 +653,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/tooltip-icon.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -692,8 +675,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/truncate.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook
@ -717,8 +699,7 @@ assets:
type: component type: component
platform: web platform: web
framework: svelte framework: svelte
#TODO: add thumbnail thumbnailPath: './thumbnails/unordered-list.svg'
thumbnailPath: ''
demoLinks: demoLinks:
- type: storybook - type: storybook
name: Storybook name: Storybook

149
thumbnails/breakpoint.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

15
thumbnails/button-set.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>button-set</title>
<g id="button-set" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-Copy-2" fill="#393939" x="56" y="74" width="104" height="32"></rect>
<rect id="Rectangle-Copy-4" fill="#FFFFFF" x="159" y="74" width="1" height="32"></rect>
<rect id="Rectangle-Copy-3" fill="#0E62FE" x="160" y="74" width="104" height="32"></rect>
<text id="Cancel" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#F4F4F4">
<tspan x="68" y="95">Cancel</tspan>
</text>
<text id="Submit" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" fill="#FFFFFF">
<tspan x="172" y="95">Submit</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 978 B

33
thumbnails/clickable-tile.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>clickable-tile</title>
<defs>
<polygon id="path-1" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<filter x="-25.6%" y="-15.2%" width="156.3%" height="137.2%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.75" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<filter x="-13.7%" y="-5.3%" width="127.4%" height="117.7%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="0.75" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="clickable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="72" y="41" width="176" height="98"></rect>
<rect id="Rectangle-Copy-4" fill="#A8A8A8" x="85" y="54" width="90" height="8"></rect>
<g id="Group" transform="translate(212.000000, 97.000000)">
<g id="Soft-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="Hard-Shadow" fill="black" fill-opacity="1">
<use filter="url(#filter-4)" xlink:href="#path-3"></use>
</g>
<polygon id="Ouline" fill="#FFFFFF" points="17.9403457 21.1863925 13.5219224 23.061902 10.9929768 17.1040795 7.2 20.8970563 7.2 1.90294373 20.8970563 15.6 15.5690628 15.6"></polygon>
<polygon id="Arrow" fill="#000000" points="13.7560605 14.4 18 14.4 8.4 4.8 8.4 18 11.4024434 14.9975566 14.1576509 21.4884188 16.3668625 20.5506641"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

33
thumbnails/composed-modal.svg Normal file
View file

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>composed-modal</title>
<defs>
<rect id="path-1" x="60" y="44" width="200" height="90"></rect>
<filter x="-5.0%" y="-8.9%" width="110.0%" height="122.2%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.862745106 0 0 0 0 0.862745106 0 0 0 0 0.862745106 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
<polygon id="path-3" points="6.53025 6 9 3.53025 8.46975 3 6 5.46975 3.53025 3 3 3.53025 5.46975 6 3 8.46975 3.53025 9 6 6.53025 8.46975 9 9 8.46975"></polygon>
</defs>
<g id="composed-modal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Rectangle-Copy" fill="black" fill-opacity="1">
<use filter="url(#filter-2)" xlink:href="#path-1"></use>
</g>
<g id="color/gray/10-copy-11" transform="translate(60.000000, 44.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="200" height="90"></rect>
</g>
<g id="checkbox" transform="translate(69.000000, 76.000000)" fill="#161616">
<path d="M9.75,1.5 L2.25,1.5 C1.83578644,1.5 1.5,1.83578644 1.5,2.25 L1.5,9.75 C1.5,10.1642136 1.83578644,10.5 2.25,10.5 L9.75,10.5 C10.1642136,10.5 10.5,10.1642136 10.5,9.75 L10.5,2.25 C10.5,1.83578644 10.1642136,1.5 9.75,1.5 Z M2.25,9.75 L2.25,2.25 L9.75,2.25 L9.75,9.75 L2.25,9.75 Z" id="Fill"></path>
</g>
<g id="icon/navigation/close/16-copy-3" transform="translate(239.000000, 53.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-3"></use>
</g>
<rect id="Rectangle-Copy-5" fill="#8D8D8D" x="70" y="57" width="58" height="7"></rect>
<rect id="Rectangle-Copy-20" fill="#C6C6C6" x="160" y="108" width="101" height="26"></rect>
<rect id="Rectangle-Copy-21" fill="#A8A8A8" x="88" y="79" width="96" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

46
thumbnails/expandable-tile.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>expandable-tile</title>
<defs>
<filter x="-54.7%" y="-48.6%" width="209.4%" height="197.2%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<polygon id="path-2" points="5 0 10 5 9.293 5.707 5 1.414 0.707 5.707 0 5"></polygon>
</defs>
<g id="expandable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(72.000000, 33.000000)">
<rect id="Rectangle" stroke="#0F62FE" stroke-width="1.5" fill="#E0E0E0" x="0" y="8" width="176" height="98"></rect>
<rect id="Rectangle-Copy-4" fill="#A8A8A8" x="13" y="21" width="90" height="8"></rect>
<rect id="Rectangle-Copy-5" x="13" y="0" width="90" height="8"></rect>
<g transform="translate(153.000000, 90.000000)" fill="#FFFFFF" id="hand-cursor">
<g filter="url(#filter-1)" transform="translate(4.000000, 2.000000)">
<polygon id="Rectangle" points="7 4 10 4 10 8 7 8"></polygon>
<polygon id="Rectangle-Copy" points="10 7 13 7 13 11 10 11"></polygon>
<path d="M13.2815687,10.7869723 C13.2793405,10.8536671 13.2719207,10.9325894 13.2592869,11.023739 C13.2280924,11.2519911 13.1705384,11.4609684 13.0866028,11.6506708 C12.819221,12.2583277 12.3420114,12.5621673 11.6549961,12.5621673 C11.2561516,12.5621673 10.9546118,12.5695705 10.7503544,12.5843989 L10.5631872,12.5843989 L10.5631872,11.6506708 L10.5631872,9.9832991 M10.5631872,11.6506708 C10.560959,11.7173657 10.5535391,11.7962879 10.5409053,11.8874376 C10.5097108,12.1156896 10.4521569,12.3246669 10.3682213,12.5143693 C10.1008395,13.1220485 9.62362982,13.4258659 8.93661459,13.4258659 C8.53777008,13.4258659 8.23623026,13.4332912 8.03197286,13.4480975 L7.8448056,13.4480975 L7.8448056,10.8469976 M7.8448056,13.4480975 L7.8448056,16.2292735 C7.84331272,16.2959684 7.83662817,16.3748906 7.82475197,16.466018 C7.79578561,16.6942701 7.74266576,16.9032474 7.66543698,17.0929498 C7.43444139,17.6605898 7.0337475,17.9629621 6.463333,18 C5.89365381,17.9629621 5.49333871,17.6605898 5.26234312,17.0929498 C5.18509206,16.9032474 5.1319945,16.6942479 5.10302813,16.466018 C5.09112964,16.3748684 5.08408859,16.2959684 5.08186041,16.2292735 L5.08186041,7.93576665 C3.06312787,10.4279316 0.851739859,10.1112215 4.4408921e-15,8.1137102 C2.40124447,5.97131542 4.45574138,3.84533708 5.26234312,0 L14.1505595,0.0222316227 C14.4558204,0.863320603 14.8049096,1.37327819 15.1978049,2.81166418 C15.5914577,4.25005017 15.8569679,5.81524778 15.9943798,8.51490042 L15.9999503,9.64871318 C16.0006856,9.72430069 15.9932657,9.81916303 15.9776685,9.93327795 C15.9464739,10.16153 15.88892,10.3705073 15.8049844,10.5602097 C15.5376026,11.1678666 15.0603929,11.4717062 14.3733777,11.4717062 C13.9745332,11.4717062 13.6729934,11.4791094 13.468736,11.4939379 L13.2815687,11.5161695 L13.2815687,10.7869723 C13.2815687,10.7780796 13.2782264,9.23853974 13.2782264,9.23853974 L13.2815687,8.89283801 M13.2715419,8.69386498 L13.3043009,9.23853974" id="Shape" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(8.000000, 9.000000) scale(1, -1) translate(-8.000000, -9.000000) "></path>
</g>
</g>
<g transform="translate(144.000000, 79.000000)" id="icon/navigation/chevron/up/16-copy-46">
<g transform="translate(8.000000, 8.000000) scale(1, -1) translate(-8.000000, -8.000000) " id="Group">
<g id="chevron--up" transform="translate(3.000000, 5.000000)">
<mask id="mask-3" fill="white">
<use xlink:href="#path-2"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-2"></use>
<g id="Group" mask="url(#mask-3)">
<g transform="translate(-3.000000, -5.000000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="40" height="40"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(8.000000, 8.000000) rotate(-90.000000) translate(-8.000000, -8.000000) " points="1.77635684e-15 -7.90206676e-15 16 -7.90206676e-15 16 16 1.77635684e-15 16"></polygon>
</g>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

77
thumbnails/fluid-form.svg Normal file
View file

@ -0,0 +1,77 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>form</title>
<defs>
<polygon id="path-1" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
<polygon id="path-3" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
<polygon id="path-5" points="2.5 0 5 2.5 4.6465 2.8535 2.5 0.707 0.3535 2.8535 0 2.5"></polygon>
</defs>
<g id="form" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="color/gray/10-copy-12" transform="translate(90.000000, 32.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="152" height="116"></rect>
</g>
<rect id="Rectangle-Copy-6" fill="#A8A8A8" x="99" y="41" width="48.59854" height="5"></rect>
<rect id="Rectangle-Copy-14" fill="#C6C6C6" x="99" y="52" width="89" height="3"></rect>
<rect id="Rectangle-Copy-26" fill="#C6C6C6" x="99" y="58" width="72.7591241" height="3"></rect>
<rect id="Rectangle-25-Copy-22" stroke="#006AFF" stroke-width="1.14" fill="#FFFFFF" x="90.57" y="72.57" width="150.86" height="14.86"></rect>
<rect id="Rectangle-Copy-27" fill="#C6C6C6" x="99" y="78" width="62.9489051" height="3"></rect>
<rect id="Rectangle-Copy-28" fill="#C6C6C6" x="99" y="95" width="33.948905" height="3"></rect>
<rect id="Rectangle-Copy-30" fill="#C6C6C6" x="111" y="112" width="38.948905" height="3"></rect>
<rect id="Rectangle-Copy-29" fill="#C6C6C6" x="172" y="95" width="33.948905" height="3"></rect>
<rect id="Rectangle-Copy-56" fill="#C6C6C6" x="91" y="104" width="151" height="1"></rect>
<rect id="Rectangle-Copy-57" fill="#C6C6C6" x="163" y="88" width="1" height="16"></rect>
<g id="Group" transform="translate(228.000000, 76.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<g id="Group" transform="translate(228.000000, 92.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-3"></use>
<g id="Group" mask="url(#mask-4)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<g id="Group" transform="translate(149.000000, 92.000000)">
<g id="Group" transform="translate(4.000000, 4.000000) scale(1, -1) translate(-4.000000, -4.000000) ">
<g id="chevron--up" transform="translate(1.500000, 2.500000)">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-5"></use>
<g id="Group" mask="url(#mask-6)">
<g transform="translate(-1.500000, -2.500000)" id="icon-color">
<rect id="Rectangle" fill="#000000" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<polygon id="transparent-rectangle" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " points="-8.8817842e-16 -5.72739022e-15 8 -5.72739022e-15 8 8 -8.8817842e-16 8"></polygon>
</g>
</g>
<rect id="Rectangle-Copy-24" fill="#0F6DFF" x="166" y="130" width="76" height="18"></rect>
<rect id="Rectangle-Copy-25" fill="#3D3D3D" x="90" y="130" width="75" height="18"></rect>
<g id="checkbox" transform="translate(97.000000, 109.000000)" fill="#161616">
<path d="M7.3125,1.125 L1.6875,1.125 C1.37683983,1.125 1.125,1.37683983 1.125,1.6875 L1.125,7.3125 C1.125,7.62316017 1.37683983,7.875 1.6875,7.875 L7.3125,7.875 C7.62316017,7.875 7.875,7.62316017 7.875,7.3125 L7.875,1.6875 C7.875,1.37683983 7.62316017,1.125 7.3125,1.125 Z M1.6875,7.3125 L1.6875,1.6875 L7.3125,1.6875 L7.3125,7.3125 L1.6875,7.3125 Z" id="Fill"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.7 KiB

23
thumbnails/inline-notification.svg Normal file
View file

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>inline-notification</title>
<defs>
<circle id="path-1" cx="5" cy="5" r="4.375"></circle>
<polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
</defs>
<g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
<g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
<rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
<rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

22
thumbnails/local-storage.svg Normal file
View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>local-storage</title>
<g id="local-storage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Button" transform="translate(86.000000, 106.000000)">
<rect id="Background" fill="#0F62FE" x="0" y="0" width="148" height="32"></rect>
<text id="Label" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" line-spacing="16" letter-spacing="0.137142854" fill="#FFFFFF">
<tspan x="16" y="20">Clear storage</tspan>
</text>
</g>
<g id="Group" transform="translate(86.000000, 60.000000)">
<g>
<rect id="pill" fill="#8D8D8D" x="0" y="0" width="32" height="16" rx="8"></rect>
<circle id="handle" fill="#FFFFFF" cx="8" cy="8" r="5"></circle>
</g>
<text id="Text" font-family="IBMPlexSans, IBM Plex Sans" font-size="14" font-weight="normal" line-spacing="18" letter-spacing="0.159999996" fill="#161616">
<tspan x="40" y="13">Off</tspan>
</text>
</g>
<rect id="Rectangle-3-Copy-6" fill="#A8A8A8" opacity="0.754768008" x="86" y="42" width="70" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

12
thumbnails/ordered-list.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ordered-list</title>
<g id="ordered-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="1.-Ordered-List-2.-O" fill="#161616">
<tspan x="113" y="70">1. Ordered List</tspan>
<tspan x="113" y="86">2. Ordered List </tspan>
<tspan x="113" y="102">3. Ordered List</tspan>
<tspan x="113" y="118">4. Ordered List </tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 768 B

27
thumbnails/password-input.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>password-input</title>
<defs>
<path d="M15.47,7.83 C14.266932,4.72169147 11.330606,2.626562 8,2.5 C4.66939395,2.626562 1.73306803,4.72169147 0.53,7.83 C0.490283624,7.9398538 0.490283624,8.0601462 0.53,8.17 C1.73306803,11.2783085 4.66939395,13.373438 8,13.5 C11.330606,13.373438 14.266932,11.2783085 15.47,8.17 C15.5097164,8.0601462 15.5097164,7.9398538 15.47,7.83 Z M8,12.5 C5.35,12.5 2.55,10.535 1.535,8 C2.55,5.465 5.35,3.5 8,3.5 C10.65,3.5 13.45,5.465 14.465,8 C13.45,10.535 10.65,12.5 8,12.5 Z M8,5 C6.34314575,5 5,6.34314575 5,8 C5,9.65685425 6.34314575,11 8,11 C9.65685425,11 11,9.65685425 11,8 C11,6.34314575 9.65685425,5 8,5 Z M8,10 C6.8954305,10 6,9.1045695 6,8 C6,6.8954305 6.8954305,6 8,6 C9.1045695,6 10,6.8954305 10,8 C10,8.53043298 9.78928632,9.03914081 9.41421356,9.41421356 C9.03914081,9.78928632 8.53043298,10 8,10 Z" id="path-1"></path>
</defs>
<g id="password-input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-21" transform="translate(56.000000, 75.000000)">
<rect id="Rectangle-11-Copy" fill="#F3F3F3" x="0" y="0" width="208" height="32"></rect>
<line x1="0" y1="31.5" x2="208" y2="31.5" id="Path-3-Copy-8" stroke="#8C8C8C"></line>
</g>
<g id="Group" transform="translate(234.000000, 83.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
</g>
<circle id="Oval" fill="#161616" cx="71.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy" fill="#161616" cx="80.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-2" fill="#161616" cx="89.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-3" fill="#161616" cx="98.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-4" fill="#161616" cx="107.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-5" fill="#161616" cx="116.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-6" fill="#161616" cx="125.5" cy="91.5" r="2.5"></circle>
<circle id="Oval-Copy-7" fill="#161616" cx="134.5" cy="91.5" r="2.5"></circle>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

14
thumbnails/recursive-list.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>recursive-list</title>
<g id="recursive-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="–-Item-1-•-Item-1a-•" fill="#161616">
<tspan x="120" y="54">– Item 1</tspan>
<tspan x="120" y="70"> • Item 1a</tspan>
<tspan x="120" y="86"> • Item 1b</tspan>
<tspan x="120" y="102">– Item 2</tspan>
<tspan x="120" y="118"> • Item 2a</tspan>
<tspan x="120" y="134"> • Item 2b</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 863 B

25
thumbnails/selectable-tile.svg Normal file
View file

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>selectable-tile</title>
<defs>
<circle id="path-1" cx="8" cy="8" r="7"></circle>
<polygon id="path-3" points="7 10.75 4.5 8.25 5.295 7.5 7 9.175 10.705 5.5 11.5 6.29"></polygon>
</defs>
<g id="selectable-tile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(72.000000, 41.000000)" fill="#F3F3F3">
<rect id="Rectangle" x="0" y="0" width="176" height="98"></rect>
<rect id="Rectangle" stroke="#161616" x="0" y="0" width="176" height="98"></rect>
</g>
<rect id="Rectangle-Copy-4" fill="#C6C6C6" x="86" y="55" width="90" height="8"></rect>
<g id="Group" transform="translate(222.000000, 51.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#000000" xlink:href="#path-1"></use>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

15
thumbnails/skeleton-placeholder.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-placeholder</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-placeholder" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="118" y="48" width="85" height="85"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="117" y="48" width="56.4662577" height="85"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(177.733129, 90.500000) scale(-1, 1) translate(-177.733129, -90.500000) " x="173.466258" y="48" width="8.533742" height="85"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

15
thumbnails/skeleton-text.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton-text</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 989 B

15
thumbnails/skeleton.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>skeleton</title>
<defs>
<linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
<stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#C6C6C6" offset="100%"></stop>
</linearGradient>
</defs>
<g id="skeleton" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
<rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
<rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 979 B

34
thumbnails/toast-notification.svg Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>toast-notification</title>
<defs>
<circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
<polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
</defs>
<g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
<rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
<g id="Group" transform="translate(73.000000, 68.000000)">
<g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
<g id="error--filled" transform="translate(0.875000, 0.875000)">
<g id="icon-2">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
</g>
<g id="icon-1" transform="translate(2.625000, 2.625000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
</g>
</g>
<rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
<rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
<rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

27
thumbnails/tooltip-icon.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>tooltip-icon</title>
<defs>
<path d="M7.03125,8.90625 L7.03125,4.6875 L5.15625,4.6875 L5.15625,5.625 L6.09375,5.625 L6.09375,8.90625 L4.6875,8.90625 L4.6875,9.84375 L8.4375,9.84375 L8.4375,8.90625 L7.03125,8.90625 L7.03125,8.90625 Z M6.5625,2.34375 C6.17417479,2.34375 5.859375,2.65854979 5.859375,3.046875 C5.859375,3.43520021 6.17417479,3.75 6.5625,3.75 C6.95082521,3.75 7.265625,3.43520021 7.265625,3.046875 C7.265625,2.65854979 6.95082521,2.34375 6.5625,2.34375 L6.5625,2.34375 Z M6.5625,13.125 C2.93813133,13.125 0,10.1868687 0,6.5625 C0,2.93813133 2.93813133,0 6.5625,0 C10.1868687,0 13.125,2.93813133 13.125,6.5625 C13.1209442,10.1851874 10.1851874,13.1209442 6.5625,13.125 Z M6.5625,0.9375 C3.45589828,0.9375 0.9375,3.45589828 0.9375,6.5625 C0.9375,9.66910172 3.45589828,12.1875 6.5625,12.1875 C9.66910172,12.1875 12.1875,9.66910172 12.1875,6.5625 C12.1840384,3.45733327 9.66766673,0.940961641 6.5625,0.9375 Z" id="path-1"></path>
</defs>
<g id="tooltip-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-56-Copy" transform="translate(100.000000, 78.700000)">
<path d="M80.3,-38.1 C81.1284271,-38.1 81.8,-37.4284271 81.8,-36.6 L81.8,54.4 C81.8,55.2284271 81.1284271,55.9 80.3,55.9 L75.161,55.9 L70.4045455,61.1 L65.647,55.9 L60.3,55.9 C59.4715729,55.9 58.8,55.2284271 58.8,54.4 L58.8,-36.6 C58.8,-37.4284271 59.4715729,-38.1 60.3,-38.1 L80.3,-38.1 Z" id="Rectangle-24" fill="#3D3D3D" transform="translate(70.300000, 11.500000) rotate(90.000000) translate(-70.300000, -11.500000) "></path>
<g id="Group" transform="translate(0.000000, 4.300000)">
<g id="information" transform="translate(0.937500, 0.937500)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
<g id="Group" mask="url(#mask-2)">
<g transform="translate(-0.937500, -0.937500)" id="icon-color">
<rect id="Rectangle-3-Copy" fill="#161616" x="0" y="0" width="37.5" height="37.5"></rect>
</g>
</g>
</g>
<rect id="transparent-rectangle" x="0" y="0" width="15" height="15"></rect>
</g>
<rect id="Rectangle-Copy" fill="#BEBEBE" x="35" y="9.3" width="59" height="5"></rect>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

9
thumbnails/truncate.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>truncate</title>
<g id="truncate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" line-spacing="22">
<text id="Truncate…" fill="#161616">
<tspan x="131" y="92">Truncate…</tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 528 B

12
thumbnails/unordered-list.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>unordered-list</title>
<g id="unordered-list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="IBMPlexSans, IBM Plex Sans" font-size="12" font-weight="normal" letter-spacing="0.137142854" line-spacing="16">
<text id="–-Unordered-List-–-U" fill="#161616">
<tspan x="113" y="70">– Unordered List</tspan>
<tspan x="113" y="86">– Unordered List</tspan>
<tspan x="113" y="102">– Unordered List</tspan>
<tspan x="113" y="118">– Unordered List </tspan>
</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 779 B