diff --git a/src/design-system/text/text.css.ts b/src/design-system/text/text.css.ts index 9e95d3f..09ff59e 100644 --- a/src/design-system/text/text.css.ts +++ b/src/design-system/text/text.css.ts @@ -45,6 +45,11 @@ export const typography = recipe({ success: sx({ color: '$data_green' }), error: sx({ color: '$data_pink' }), warning: sx({ color: '$data_orange' }), + laceGradient: sx({ + backgroundImage: '$text_gradient', + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent', + }), }, }, }); diff --git a/src/design-tokens/colors.data.ts b/src/design-tokens/colors.data.ts index 9bd12d3..554049b 100644 --- a/src/design-tokens/colors.data.ts +++ b/src/design-tokens/colors.data.ts @@ -172,6 +172,7 @@ export const colors = { $text_secondary: '', $text_on_gradient: '', $text_accent: '', + $text_gradient: '', $metadata_secondary_label_color: '', diff --git a/src/design-tokens/sx.css.ts b/src/design-tokens/sx.css.ts index 288b652..a4044f2 100644 --- a/src/design-tokens/sx.css.ts +++ b/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'], }, }); diff --git a/src/design-tokens/theme/dark-theme.css.ts b/src/design-tokens/theme/dark-theme.css.ts index 5e57874..38d3061 100644 --- a/src/design-tokens/theme/dark-theme.css.ts +++ b/src/design-tokens/theme/dark-theme.css.ts @@ -244,6 +244,7 @@ const colors: Colors = { $text_secondary: darkColorScheme.$primary_light_grey, $text_on_gradient: darkColorScheme.$primary_white, $text_accent: darkColorScheme.$primary_accent_purple, + $text_gradient: laceGradient, $metadata_secondary_label_color: darkColorScheme.$primary_light_grey, diff --git a/src/design-tokens/theme/light-theme.css.ts b/src/design-tokens/theme/light-theme.css.ts index 9403375..0ed7555 100644 --- a/src/design-tokens/theme/light-theme.css.ts +++ b/src/design-tokens/theme/light-theme.css.ts @@ -265,6 +265,7 @@ const colors: Colors = { $text_secondary: lightColorScheme.$primary_dark_grey, $text_on_gradient: lightColorScheme.$primary_white, $text_accent: lightColorScheme.$primary_accent_purple, + $text_gradient: laceGradient, $metadata_secondary_label_color: lightColorScheme.$primary_dark_grey, diff --git a/src/icons/LockIconGradientComponent.tsx b/src/icons/LockIconGradientComponent.tsx new file mode 100644 index 0000000..82cdab8 --- /dev/null +++ b/src/icons/LockIconGradientComponent.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgLockIconGradientcomponent = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgLockIconGradientcomponent; diff --git a/src/icons/PlusIconGradientComponent.tsx b/src/icons/PlusIconGradientComponent.tsx new file mode 100644 index 0000000..611ed9f --- /dev/null +++ b/src/icons/PlusIconGradientComponent.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import type { SVGProps } from 'react'; +const SvgPlusIconGradientcomponent = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgPlusIconGradientcomponent; diff --git a/src/icons/index.ts b/src/icons/index.ts index 5b4c4d0..00a1ec4 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -41,6 +41,7 @@ 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'; @@ -49,6 +50,7 @@ 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'; diff --git a/src/icons/raw/lock-icon-gradient.component.svg b/src/icons/raw/lock-icon-gradient.component.svg new file mode 100644 index 0000000..3565471 --- /dev/null +++ b/src/icons/raw/lock-icon-gradient.component.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/icons/raw/plus-icon-gradient.component.svg b/src/icons/raw/plus-icon-gradient.component.svg new file mode 100644 index 0000000..23d4f4d --- /dev/null +++ b/src/icons/raw/plus-icon-gradient.component.svg @@ -0,0 +1,9 @@ + + + + + + + + +