feat: add wallet onboarding icons and additional colors

Author: tomislavhoracek

src/design-system/text/text.css.ts

@@ -40,11 +40,17 @@ export const typography = recipe({
     color: {
       primary: sx({ color: '$text_primary' }),
       secondary: sx({ color: '$text_secondary' }),
+      grey: sx({ color: '$text_grey' }),
       accent: sx({ color: '$text_accent' }),
       highlight: sx({ color: '$data_blue' }),
       success: sx({ color: '$data_green' }),
       error: sx({ color: '$data_pink' }),
       warning: sx({ color: '$data_orange' }),
+      laceGradient: sx({
+        backgroundImage: '$text_gradient',
+        WebkitBackgroundClip: 'text',
+        WebkitTextFillColor: 'transparent',
+      }),
     },
   },
 });

src/design-tokens/colors.data.ts

@@ -172,6 +172,8 @@ export const colors = {
   $text_secondary: '',
   $text_on_gradient: '',
   $text_accent: '',
+  $text_grey: '',
+  $text_gradient: '',
 
   $metadata_secondary_label_color: '',
 

src/design-tokens/spacing.data.ts

@@ -28,7 +28,9 @@ export const spacing = {
   $116: '116px',
   $120: '120px',
   $148: '148px',
+  $160: '160px',
   $214: '214px',
+  $235: '235px',
   $294: '294px',
   $312: '312px',
   $336: '336px',

src/design-tokens/sx.css.ts

@@ -105,6 +105,8 @@ const colorProperties = defineProperties({
     borderImageSource: vars.colors,
     backgroundImage: vars.colors,
     backgroundColor: vars.colors,
+    WebkitBackgroundClip: ['text'],
+    WebkitTextFillColor: ['transparent'],
   },
 });
 

src/design-tokens/theme/dark-theme.css.ts

@@ -244,6 +244,8 @@ const colors: Colors = {
   $text_secondary: darkColorScheme.$primary_light_grey,
   $text_on_gradient: darkColorScheme.$primary_white,
   $text_accent: darkColorScheme.$primary_accent_purple,
+  $text_grey: darkColorScheme.$primary_grey,
+  $text_gradient: laceGradient,
 
   $metadata_secondary_label_color: darkColorScheme.$primary_light_grey,
 

src/design-tokens/theme/light-theme.css.ts

@@ -265,6 +265,8 @@ const colors: Colors = {
   $text_secondary: lightColorScheme.$primary_dark_grey,
   $text_on_gradient: lightColorScheme.$primary_white,
   $text_accent: lightColorScheme.$primary_accent_purple,
+  $text_grey: lightColorScheme.$primary_grey,
+  $text_gradient: laceGradient,
 
   $metadata_secondary_label_color: lightColorScheme.$primary_dark_grey,
 

src/icons/LockIconGradientComponent.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgLockIconGradientcomponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={29}
+    height={32}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="url(#lock-icon-gradient_component_svg__a)"
+      strokeLinecap="round"
+      strokeWidth={2}
+      d="M7.833 14.333V7.667a6.667 6.667 0 1 1 13.334 0M14.5 21v3.333M4.5 31h20a3.333 3.333 0 0 0 3.333-3.333v-10a3.333 3.333 0 0 0-3.333-3.334h-20a3.333 3.333 0 0 0-3.333 3.334v10A3.333 3.333 0 0 0 4.5 31Z"
+    />
+    <defs>
+      <linearGradient
+        id="lock-icon-gradient_component_svg__a"
+        x1={-3.713}
+        x2={35.401}
+        y1={-4.489}
+        y2={-1.925}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FF92DE" />
+        <stop offset={1} stopColor="#FDC300" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default SvgLockIconGradientcomponent;

src/icons/PlusIconGradientComponent.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgPlusIconGradientcomponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={29}
+    height={30}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="url(#plus-icon-gradient_component_svg__a)"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M14.5 1.667v26.666M27.833 15H1.167"
+    />
+    <defs>
+      <linearGradient
+        id="plus-icon-gradient_component_svg__a"
+        x1={-3.713}
+        x2={35.357}
+        y1={-3.213}
+        y2={-0.331}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FF92DE" />
+        <stop offset={1} stopColor="#FDC300" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+export default SvgPlusIconGradientcomponent;

src/icons/index.ts

@@ -41,13 +41,15 @@ export { default as LightBulbGradientComponent } from './LightBulbGradientCompon
 export { default as LoaderDarkGradientComponent } from './LoaderDarkGradientComponent';
 export { default as LoaderLightGradientComponent } from './LoaderLightGradientComponent';
 export { default as LoadingComponent } from './LoadingComponent';
+export { default as LockIconGradientComponent } from './LockIconGradientComponent';
 export { default as MnemonicComponent } from './MnemonicComponent';
 export { default as NewspaperGradientComponent } from './NewspaperGradientComponent';
 export { default as PaperwalletComponent } from './PaperwalletComponent';
 export { default as PencilOutlineComponent } from './PencilOutlineComponent';
 export { default as PlainCircleComponent } from './PlainCircleComponent';
 export { default as PlusCircleGradientComponent } from './PlusCircleGradientComponent';
 export { default as PlusCircleComponent } from './PlusCircleComponent';
+export { default as PlusIconGradientComponent } from './PlusIconGradientComponent';
 export { default as PlusSmallComponent } from './PlusSmallComponent';
 export { default as PrinterComponent } from './PrinterComponent';
 export { default as QrcodeComponent } from './QrcodeComponent';