diff --git a/apps/gallery-new/stories/components/wui-icon.stories.ts b/apps/gallery-new/stories/components/wui-icon.stories.ts index 45b20f4ede..cd8eb5eb88 100644 --- a/apps/gallery-new/stories/components/wui-icon.stories.ts +++ b/apps/gallery-new/stories/components/wui-icon.stories.ts @@ -30,6 +30,5 @@ export default { } as Component export const Default: Component = { - render: args => - html`` + render: args => html`` } diff --git a/apps/gallery-new/stories/composites/wui-icon-box.stories.ts b/apps/gallery-new/stories/composites/wui-icon-box.stories.ts index 55ae5f1e9a..bb7359c87c 100644 --- a/apps/gallery-new/stories/composites/wui-icon-box.stories.ts +++ b/apps/gallery-new/stories/composites/wui-icon-box.stories.ts @@ -3,55 +3,34 @@ import '@reown/appkit-ui-new/src/composites/wui-icon-box' import type { WuiIconBox } from '@reown/appkit-ui-new/src/composites/wui-icon-box' import { html } from 'lit' -import { - backgroundOptions, - colorOptions, - iconBoxBorderOptions, - iconOptions -} from '../../utils/PresetUtils' +import { backgroundColorOptions, iconColorOptions, iconOptions } from '../../utils/PresetUtils' type Component = Meta export default { title: 'Composites/wui-icon-box', args: { - size: 'md', - backgroundColor: 'accent-100', - iconColor: 'accent-100', - icon: 'copy', - background: 'transparent', - border: false, - borderColor: undefined + iconColor: 'inverse', + iconSize: 'xl', + backgroundColor: 'foregroundSecondary', + icon: 'qrCode' }, - argTypes: { - size: { - defaultValue: 'md', - options: ['sm', 'md', 'lg', 'xl'], + iconColor: { + options: iconColorOptions, control: { type: 'select' } }, - backgroundColor: { - options: colorOptions, + iconSize: { + options: ['xl', 'md', 'sm', 'xs'], control: { type: 'select' } }, - iconColor: { - options: colorOptions, + backgroundColor: { + options: backgroundColorOptions, control: { type: 'select' } }, icon: { options: iconOptions, control: { type: 'select' } - }, - background: { - options: backgroundOptions, - control: { type: 'select' } - }, - border: { - control: { type: 'boolean' } - }, - borderColor: { - options: iconBoxBorderOptions, - control: { type: 'select' } } } } as Component @@ -59,12 +38,9 @@ export default { export const Default: Component = { render: args => html`` } diff --git a/apps/gallery-new/stories/composites/wui-list-select-wallet.stories.ts b/apps/gallery-new/stories/composites/wui-list-select-wallet.stories.ts new file mode 100644 index 0000000000..18a5ca4ef4 --- /dev/null +++ b/apps/gallery-new/stories/composites/wui-list-select-wallet.stories.ts @@ -0,0 +1,54 @@ +import type { Meta } from '@storybook/web-components' +import '@reown/appkit-ui-new/src/composites/wui-list-select-wallet' +import type { WuiListSelectWallet } from '@reown/appkit-ui-new/src/composites/wui-list-select-wallet' +import { html } from 'lit' +import '../../components/gallery-container' +import { walletImagesOptions } from '../../utils/PresetUtils' + +type Component = Meta + +export default { + title: 'Composites/wui-list-select-wallet', + args: { + imageSrc: walletImagesOptions[0]?.src, + name: 'MetaMask', + tagLabel: 'LABEL', + qrCode: false, + allWallets: false, + disabled: false + }, + argTypes: { + imageSrc: { + control: { type: 'text' } + }, + name: { + control: { type: 'text' } + }, + tagLabel: { + control: { type: 'text' } + }, + qrCode: { + control: { type: 'boolean' } + }, + allWallets: { + control: { type: 'boolean' } + }, + disabled: { + control: { type: 'boolean' } + } + } +} as Component + +export const Default: Component = { + render: args => + html` + + ` +} diff --git a/apps/gallery-new/stories/composites/wui-list-wallet.stories.ts b/apps/gallery-new/stories/composites/wui-list-wallet.stories.ts deleted file mode 100644 index 9c2e725088..0000000000 --- a/apps/gallery-new/stories/composites/wui-list-wallet.stories.ts +++ /dev/null @@ -1,60 +0,0 @@ -import type { Meta } from '@storybook/web-components' -import '@reown/appkit-ui-new/src/composites/wui-list-wallet' -import type { WuiListWallet } from '@reown/appkit-ui-new/src/composites/wui-list-wallet' -import { html } from 'lit' -import '../../components/gallery-container' -import { - iconOptions, - tagLabelOptions, - tagOptions, - walletImagesOptions -} from '../../utils/PresetUtils' - -type Component = Meta - -export default { - title: 'Composites/wui-list-wallet', - args: { - walletImages: walletImagesOptions, - imageSrc: walletImagesOptions[0]?.src, - name: 'Rainbow', - showAllWallets: false, - disabled: false, - tagLabel: 'qr code', - tagVariant: 'main', - icon: undefined - }, - argTypes: { - showAllWallets: { - control: { type: 'boolean' } - }, - tagLabel: { - options: [undefined, ...tagLabelOptions], - control: { type: 'select' } - }, - tagVariant: { - options: [undefined, ...tagOptions], - control: { type: 'select' } - }, - icon: { - options: [undefined, ...iconOptions], - control: { type: 'select' } - } - } -} as Component - -export const Default: Component = { - render: args => - html` - - ` -} diff --git a/apps/gallery-new/utils/PresetUtils.ts b/apps/gallery-new/utils/PresetUtils.ts index 50abca60a8..20fd11851a 100644 --- a/apps/gallery-new/utils/PresetUtils.ts +++ b/apps/gallery-new/utils/PresetUtils.ts @@ -42,7 +42,12 @@ export const textColorOptions: TextColorType[] = [ 'accent-primary' ] -export const colorOptions = [] +export const iconColorOptions = ['accent', 'inverse'] + +// @TODO: Deprecate this +export const colorOptions = iconColorOptions + +export const backgroundColorOptions = ['foregroundSecondary', 'foregroundAccent010'] export const textOptions: TextType[] = [ 'h1-regular-mono', @@ -125,6 +130,10 @@ export const gridContentOptions: GridContentType[] = [ ] export const walletImagesOptions = [ + { + src: 'https://explorer-api.walletconnect.org/v3/logo/md/018b2d52-10e9-4158-1fde-a5d5bac5aa00?projectId=c1781fc385454899a2b1385a2b83df3b', + walletName: 'MetaMask' + }, { src: 'https://explorer-api.walletconnect.com/w3m/v1/getWalletImage/7a33d7f1-3d12-4b5c-f3ee-5cd83cb1b500?projectId=c1781fc385454899a2b1385a2b83df3b', walletName: 'Rainbow' @@ -340,8 +349,6 @@ export const iconBoxBorderOptions: IconBoxBorderType[] = [ 'wui-accent-glass-010' ] -export const tagLabelOptions = ['get wallet', 'installed', 'qr code', 'recent'] - export const signTypedData = { domain: { name: 'Ether Mail', diff --git a/packages/ui-new/index.ts b/packages/ui-new/index.ts index 5cb29d2d5e..172805ca20 100644 --- a/packages/ui-new/index.ts +++ b/packages/ui-new/index.ts @@ -35,7 +35,7 @@ export * from './src/composites/wui-link/index.js' export * from './src/composites/wui-list-item/index.js' export * from './src/composites/wui-transaction-list-item/index.js' export * from './src/composites/wui-transaction-list-item-loader/index.js' -export * from './src/composites/wui-list-wallet/index.js' +export * from './src/composites/wui-list-select-wallet/index.js' export * from './src/composites/wui-logo-select/index.js' export * from './src/composites/wui-logo/index.js' export * from './src/composites/wui-network-button/index.js' diff --git a/packages/ui-new/src/assets/svg/all-wallets.ts b/packages/ui-new/src/assets/svg/all-wallets.ts index e32b164165..5a224d3c0d 100644 --- a/packages/ui-new/src/assets/svg/all-wallets.ts +++ b/packages/ui-new/src/assets/svg/all-wallets.ts @@ -1,8 +1,5 @@ import { svg } from 'lit' -export const allWalletsSvg = svg` - +export const allWalletsSvg = svg` + ` diff --git a/packages/ui-new/src/assets/svg/qr-code.ts b/packages/ui-new/src/assets/svg/qr-code.ts index 8aacd1d657..95e09ab4bd 100644 --- a/packages/ui-new/src/assets/svg/qr-code.ts +++ b/packages/ui-new/src/assets/svg/qr-code.ts @@ -1,8 +1,6 @@ import { svg } from 'lit' -export const qrCodeIcon = svg` - -` +export const qrCodeIcon = svg` + + +` diff --git a/packages/ui-new/src/components/wui-text/index.ts b/packages/ui-new/src/components/wui-text/index.ts index bd2f19929b..f6adc22fef 100644 --- a/packages/ui-new/src/components/wui-text/index.ts +++ b/packages/ui-new/src/components/wui-text/index.ts @@ -9,7 +9,7 @@ import { vars } from '../../utils/ThemeHelperUtil.js' // -- Constants ------------------------------------------ // -const TEXT_VARS_BY_COLOR = { +export const TEXT_VARS_BY_COLOR = { /* Colors */ primary: vars.tokens.theme.textPrimary, secondary: vars.tokens.theme.textSecondary, diff --git a/packages/ui-new/src/composites/wui-button/styles.ts b/packages/ui-new/src/composites/wui-button/styles.ts index 0284109b31..d140eaa97a 100644 --- a/packages/ui-new/src/composites/wui-button/styles.ts +++ b/packages/ui-new/src/composites/wui-button/styles.ts @@ -72,4 +72,9 @@ export default css` button:active:enabled { border-radius: ${({ borderRadius }) => borderRadius[128]}; } + + /* -- Disabled states --------------------------------------------------- */ + button:disabled { + opacity: 0.3; + } ` diff --git a/packages/ui-new/src/composites/wui-icon-box/index.ts b/packages/ui-new/src/composites/wui-icon-box/index.ts index d75e37a309..e63d287f69 100644 --- a/packages/ui-new/src/composites/wui-icon-box/index.ts +++ b/packages/ui-new/src/composites/wui-icon-box/index.ts @@ -4,71 +4,51 @@ import { property } from 'lit/decorators.js' import '../../components/wui-icon/index.js' import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' import type { - BackgroundType, - ColorType, - IconBoxBorderType, - IconType, - SizeType + BackgroundColorType, + IconColorType, + IconSizeType, + IconType } from '../../utils/TypeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' import styles from './styles.js' +import { vars } from '../../utils/ThemeHelperUtil.js' + +// -- Constants ------------------------------------------ // + +const BACKGROUND_COLOR = { + foregroundSecondary: vars.tokens.theme.foregroundSecondary, + foregroundAccent010: vars.tokens.core.foregroundAccent010 +} + +// @TODO: move this to component +const ICON_COLOR = { + accent: vars.tokens.core.iconAccentPrimary, + inverse: vars.tokens.theme.iconInverse +} @customElement('wui-icon-box') export class WuiIconBox extends LitElement { public static override styles = [resetStyles, elementStyles, styles] // -- State & Properties -------------------------------- // - @property() public size: SizeType = 'md' - - @property() public backgroundColor: ColorType = 'accent-100' - - @property() public iconColor: ColorType = 'accent-100' - - @property() public iconSize?: Exclude - - @property() public background: BackgroundType = 'transparent' + @property() public icon: IconType = 'copy' - @property({ type: Boolean }) public border? = false + @property() public iconColor: IconColorType = 'inverse' - @property() public borderColor?: IconBoxBorderType = 'wui-color-bg-125' + @property() public iconSize?: Exclude - @property() public icon: IconType = 'copy' + @property() public backgroundColor: BackgroundColorType = 'foregroundSecondary' // -- Render -------------------------------------------- // public override render() { - const iconSize = this.iconSize || this.size - const isLg = this.size === 'lg' - const isXl = this.size === 'xl' - - const bgMix = isLg ? '12%' : '16%' - const borderRadius = isLg ? 'xxs' : isXl ? 's' : '3xl' - const isGray = this.background === 'gray' - const isOpaque = this.background === 'opaque' - const isColorChange = - (this.backgroundColor === 'accent-100' && isOpaque) || - (this.backgroundColor === 'success-100' && isOpaque) || - (this.backgroundColor === 'error-100' && isOpaque) || - (this.backgroundColor === 'inverse-100' && isOpaque) - - let bgValueVariable = `var(--wui-color-${this.backgroundColor})` - - if (isColorChange) { - bgValueVariable = `var(--wui-icon-box-bg-${this.backgroundColor})` - } else if (isGray) { - bgValueVariable = `var(--wui-color-gray-${this.backgroundColor})` - } - this.style.cssText = ` - --local-bg-value: ${bgValueVariable}; - --local-bg-mix: ${isColorChange || isGray ? `100%` : bgMix}; - --local-border-radius: var(--wui-border-radius-${borderRadius}); - --local-size: var(--wui-icon-box-size-${this.size}); - --local-border: ${this.borderColor === 'wui-color-bg-125' ? `2px` : `1px`} solid ${ - this.border ? `var(--${this.borderColor})` : `transparent` - } + --local-bg-color: ${BACKGROUND_COLOR[this.backgroundColor]}; + --local-icon-color: ${ICON_COLOR[this.iconColor]}; ` - return html` ` + return html` + + ` } } diff --git a/packages/ui-new/src/composites/wui-icon-box/styles.ts b/packages/ui-new/src/composites/wui-icon-box/styles.ts index 16bd5457c7..90748ace23 100644 --- a/packages/ui-new/src/composites/wui-icon-box/styles.ts +++ b/packages/ui-new/src/composites/wui-icon-box/styles.ts @@ -1,25 +1,16 @@ -import { css } from 'lit' +import { css } from '../../utils/ThemeHelperUtil.js' export default css` :host { display: inline-flex; justify-content: center; align-items: center; - position: relative; - overflow: hidden; - background-color: var(--wui-color-gray-glass-020); - border-radius: var(--local-border-radius); - border: var(--local-border); - box-sizing: content-box; - width: var(--local-size); - height: var(--local-size); - min-height: var(--local-size); - min-width: var(--local-size); + background-color: var(--local-bg-color); + border-radius: ${({ borderRadius }) => borderRadius[2]}; + padding: ${({ spacing }) => spacing[2]} !important; } - @supports (background: color-mix(in srgb, white 50%, black)) { - :host { - background-color: color-mix(in srgb, var(--local-bg-value) var(--local-bg-mix), transparent); - } + :host > wui-icon { + color: var(--local-icon-color); } ` diff --git a/packages/ui-new/src/composites/wui-list-select-wallet/index.ts b/packages/ui-new/src/composites/wui-list-select-wallet/index.ts new file mode 100644 index 0000000000..df4a8ac398 --- /dev/null +++ b/packages/ui-new/src/composites/wui-list-select-wallet/index.ts @@ -0,0 +1,71 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import '../../components/wui-text/index.js' +import '../../components/wui-image/index.js' +import '../wui-icon-box/index.js' +import '../wui-tag/index.js' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' + +@customElement('wui-list-select-wallet') +export class WuiListSelectWallet extends LitElement { + public static override styles = [resetStyles, elementStyles, styles] + + // -- State & Properties -------------------------------- // + @property() public imageSrc? = '' + + @property() public name = '' + + @property() public tagLabel?: string + + @property({ type: Boolean }) public qrCode = false + + @property({ type: Boolean }) public allWallets = false + + @property({ type: Boolean }) public disabled = false + + // -- Render -------------------------------------------- // + public override render() { + return html` + + ` + } + + // -- Private ------------------------------------------- // + private leftImageTemplate() { + if (this.allWallets) { + return html`` + } + + if (this.qrCode) { + return html`` + } + + if (this.imageSrc) { + return html`` + } + + return null + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-list-select-wallet': WuiListSelectWallet + } +} diff --git a/packages/ui-new/src/composites/wui-list-select-wallet/styles.ts b/packages/ui-new/src/composites/wui-list-select-wallet/styles.ts new file mode 100644 index 0000000000..397790feda --- /dev/null +++ b/packages/ui-new/src/composites/wui-list-select-wallet/styles.ts @@ -0,0 +1,47 @@ +import { css } from '../../utils/ThemeHelperUtil.js' + +export default css` + button { + align-items: center; + column-gap: ${({ spacing }) => spacing[2]}; + padding: ${({ spacing }) => spacing[3]}; + width: 100%; + background-color: ${({ tokens }) => tokens.theme.foregroundPrimary}; + border-radius: ${({ borderRadius }) => borderRadius[4]}; + height: 64px; + } + + button > wui-text { + display: flex; + flex: 1; + word-break: break-all; + } + + button > wui-image { + width: 40px; + height: 40px; + flex-shrink: 0; + border-radius: ${({ borderRadius }) => borderRadius[2]}; + } + + /* -- Focus states --------------------------------------------------- */ + button:focus-visible:enabled, + button:active:enabled { + box-shadow: 0px 0px 0px 4px rgba(9, 136, 240, 0.2); + background-color: ${({ tokens }) => tokens.theme.foregroundSecondary}; + } + + /* -- Hover & Active states ----------------------------------------------------------- */ + button:hover:enabled { + background-color: ${({ tokens }) => tokens.theme.foregroundSecondary}; + } + + /* -- Disabled state --------------------------------------------------- */ + button:disabled { + background-color: ${({ tokens }) => tokens.theme.foregroundSecondary}; + } + + button:disabled > * { + opacity: 0.5; + } +` diff --git a/packages/ui-new/src/composites/wui-list-wallet/index.ts b/packages/ui-new/src/composites/wui-list-wallet/index.ts deleted file mode 100644 index bc0063f263..0000000000 --- a/packages/ui-new/src/composites/wui-list-wallet/index.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { html, LitElement } from 'lit' -import { property } from 'lit/decorators.js' -import '../../components/wui-icon/index.js' -import '../../composites/wui-icon-box/index.js' -import '../../components/wui-text/index.js' -import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' -import type { IconType, IWalletImage, TagType } from '../../utils/TypeUtil.js' -import { customElement } from '../../utils/WebComponentsUtil.js' -import '../wui-all-wallets-image/index.js' -import '../wui-tag/index.js' -import '../wui-wallet-image/index.js' -import styles from './styles.js' -import { ifDefined } from 'lit/directives/if-defined.js' - -@customElement('wui-list-wallet') -export class WuiListWallet extends LitElement { - public static override styles = [resetStyles, elementStyles, styles] - - // -- State & Properties -------------------------------- // - @property({ type: Array }) public walletImages?: IWalletImage[] = [] - - @property() public imageSrc? = '' - - @property() public name = '' - - @property() public tagLabel?: string - - @property() public tagVariant?: TagType - - @property() public icon?: IconType - - @property() public walletIcon?: IconType - - @property() public tabIdx?: number = undefined - - @property({ type: Boolean }) public installed = false - - @property({ type: Boolean }) public disabled = false - - @property({ type: Boolean }) public showAllWallets = false - - // -- Render -------------------------------------------- // - public override render() { - return html` - - ` - } - - // -- Private ------------------------------------------- // - private templateAllWallets() { - if (this.showAllWallets && this.imageSrc) { - return html` ` - } else if (this.showAllWallets && this.walletIcon) { - return html` ` - } - - return null - } - - private templateWalletImage() { - if (!this.showAllWallets && this.imageSrc) { - return html`` - } else if (!this.showAllWallets && !this.imageSrc) { - return html`` - } - - return null - } - - private templateStatus() { - if (this.tagLabel && this.tagVariant) { - return html`${this.tagLabel}` - } else if (this.icon) { - return html`` - } - - return null - } -} - -declare global { - interface HTMLElementTagNameMap { - 'wui-list-wallet': WuiListWallet - } -} diff --git a/packages/ui-new/src/composites/wui-list-wallet/styles.ts b/packages/ui-new/src/composites/wui-list-wallet/styles.ts deleted file mode 100644 index fdfbf6fe41..0000000000 --- a/packages/ui-new/src/composites/wui-list-wallet/styles.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { css } from 'lit' - -export default css` - button { - column-gap: var(--wui-spacing-s); - padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs); - width: 100%; - background-color: var(--wui-color-gray-glass-002); - border-radius: var(--wui-border-radius-xs); - color: var(--wui-color-fg-100); - } - - button > wui-text:nth-child(2) { - display: flex; - flex: 1; - } - - button:disabled { - background-color: var(--wui-color-gray-glass-015); - color: var(--wui-color-gray-glass-015); - } - - button:disabled > wui-tag { - background-color: var(--wui-color-gray-glass-010); - color: var(--wui-color-fg-300); - } - - wui-icon { - color: var(--wui-color-fg-200) !important; - } -` diff --git a/packages/ui-new/src/composites/wui-tag/index.ts b/packages/ui-new/src/composites/wui-tag/index.ts index b721ccaac2..4d30a0193e 100644 --- a/packages/ui-new/src/composites/wui-tag/index.ts +++ b/packages/ui-new/src/composites/wui-tag/index.ts @@ -1,6 +1,7 @@ import { html, LitElement } from 'lit' import { property } from 'lit/decorators.js' import '../../components/wui-text/index.js' +import '../../components/wui-icon/index.js' import { resetStyles } from '../../utils/ThemeUtil.js' import type { TagVariant, TagSize, IconType } from '../../utils/TypeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' diff --git a/packages/ui-new/src/utils/JSXTypeUtil.ts b/packages/ui-new/src/utils/JSXTypeUtil.ts index 799bc64778..e13979cf50 100644 --- a/packages/ui-new/src/utils/JSXTypeUtil.ts +++ b/packages/ui-new/src/utils/JSXTypeUtil.ts @@ -41,7 +41,7 @@ import type { WuiListItem } from '../composites/wui-list-item/index.js' import type { WuiListNetwork } from '../composites/wui-list-network/index.js' import type { WuiListToken } from '../composites/wui-list-token/index.js' import type { WuiListSocial } from '../composites/wui-list-social/index.js' -import type { WuiListWallet } from '../composites/wui-list-wallet/index.js' +import type { WuiListSelectWallet } from '../composites/wui-list-select-wallet/index.js' import type { WuiLogo } from '../composites/wui-logo/index.js' import type { WuiLogoSelect } from '../composites/wui-logo-select/index.js' import type { WuiNetworkButton } from '../composites/wui-network-button/index.js' @@ -127,7 +127,7 @@ declare global { 'wui-list-social': CustomElement 'wui-list-token': CustomElement 'wui-list-wallet-transaction': CustomElement - 'wui-list-wallet': CustomElement + 'wui-list-wallet': CustomElement 'wui-logo-select': CustomElement 'wui-logo': CustomElement 'wui-network-button': CustomElement diff --git a/packages/ui-new/src/utils/ThemeConstantsUtil.ts b/packages/ui-new/src/utils/ThemeConstantsUtil.ts index 4accf1d677..c485dc790e 100644 --- a/packages/ui-new/src/utils/ThemeConstantsUtil.ts +++ b/packages/ui-new/src/utils/ThemeConstantsUtil.ts @@ -150,9 +150,9 @@ export const tokens = { borderSecondary: '#4F4F4F', /* Foreground colors */ - foregroundPrimary: '#2A2A2A', - foregroundSecondary: '#363636', - foregroundTertiary: '#4F4F4F', + foregroundPrimary: '#252525', + foregroundSecondary: '#2A2A2A', + foregroundTertiary: '#363636', /* Icon colors */ iconDefault: '#9A9A9A', diff --git a/packages/ui-new/src/utils/ThemeUtil.ts b/packages/ui-new/src/utils/ThemeUtil.ts index 146bd150d7..0d0fac458c 100644 --- a/packages/ui-new/src/utils/ThemeUtil.ts +++ b/packages/ui-new/src/utils/ThemeUtil.ts @@ -805,10 +805,16 @@ function createRootStyles(themeVariables?: ThemeVariables) { // -- Presets ----------------------------------------------------------------- export const resetStyles = css` - *, + div, + span, + iframe, + a, + img, + form, + button, + label, *::after, - *::before, - :host { + *::before { margin: 0; padding: 0; box-sizing: border-box; @@ -818,6 +824,9 @@ export const resetStyles = css` -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; backface-visibility: hidden; + } + + :host { font-family: var(--wui-font-family); } ` @@ -841,17 +850,7 @@ export const elementStyles = css` text-decoration: none; } - button:disabled > wui-wallet-image, - button:disabled > wui-all-wallets-image, - button:disabled > wui-network-image, - button:disabled > wui-image, - button:disabled > wui-transaction-visual, - button:disabled > wui-logo { - filter: grayscale(1); - } - button:disabled { - opacity: 0.3; cursor: default; } diff --git a/packages/ui-new/src/utils/TypeUtil.ts b/packages/ui-new/src/utils/TypeUtil.ts index 3569f3ce30..c14b24b383 100644 --- a/packages/ui-new/src/utils/TypeUtil.ts +++ b/packages/ui-new/src/utils/TypeUtil.ts @@ -1,5 +1,9 @@ export type ColorType = string +export type BackgroundColorType = 'foregroundSecondary' | 'foregroundAccent010' + +export type IconColorType = 'inverse' + export type TextColorType = | 'inherit' | 'primary' @@ -47,6 +51,9 @@ export type LineClamp = '1' | '2' export type SizeType = 'inherit' | 'xl' | 'lg' | 'md' | 'mdl' | 'sm' | 'xs' | 'xxs' | 'xxl' +// @TODO: Remove these sizes after completing component +export type IconSizeType = 'inherit' | 'xl' | 'lg' | 'md' | 'mdl' | 'sm' | 'xs' | 'xxs' | 'xxl' + export type SpacingType = | '0' | '1xs'