@codacy/ui-components 0.70.9 → 0.70.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Illustration/assets/attention.js +2 -2
- package/lib/Illustration/assets/empty.js +2 -2
- package/lib/Illustration/assets/error.js +2 -2
- package/lib/Illustration/assets/in-progress.js +2 -2
- package/lib/Illustration/assets/no-results.js +2 -2
- package/lib/Illustration/assets/success.js +2 -2
- package/lib/Illustration/assets/upgrade.js +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Generated from the Figma One Design System (page ↳ Illustrations). Do not edit by hand.
|
|
2
2
|
|
|
3
3
|
export const success = {
|
|
4
|
-
light: '<svg viewBox="6.6 6.6 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><circle cx="120.6" cy="120.6" r="61.6" fill="{{illustration-success-a30}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="150.6" cy="144.6" r="44" fill="{{illustration-brand-strong-a30}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="96.6004" cy="156.599" rx="35.2" ry="26.4" fill="{{illustration-accent-teal-a30}}"/></g><circle data-part="pulse-ring" opacity="0.6" cx="126.6" cy="126.6" r="59" stroke="{{illustration-success}}" stroke-width="2"/><
|
|
5
|
-
dark: '<svg viewBox="6.6 6.6 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><circle cx="120.6" cy="120.6" r="61.6" fill="{{illustration-success-a40}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="150.6" cy="144.6" r="44" fill="{{illustration-brand-strong-a40}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="96.6004" cy="156.599" rx="35.2" ry="26.4" fill="{{illustration-accent-teal-a30}}"/></g><circle data-part="pulse-ring" opacity="0.6" cx="126.6" cy="126.6" r="59" stroke="{{illustration-success}}" stroke-width="2"/><
|
|
4
|
+
light: '<svg viewBox="6.6 6.6 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><circle cx="120.6" cy="120.6" r="61.6" fill="{{illustration-success-a30}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="150.6" cy="144.6" r="44" fill="{{illustration-brand-strong-a30}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="96.6004" cy="156.599" rx="35.2" ry="26.4" fill="{{illustration-accent-teal-a30}}"/></g><circle data-part="pulse-ring" opacity="0.6" cx="126.6" cy="126.6" r="59" stroke="{{illustration-success}}" stroke-width="2"/><rect fill="{{illustration-surface-a50}}" x="70.5996" y="70.5996" width="112" height="112" rx="56"/><g data-part="disc" filter="url(#filter3_di_2267_13637)"><rect x="70.5996" y="70.5996" width="112" height="112" rx="56" fill="url(#paint0_linear_2267_13637)"/><rect x="71.0996" y="71.0996" width="111" height="111" rx="55.5" stroke="url(#paint1_linear_2267_13637)"/><path data-part="check" d="M102.6 126.6L118.6 142.6L150.6 110.6" pathLength="1" stroke="url(#paint2_linear_2267_13637)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/></g><g data-part="sparkle" filter="url(#filter4_d_2267_13637)"><circle cx="57.5996" cy="65.5996" r="3" fill="{{illustration-surface-a90}}"/></g><g data-part="sparkle-2" filter="url(#filter5_d_2267_13637)"><circle cx="195.1" cy="79.0996" r="2.5" fill="{{illustration-surface-a90}}"/></g><g data-part="sparkle-3" filter="url(#filter6_d_2267_13637)"><circle cx="184.6" cy="184.6" r="2" fill="{{illustration-surface-a90}}"/></g><g data-part="sparkle-4" filter="url(#filter7_d_2267_13637)"><circle cx="58.5996" cy="178.6" r="2" fill="{{illustration-surface-a90}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="0" y="0" width="241.199" height="241.199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="29.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="52.5996" y="46.5996" width="196" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="27" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="23.4004" y="92.1992" width="146.4" height="128.801" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="19" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_di_2267_13637" x="41.5996" y="52.5996" width="170" height="172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="13"/><feGaussianBlur stdDeviation="14.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a10}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a90}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><filter id="filter4_d_2267_13637" x="48.5996" y="56.5996" width="18" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-success-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter5_d_2267_13637" x="186.6" y="70.5996" width="17" height="17" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter6_d_2267_13637" x="176.6" y="176.6" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-success-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter7_d_2267_13637" x="50.5996" y="170.6" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-accent-purple-mid-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="126.6" y1="70.5996" x2="126.6" y2="182.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a90}}"/><stop offset="1" stop-color="{{illustration-surface-a40}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="126.6" y1="70.5996" x2="126.6" y2="182.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface}}"/><stop offset="1" stop-color="{{illustration-surface-a30}}"/></linearGradient><linearGradient id="paint2_linear_2267_13637" x1="102.6" y1="126.6" x2="150.6" y2="126.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-success-soft}}"/><stop offset="1" stop-color="{{illustration-success}}"/></linearGradient></defs></svg>',
|
|
5
|
+
dark: '<svg viewBox="6.6 6.6 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><circle cx="120.6" cy="120.6" r="61.6" fill="{{illustration-success-a40}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="150.6" cy="144.6" r="44" fill="{{illustration-brand-strong-a40}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="96.6004" cy="156.599" rx="35.2" ry="26.4" fill="{{illustration-accent-teal-a30}}"/></g><circle data-part="pulse-ring" opacity="0.6" cx="126.6" cy="126.6" r="59" stroke="{{illustration-success}}" stroke-width="2"/><rect fill="{{illustration-shadow-a30}}" x="70.5996" y="70.5996" width="112" height="112" rx="56"/><g data-part="disc" filter="url(#filter3_di_2267_13637)"><rect x="70.5996" y="70.5996" width="112" height="112" rx="56" fill="url(#paint0_linear_2267_13637)"/><rect x="71.0996" y="71.0996" width="111" height="111" rx="55.5" stroke="url(#paint1_linear_2267_13637)"/><path data-part="check" d="M102.6 126.6L118.6 142.6L150.6 110.6" pathLength="1" stroke="url(#paint2_linear_2267_13637)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/></g><g data-part="sparkle" filter="url(#filter4_d_2267_13637)"><circle cx="57.5996" cy="65.5996" r="3" fill="{{illustration-surface-a20}}"/></g><g data-part="sparkle-2" filter="url(#filter5_d_2267_13637)"><circle cx="195.1" cy="79.0996" r="2.5" fill="{{illustration-surface-a20}}"/></g><g data-part="sparkle-3" filter="url(#filter6_d_2267_13637)"><circle cx="184.6" cy="184.6" r="2" fill="{{illustration-surface-a20}}"/></g><g data-part="sparkle-4" filter="url(#filter7_d_2267_13637)"><circle cx="58.5996" cy="178.6" r="2" fill="{{illustration-surface-a20}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="0" y="0" width="241.199" height="241.199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="29.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="52.5996" y="46.5996" width="196" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="27" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="23.4004" y="92.1992" width="146.4" height="128.801" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="19" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_di_2267_13637" x="41.5996" y="52.5996" width="170" height="172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="13"/><feGaussianBlur stdDeviation="14.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a20}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a20}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><filter id="filter4_d_2267_13637" x="49.5996" y="57.5996" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-success-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter5_d_2267_13637" x="187.6" y="71.5996" width="15" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter6_d_2267_13637" x="177.6" y="177.6" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-success-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter7_d_2267_13637" x="51.5996" y="171.6" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-accent-purple-mid-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="126.6" y1="70.5996" x2="126.6" y2="182.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a20}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="126.6" y1="70.5996" x2="126.6" y2="182.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a30}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient><linearGradient id="paint2_linear_2267_13637" x1="102.6" y1="126.6" x2="150.6" y2="126.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-success-soft}}"/><stop offset="1" stop-color="{{illustration-success}}"/></linearGradient></defs></svg>',
|
|
6
6
|
motion: '__S__ [data-part="glow-main"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-main"] { animation: cui-ill-success-glow-main-t-loop 3s linear infinite both, cui-ill-success-glow-main-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-main"] { animation: cui-ill-success-glow-main-t-once 3s linear 1 both, cui-ill-success-glow-main-s-once 3s linear 1 both; } __S__ [data-part="glow-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-2"] { animation: cui-ill-success-glow-2-t-loop 3s linear infinite both, cui-ill-success-glow-2-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-2"] { animation: cui-ill-success-glow-2-t-once 3s linear 1 both, cui-ill-success-glow-2-s-once 3s linear 1 both; } __S__ [data-part="glow-3"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-3"] { animation: cui-ill-success-glow-3-t-loop 3s linear infinite both, cui-ill-success-glow-3-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-3"] { animation: cui-ill-success-glow-3-t-once 3s linear 1 both, cui-ill-success-glow-3-s-once 3s linear 1 both; } __S__ [data-part="pulse-ring"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="pulse-ring"] { animation: cui-ill-success-pulse-ring-o-loop 3s linear infinite both, cui-ill-success-pulse-ring-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="pulse-ring"] { animation: cui-ill-success-pulse-ring-o-once 3s linear 1 both, cui-ill-success-pulse-ring-s-once 3s linear 1 both; } __S__ [data-part="disc"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="disc"] { animation: cui-ill-success-disc-t-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="disc"] { animation: cui-ill-success-disc-t-once 3s linear 1 both; } __S__ [data-part="check"] { transform-box: fill-box; transform-origin: center; stroke-dasharray: 1 1; } __S__[data-play="loop"] [data-part="check"] { animation: cui-ill-success-check-d-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="check"] { animation: cui-ill-success-check-d-once 3s linear 1 both; } __S__ [data-part="sparkle"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle"] { animation: cui-ill-success-sparkle-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle"] { animation: cui-ill-success-sparkle-o-once 3s linear 1 both; } __S__ [data-part="sparkle-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle-2"] { animation: cui-ill-success-sparkle-2-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle-2"] { animation: cui-ill-success-sparkle-2-o-once 3s linear 1 both; } __S__ [data-part="sparkle-3"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle-3"] { animation: cui-ill-success-sparkle-3-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle-3"] { animation: cui-ill-success-sparkle-3-o-once 3s linear 1 both; } __S__ [data-part="sparkle-4"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle-4"] { animation: cui-ill-success-sparkle-4-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle-4"] { animation: cui-ill-success-sparkle-4-o-once 3s linear 1 both; } @keyframes cui-ill-success-glow-main-t-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-success-glow-main-t-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-success-glow-main-s-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; } 100% { scale: 1 1; } } @keyframes cui-ill-success-glow-main-s-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; } 100% { scale: 1 1; } } @keyframes cui-ill-success-glow-2-t-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 100% { translate: -6px 3px; } } @keyframes cui-ill-success-glow-2-t-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 100% { translate: -6px 3px; } } @keyframes cui-ill-success-glow-2-s-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 100% { scale: 1.06 1.06; } } @keyframes cui-ill-success-glow-2-s-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 100% { scale: 1.06 1.06; } } @keyframes cui-ill-success-glow-3-t-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-success-glow-3-t-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-success-glow-3-s-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; } 100% { scale: 1 1; } } @keyframes cui-ill-success-glow-3-s-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; } 100% { scale: 1 1; } } @keyframes cui-ill-success-pulse-ring-o-loop { 0% { animation-timing-function: steps(1, end); opacity: 0; } 33.333% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); opacity: 0.9; } 73.333% { animation-timing-function: steps(1, end); opacity: 0; } 100% { opacity: 0; } } @keyframes cui-ill-success-pulse-ring-o-once { 0% { animation-timing-function: steps(1, end); opacity: 0; } 33.333% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); opacity: 0.9; } 73.333% { animation-timing-function: steps(1, end); opacity: 0; } 100% { opacity: 0; } } @keyframes cui-ill-success-pulse-ring-s-loop { 0% { animation-timing-function: steps(1, end); scale: 0.9 0.9; } 33.333% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); scale: 0.9 0.9; } 73.333% { animation-timing-function: steps(1, end); scale: 1.35 1.35; } 100% { scale: 0.9 0.9; } } @keyframes cui-ill-success-pulse-ring-s-once { 0% { animation-timing-function: steps(1, end); scale: 0.9 0.9; } 33.333% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); scale: 0.9 0.9; } 73.333% { animation-timing-function: steps(1, end); scale: 1.35 1.35; } 100% { scale: 0.9 0.9; } } @keyframes cui-ill-success-disc-t-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px -4px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-success-disc-t-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px -4px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-success-check-d-loop { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 10% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 33.333% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes cui-ill-success-check-d-once { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 10% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 33.333% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes cui-ill-success-sparkle-o-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } 100% { opacity: 0.2; } } @keyframes cui-ill-success-sparkle-o-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } 100% { opacity: 0.2; } } @keyframes cui-ill-success-sparkle-2-o-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; } 100% { opacity: 1; } } @keyframes cui-ill-success-sparkle-2-o-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; } 100% { opacity: 1; } } @keyframes cui-ill-success-sparkle-3-o-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } 100% { opacity: 0.2; } } @keyframes cui-ill-success-sparkle-3-o-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } 100% { opacity: 0.2; } } @keyframes cui-ill-success-sparkle-4-o-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; } 100% { opacity: 1; } } @keyframes cui-ill-success-sparkle-4-o-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; } 100% { opacity: 1; } }'
|
|
7
7
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Generated from the Figma One Design System (page ↳ Illustrations). Do not edit by hand.
|
|
2
2
|
|
|
3
3
|
export const upgrade = {
|
|
4
|
-
light: '<svg viewBox="4 2 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow" filter="url(#filter0_f_2267_13637)"><circle cx="118" cy="118" r="66" fill="{{illustration-brand-strong-a30}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="164" cy="148" r="48" fill="{{illustration-success-a10}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><circle cx="93" cy="183" r="35" fill="{{illustration-accent-purple-a10}}"/></g><
|
|
5
|
-
dark: '<svg viewBox="4 2 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow" filter="url(#filter0_f_2267_13637)"><circle cx="118" cy="118" r="66" fill="{{illustration-brand-strong-a30}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="164" cy="148" r="48" fill="{{illustration-success-a10}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><circle cx="93" cy="183" r="35" fill="{{illustration-accent-purple-a10}}"/></g><
|
|
4
|
+
light: '<svg viewBox="4 2 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow" filter="url(#filter0_f_2267_13637)"><circle cx="118" cy="118" r="66" fill="{{illustration-brand-strong-a30}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="164" cy="148" r="48" fill="{{illustration-success-a10}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><circle cx="93" cy="183" r="35" fill="{{illustration-accent-purple-a10}}"/></g><rect fill="{{illustration-surface-a50}}" x="44" y="68" width="120" height="128" rx="18" transform="rotate(6 44 68)"/><g filter="url(#filter3_d_2267_13637)"><rect x="44" y="68" width="120" height="128" rx="18" transform="rotate(6 44 68)" fill="{{illustration-surface-a30}}"/><rect x="44.445" y="68.5495" width="119" height="127" rx="17.5" transform="rotate(6 44.445 68.5495)" stroke="{{illustration-surface-a80}}"/></g><rect fill="{{illustration-surface-a50}}" x="80" y="52" width="128" height="148" rx="20"/><g filter="url(#filter4_di_2267_13637)"><rect x="80" y="52" width="128" height="148" rx="20" fill="url(#paint0_linear_2267_13637)"/><rect x="80.5" y="52.5" width="127" height="147" rx="19.5" stroke="url(#paint1_linear_2267_13637)"/><rect opacity="0.9" x="96" y="70" width="56" height="6" rx="3" fill="{{illustration-brand-strong}}"/><rect opacity="0.6" x="96" y="84" width="34" height="6" rx="3" fill="{{illustration-line}}"/><circle opacity="0.18" cx="103" cy="115" r="7" fill="{{illustration-success}}"/><path data-part="tick" d="M99 115L102 118L107 112" pathLength="1" stroke="{{illustration-success}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><rect opacity="0.6" x="118" y="112" width="56" height="6" rx="3" fill="{{illustration-line}}"/><circle opacity="0.18" cx="103" cy="137" r="7" fill="{{illustration-success}}"/><path data-part="tick-2" d="M99 137L102 140L107 134" pathLength="1" stroke="{{illustration-success}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><rect opacity="0.6" x="118" y="134" width="44" height="6" rx="3" fill="{{illustration-line}}"/><circle opacity="0.18" cx="103" cy="159" r="7" fill="{{illustration-success}}"/><path data-part="tick-3" d="M99 159L102 162L107 156" pathLength="1" stroke="{{illustration-success}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><rect opacity="0.6" x="118" y="156" width="62" height="6" rx="3" fill="{{illustration-line}}"/><circle opacity="0.18" cx="103" cy="181" r="7" fill="{{illustration-success}}"/><path data-part="tick-4" d="M99 181L102 184L107 178" pathLength="1" stroke="{{illustration-success}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><rect opacity="0.6" x="118" y="178" width="38" height="6" rx="3" fill="{{illustration-line}}"/></g><g data-part="lock-badge" filter="url(#filter5_d_2267_13637)"><rect x="184" y="36" width="48" height="48" rx="24" fill="url(#paint2_linear_2267_13637)"/><rect x="184.5" y="36.5" width="47" height="47" rx="23.5" stroke="{{illustration-surface-a80}}"/><path d="M201 58V53.5C201 50 203.7 47 208 47C212.3 47 215 50 215 53.5V58" stroke="{{illustration-surface}}" stroke-width="2.6" stroke-linecap="round"/><rect x="197" y="57" width="22" height="16" rx="4.5" fill="{{illustration-surface}}"/><circle cx="208" cy="64.5" r="2.5" fill="{{illustration-brand-deep}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="0" y="0" width="236" height="236" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="26" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="66" y="50" width="196" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="18" y="108" width="150" height="150" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_d_2267_13637" x="8.62012" y="53" width="176.723" height="183.842" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="7"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a10}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter4_di_2267_13637" x="51" y="34" width="186" height="208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="13"/><feGaussianBlur stdDeviation="14.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a10}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a90}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><filter id="filter5_d_2267_13637" x="168" y="28" width="80" height="80" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="8"/><feGaussianBlur stdDeviation="8"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-strong-a30}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="144" y1="52" x2="144" y2="200" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a90}}"/><stop offset="1" stop-color="{{illustration-surface-a50}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="144" y1="52" x2="144" y2="200" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface}}"/><stop offset="1" stop-color="{{illustration-surface-a30}}"/></linearGradient><linearGradient id="paint2_linear_2267_13637" x1="184" y1="60" x2="232" y2="60" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-brand}}"/><stop offset="1" stop-color="{{illustration-brand-deep}}"/></linearGradient></defs></svg>',
|
|
5
|
+
dark: '<svg viewBox="4 2 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow" filter="url(#filter0_f_2267_13637)"><circle cx="118" cy="118" r="66" fill="{{illustration-brand-strong-a30}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="164" cy="148" r="48" fill="{{illustration-success-a10}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><circle cx="93" cy="183" r="35" fill="{{illustration-accent-purple-a10}}"/></g><rect fill="{{illustration-shadow-a30}}" x="44" y="68" width="120" height="128" rx="18" transform="rotate(6 44 68)"/><g filter="url(#filter3_d_2267_13637)"><rect x="44" y="68" width="120" height="128" rx="18" transform="rotate(6 44 68)" fill="{{illustration-surface-a10}}"/><rect x="44.445" y="68.5495" width="119" height="127" rx="17.5" transform="rotate(6 44.445 68.5495)" stroke="{{illustration-surface-a30}}"/></g><rect fill="{{illustration-shadow-a30}}" x="80" y="52" width="128" height="148" rx="20"/><g filter="url(#filter4_di_2267_13637)"><rect x="80" y="52" width="128" height="148" rx="20" fill="url(#paint0_linear_2267_13637)"/><rect x="80.5" y="52.5" width="127" height="147" rx="19.5" stroke="url(#paint1_linear_2267_13637)"/><rect opacity="0.9" x="96" y="70" width="56" height="6" rx="3" fill="{{illustration-brand-strong}}"/><rect opacity="0.6" x="96" y="84" width="34" height="6" rx="3" fill="{{illustration-line}}"/><circle opacity="0.18" cx="103" cy="115" r="7" fill="{{illustration-success}}"/><path data-part="tick" d="M99 115L102 118L107 112" pathLength="1" stroke="{{illustration-success}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><rect opacity="0.6" x="118" y="112" width="56" height="6" rx="3" fill="{{illustration-line}}"/><circle opacity="0.18" cx="103" cy="137" r="7" fill="{{illustration-success}}"/><path data-part="tick-2" d="M99 137L102 140L107 134" pathLength="1" stroke="{{illustration-success}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><rect opacity="0.6" x="118" y="134" width="44" height="6" rx="3" fill="{{illustration-line}}"/><circle opacity="0.18" cx="103" cy="159" r="7" fill="{{illustration-success}}"/><path data-part="tick-3" d="M99 159L102 162L107 156" pathLength="1" stroke="{{illustration-success}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><rect opacity="0.6" x="118" y="156" width="62" height="6" rx="3" fill="{{illustration-line}}"/><circle opacity="0.18" cx="103" cy="181" r="7" fill="{{illustration-success}}"/><path data-part="tick-4" d="M99 181L102 184L107 178" pathLength="1" stroke="{{illustration-success}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><rect opacity="0.6" x="118" y="178" width="38" height="6" rx="3" fill="{{illustration-line}}"/></g><g data-part="lock-badge" filter="url(#filter5_d_2267_13637)"><rect x="184" y="36" width="48" height="48" rx="24" fill="url(#paint2_linear_2267_13637)"/><rect x="184.5" y="36.5" width="47" height="47" rx="23.5" stroke="{{illustration-surface-a30}}"/><path d="M201 58V53.5C201 50 203.7 47 208 47C212.3 47 215 50 215 53.5V58" stroke="{{illustration-surface}}" stroke-width="2.6" stroke-linecap="round"/><rect x="197" y="57" width="22" height="16" rx="4.5" fill="{{illustration-surface}}"/><circle cx="208" cy="64.5" r="2.5" fill="{{illustration-brand-deep}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="0" y="0" width="236" height="236" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="26" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="66" y="50" width="196" height="196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="18" y="108" width="150" height="150" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_d_2267_13637" x="8.62012" y="53" width="176.723" height="183.842" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="7"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a20}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter4_di_2267_13637" x="51" y="34" width="186" height="208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="13"/><feGaussianBlur stdDeviation="14.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a20}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a20}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><filter id="filter5_d_2267_13637" x="168" y="28" width="80" height="80" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="8"/><feGaussianBlur stdDeviation="8"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-strong-a60}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="144" y1="52" x2="144" y2="200" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a20}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="144" y1="52" x2="144" y2="200" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a30}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient><linearGradient id="paint2_linear_2267_13637" x1="184" y1="60" x2="232" y2="60" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-brand}}"/><stop offset="1" stop-color="{{illustration-brand-deep}}"/></linearGradient></defs></svg>',
|
|
6
6
|
motion: '__S__ [data-part="glow"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow"] { animation: cui-ill-upgrade-glow-t-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow"] { animation: cui-ill-upgrade-glow-t-once 3s linear 1 both; } __S__ [data-part="glow-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-2"] { animation: cui-ill-upgrade-glow-2-t-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-2"] { animation: cui-ill-upgrade-glow-2-t-once 3s linear 1 both; } __S__ [data-part="glow-3"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-3"] { animation: cui-ill-upgrade-glow-3-t-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-3"] { animation: cui-ill-upgrade-glow-3-t-once 3s linear 1 both; } __S__ [data-part="tick"] { transform-box: fill-box; transform-origin: center; stroke-dasharray: 1 1; } __S__[data-play="loop"] [data-part="tick"] { animation: cui-ill-upgrade-tick-d-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="tick"] { animation: cui-ill-upgrade-tick-d-once 3s linear 1 both; } __S__ [data-part="tick-2"] { transform-box: fill-box; transform-origin: center; stroke-dasharray: 1 1; } __S__[data-play="loop"] [data-part="tick-2"] { animation: cui-ill-upgrade-tick-2-d-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="tick-2"] { animation: cui-ill-upgrade-tick-2-d-once 3s linear 1 both; } __S__ [data-part="tick-3"] { transform-box: fill-box; transform-origin: center; stroke-dasharray: 1 1; } __S__[data-play="loop"] [data-part="tick-3"] { animation: cui-ill-upgrade-tick-3-d-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="tick-3"] { animation: cui-ill-upgrade-tick-3-d-once 3s linear 1 both; } __S__ [data-part="tick-4"] { transform-box: fill-box; transform-origin: center; stroke-dasharray: 1 1; } __S__[data-play="loop"] [data-part="tick-4"] { animation: cui-ill-upgrade-tick-4-d-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="tick-4"] { animation: cui-ill-upgrade-tick-4-d-once 3s linear 1 both; } __S__ [data-part="lock-badge"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="lock-badge"] { animation: cui-ill-upgrade-lock-badge-r-loop 3s linear infinite both, cui-ill-upgrade-lock-badge-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="lock-badge"] { animation: cui-ill-upgrade-lock-badge-r-once 3s linear 1 both, cui-ill-upgrade-lock-badge-s-once 3s linear 1 both; } @keyframes cui-ill-upgrade-glow-t-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-upgrade-glow-t-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-upgrade-glow-2-t-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-upgrade-glow-2-t-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-upgrade-glow-3-t-loop { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-upgrade-glow-3-t-once { 0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; } 50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; } 75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; } 100% { translate: 0px 0px; } } @keyframes cui-ill-upgrade-tick-d-loop { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 10% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 20% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes cui-ill-upgrade-tick-d-once { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 10% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 20% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes cui-ill-upgrade-tick-2-d-loop { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 18.333% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 28.333% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes cui-ill-upgrade-tick-2-d-once { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 18.333% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 28.333% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes cui-ill-upgrade-tick-3-d-loop { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 26.667% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 36.667% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes cui-ill-upgrade-tick-3-d-once { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 26.667% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 36.667% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes cui-ill-upgrade-tick-4-d-loop { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 35% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 45% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } @keyframes cui-ill-upgrade-tick-4-d-once { 0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; } 35% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; } 45% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 90% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes cui-ill-upgrade-lock-badge-r-loop { 0% { animation-timing-function: steps(1, end); rotate: 20deg; } 13.333% { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); rotate: 20deg; } 30% { animation-timing-function: steps(1, end); rotate: 0deg; } 100% { rotate: 0deg; } } @keyframes cui-ill-upgrade-lock-badge-r-once { 0% { animation-timing-function: steps(1, end); rotate: 20deg; } 13.333% { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); rotate: 20deg; } 30% { animation-timing-function: steps(1, end); rotate: 0deg; } 100% { rotate: 0deg; } } @keyframes cui-ill-upgrade-lock-badge-s-loop { 0% { animation-timing-function: steps(1, end); scale: 0.6 0.6; } 13.333% { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); scale: 0.6 0.6; } 30% { animation-timing-function: steps(1, end); scale: 1 1; } 90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); scale: 1 1; } 100% { scale: 0.6 0.6; } } @keyframes cui-ill-upgrade-lock-badge-s-once { 0% { animation-timing-function: steps(1, end); scale: 0.6 0.6; } 13.333% { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); scale: 0.6 0.6; } 30% { animation-timing-function: steps(1, end); scale: 1 1; } 90% { animation-timing-function: steps(1, end); scale: 1 1; } 100% { scale: 1 1; } }'
|
|
7
7
|
};
|