From 4d7ffcb1518a69426fee47de53e6eed011d61e09 Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 20 Nov 2024 12:28:18 +0000 Subject: [PATCH 1/9] feat: list select account --- .../wui-list-select-account.stories.ts | 56 +++++++++++++++ .../src/composites/wui-avatar/styles.ts | 33 --------- .../wui-list-select-account/index.ts | 72 +++++++++++++++++++ .../wui-list-select-account/styles.ts | 48 +++++++++++++ packages/ui-new/src/layout/wui-flex/index.ts | 7 +- packages/ui-new/src/utils/TypeUtil.ts | 20 +----- 6 files changed, 183 insertions(+), 53 deletions(-) create mode 100644 apps/gallery-new/stories/composites/wui-list-select-account.stories.ts create mode 100644 packages/ui-new/src/composites/wui-list-select-account/index.ts create mode 100644 packages/ui-new/src/composites/wui-list-select-account/styles.ts diff --git a/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts b/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts new file mode 100644 index 0000000000..5853a382b7 --- /dev/null +++ b/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts @@ -0,0 +1,56 @@ + import { html } from 'lit' +import type { Meta } from '@storybook/web-components' +import '@reown/appkit-ui-new/src/composites/wui-list-select-account' +import '../../components/gallery-container' +import type { WuiListSelectAccount } from '@reown/appkit-ui-new' +import { iconOptions } from '../../utils/PresetUtils' + +type Component = Meta + +export default { + title: 'Composites/wui-list-select-account', + args: { + dollars: '1740', + pennies: '72', + address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', + description: 'Email', + icon: 'mail', + disabled: false + }, + transparent: { + dollars: { + control: { type: 'text' } + }, + pennies: { + control: { type: 'text' } + }, + address: { + control: { type: 'text' } + }, + description: { + control: { type: 'text' } + }, + icon: { + options: iconOptions, + control: { type: 'select' } + }, + disabled: { + control: { type: 'boolean' } + } + } +} as Component + +export const Default: Component = { + render: args => html` + + + + ` +} diff --git a/packages/ui-new/src/composites/wui-avatar/styles.ts b/packages/ui-new/src/composites/wui-avatar/styles.ts index 01e46cec93..4bb6764c03 100644 --- a/packages/ui-new/src/composites/wui-avatar/styles.ts +++ b/packages/ui-new/src/composites/wui-avatar/styles.ts @@ -6,7 +6,6 @@ export default css` width: var(--local-width); height: var(--local-height); border-radius: var(--wui-border-radius-3xl); - box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005); overflow: hidden; position: relative; } @@ -19,38 +18,7 @@ export default css` --mixed-local-color-5: var(--local-color-5); } - @supports (background: color-mix(in srgb, white 50%, black)) { - :host([data-variant='generated']) { - --mixed-local-color-1: color-mix( - in srgb, - var(--w3m-color-mix) var(--w3m-color-mix-strength), - var(--local-color-1) - ); - --mixed-local-color-2: color-mix( - in srgb, - var(--w3m-color-mix) var(--w3m-color-mix-strength), - var(--local-color-2) - ); - --mixed-local-color-3: color-mix( - in srgb, - var(--w3m-color-mix) var(--w3m-color-mix-strength), - var(--local-color-3) - ); - --mixed-local-color-4: color-mix( - in srgb, - var(--w3m-color-mix) var(--w3m-color-mix-strength), - var(--local-color-4) - ); - --mixed-local-color-5: color-mix( - in srgb, - var(--w3m-color-mix) var(--w3m-color-mix-strength), - var(--local-color-5) - ); - } - } - :host([data-variant='generated']) { - box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005); background: radial-gradient( var(--local-radial-circle), #fff 0.52%, @@ -63,7 +31,6 @@ export default css` } :host([data-variant='default']) { - box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005); background: radial-gradient( 75.29% 75.29% at 64.96% 24.36%, #fff 0.52%, diff --git a/packages/ui-new/src/composites/wui-list-select-account/index.ts b/packages/ui-new/src/composites/wui-list-select-account/index.ts new file mode 100644 index 0000000000..bf7929536f --- /dev/null +++ b/packages/ui-new/src/composites/wui-list-select-account/index.ts @@ -0,0 +1,72 @@ +import { html, LitElement } from 'lit' +import { property } from 'lit/decorators.js' +import { customElement } from '../../utils/WebComponentsUtil.js' +import styles from './styles.js' +import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' +import '../../components/wui-text/index.js' +import '../../components/wui-icon/index.js' +import '../wui-avatar/index.js' +import '../wui-icon-box/index.js' +import { UiHelperUtil } from '../../utils/UiHelperUtil.js' +import type { IconType } from '../../utils/TypeUtil.js' + +@customElement('wui-list-select-account') +export class WuiListSelectAccount extends LitElement { + public static override styles = [resetStyles, elementStyles, styles] + + // -- State & Properties -------------------------------- // + @property() dollars = '0' + + @property() pennies = '00' + + @property() address = '' + + @property() description = 'Email' + + @property() icon: IconType = 'mail' + + @property({ type: Boolean }) public disabled = false + + // -- Render -------------------------------------------- // + public override render() { + return html` + + ` + } +} + +declare global { + interface HTMLElementTagNameMap { + 'wui-list-select-account': WuiListSelectAccount + } +} diff --git a/packages/ui-new/src/composites/wui-list-select-account/styles.ts b/packages/ui-new/src/composites/wui-list-select-account/styles.ts new file mode 100644 index 0000000000..a68e1d57b5 --- /dev/null +++ b/packages/ui-new/src/composites/wui-list-select-account/styles.ts @@ -0,0 +1,48 @@ +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: transparent; + border-radius: ${({ borderRadius }) => borderRadius[4]}; + height: 64px; + } + + wui-avatar { + height: 40px; + width: 40px; + flex-shrink: 0; + } + + wui-icon-box { + position: relative; + right: 15px; + top: 15px; + border: 2px solid ${({ tokens }) => tokens.theme.backgroundPrimary}; + } + + wui-flex:nth-child(1) { + flex: 1; + } + + /* -- Focus states --------------------------------------------------- */ + button:focus-visible:enabled, + button:active:enabled { + background-color: ${({ tokens }) => tokens.theme.foregroundPrimary}; + box-shadow: 0px 0px 0px 4px rgba(9, 136, 240, 0.2); + } + + /* -- Hover & Active states ----------------------------------------------------------- */ + button:hover:enabled { + background-color: ${({ tokens }) => tokens.theme.foregroundPrimary}; + } + + /* -- Disabled state --------------------------------------------------- */ + button:disabled { + opacity: 0.5 !important; + background-color: transparent; + } +` diff --git a/packages/ui-new/src/layout/wui-flex/index.ts b/packages/ui-new/src/layout/wui-flex/index.ts index 31cde0e22a..a597dd1476 100644 --- a/packages/ui-new/src/layout/wui-flex/index.ts +++ b/packages/ui-new/src/layout/wui-flex/index.ts @@ -14,6 +14,7 @@ import type { import { UiHelperUtil } from '../../utils/UiHelperUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' import styles from './styles.js' +import { vars } from '../../utils/ThemeHelperUtil.js' @customElement('wui-flex') export class WuiFlex extends LitElement { @@ -54,9 +55,9 @@ export class WuiFlex extends LitElement { flex-shrink: ${this.flexShrink}; align-items: ${this.alignItems}; justify-content: ${this.justifyContent}; - column-gap: ${this.columnGap && `var(--wui-spacing-${this.columnGap})`}; - row-gap: ${this.rowGap && `var(--wui-spacing-${this.rowGap})`}; - gap: ${this.gap && `var(--wui-spacing-${this.gap})`}; + column-gap: ${this.columnGap && vars.spacing[this.columnGap]}; + row-gap: ${this.rowGap && vars.spacing[this.rowGap]}; + gap: ${this.gap && vars.spacing[this.gap]}; padding-top: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 0)}; padding-right: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 1)}; padding-bottom: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 2)}; diff --git a/packages/ui-new/src/utils/TypeUtil.ts b/packages/ui-new/src/utils/TypeUtil.ts index 3569f3ce30..2c04cf2f9b 100644 --- a/packages/ui-new/src/utils/TypeUtil.ts +++ b/packages/ui-new/src/utils/TypeUtil.ts @@ -1,3 +1,5 @@ +import type { vars } from './ThemeHelperUtil.js' + export type ColorType = string export type TextColorType = @@ -47,23 +49,7 @@ export type LineClamp = '1' | '2' export type SizeType = 'inherit' | 'xl' | 'lg' | 'md' | 'mdl' | 'sm' | 'xs' | 'xxs' | 'xxl' -export type SpacingType = - | '0' - | '1xs' - | '2xl' - | '3xl' - | '4xl' - | '5xl' - | '3xs' - | '4xs' - | 'l' - | '2l' - | 'm' - | 's' - | 'xl' - | 'xs' - | 'xxl' - | 'xxs' +export type SpacingType = keyof typeof vars.spacing export type BorderRadiusType = Exclude | 'xs' From e9982a7f9a9a59202307f77eb726a03331a70d1a Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 20 Nov 2024 14:40:21 +0000 Subject: [PATCH 2/9] chore: remove --- .../composites/wui-list-address.stories.ts | 28 ---- packages/ui-new/index.ts | 1 - .../src/components/wui-shimmer/index.ts | 2 +- .../ui-new/src/composites/wui-button/index.ts | 4 +- .../src/composites/wui-list-account/index.ts | 138 ------------------ .../src/composites/wui-list-account/styles.ts | 44 ------ .../src/composites/wui-wallet-image/index.ts | 8 +- packages/ui-new/src/utils/JSXTypeUtil.ts | 2 - 8 files changed, 6 insertions(+), 221 deletions(-) delete mode 100644 apps/gallery-new/stories/composites/wui-list-address.stories.ts delete mode 100644 packages/ui-new/src/composites/wui-list-account/index.ts delete mode 100644 packages/ui-new/src/composites/wui-list-account/styles.ts diff --git a/apps/gallery-new/stories/composites/wui-list-address.stories.ts b/apps/gallery-new/stories/composites/wui-list-address.stories.ts deleted file mode 100644 index 4c3de91a18..0000000000 --- a/apps/gallery-new/stories/composites/wui-list-address.stories.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { Meta } from '@storybook/web-components' -import '@reown/appkit-ui-new/src/composites/wui-list-token' -import type { WuiListAccount } from '@reown/appkit-ui-new/src/composites/wui-list-account' -import { html } from 'lit' -import '../../components/gallery-container' -import { networkImageSrc } from '../../utils/PresetUtils' - -type Component = Meta - -export default { - title: 'Composites/wui-list-account', - args: { - address: 'Ethereum', - addressDescription: 'some ens', - logo: networkImageSrc - } -} as Component - -export const Default: Component = { - render: args => - html` - - ` -} diff --git a/packages/ui-new/index.ts b/packages/ui-new/index.ts index 172805ca20..3870c88ea5 100644 --- a/packages/ui-new/index.ts +++ b/packages/ui-new/index.ts @@ -73,7 +73,6 @@ export * from './src/composites/wui-list-description/index.js' export * from './src/composites/wui-input-amount/index.js' export * from './src/composites/wui-token-button/index.js' export * from './src/composites/wui-preview-item/index.js' -export * from './src/composites/wui-list-account/index.js' export * from './src/composites/wui-icon-button/index.js' export * from './src/composites/wui-list-button/index.js' export * from './src/composites/wui-list-social/index.js' diff --git a/packages/ui-new/src/components/wui-shimmer/index.ts b/packages/ui-new/src/components/wui-shimmer/index.ts index d98022792f..7be52a9af2 100644 --- a/packages/ui-new/src/components/wui-shimmer/index.ts +++ b/packages/ui-new/src/components/wui-shimmer/index.ts @@ -16,7 +16,7 @@ export class WuiShimmer extends LitElement { @property() public height = '' - @property() public borderRadius: BorderRadiusType = 'm' + @property() public borderRadius: BorderRadiusType = '2' @property() public variant: Variant = 'default' diff --git a/packages/ui-new/src/composites/wui-button/index.ts b/packages/ui-new/src/composites/wui-button/index.ts index ba37bf3f85..f181cb3151 100644 --- a/packages/ui-new/src/composites/wui-button/index.ts +++ b/packages/ui-new/src/composites/wui-button/index.ts @@ -4,7 +4,7 @@ import '../../components/wui-icon/index.js' import '../../components/wui-loading-spinner/index.js' import '../../components/wui-text/index.js' import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' -import type { BorderRadiusType, ButtonSize, ButtonVariant, TextType } from '../../utils/TypeUtil.js' +import type { ButtonSize, ButtonVariant, TextType } from '../../utils/TypeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' import styles from './styles.js' @@ -39,8 +39,6 @@ export class WuiButton extends LitElement { @property() public variant: ButtonVariant = 'accent-primary' - @property() public borderRadius: Exclude = 'm' - @property() public textVariant?: TextType // -- Render -------------------------------------------- // diff --git a/packages/ui-new/src/composites/wui-list-account/index.ts b/packages/ui-new/src/composites/wui-list-account/index.ts deleted file mode 100644 index 9f36b8ece0..0000000000 --- a/packages/ui-new/src/composites/wui-list-account/index.ts +++ /dev/null @@ -1,138 +0,0 @@ -import { html, LitElement } from 'lit' -import { property } from 'lit/decorators.js' -import '../../components/wui-text/index.js' -import '../../components/wui-image/index.js' -import '../../layout/wui-flex/index.js' -import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' -import { customElement } from '../../utils/WebComponentsUtil.js' -import styles from './styles.js' -import { UiHelperUtil } from '../../utils/UiHelperUtil.js' -import { W3mFrameRpcConstants } from '@reown/appkit-wallet' -import { - AccountController, - BlockchainApiController, - ChainController, - StorageUtil -} from '@reown/appkit-core' - -@customElement('wui-list-account') -export class WuiListAccount extends LitElement { - public static override styles = [resetStyles, elementStyles, styles] - - // -- State & Properties -------------------------------- // - @property() public accountAddress = '' - - @property() public accountType = '' - - private connectedConnector = StorageUtil.getConnectedConnector() - - private labels = AccountController.state.addressLabels - - private caipNetwork = ChainController.state.activeCaipNetwork - - private socialProvider = StorageUtil.getConnectedSocialProvider() - - private balance = 0 - - private fetchingBalance = true - - private shouldShowIcon = false - - @property({ type: Boolean }) public selected = false - - @property({ type: Function }) public onSelect?: ( - { address, type }: { address: string; type: string }, - selected: boolean - ) => void - - public override connectedCallback() { - super.connectedCallback() - BlockchainApiController.getBalance(this.accountAddress, this.caipNetwork?.caipNetworkId) - .then(response => { - let total = this.balance - if (response.balances.length > 0) { - total = response.balances.reduce((acc, balance) => acc + (balance?.value || 0), 0) - } - this.balance = total - this.fetchingBalance = false - this.requestUpdate() - }) - .catch(() => { - this.fetchingBalance = false - this.requestUpdate() - }) - } - - // -- Render -------------------------------------------- // - public override render() { - const label = this.getLabel() - - // Only show icon for AUTH accounts - this.shouldShowIcon = this.connectedConnector === 'ID_AUTH' - - return html` - - - - ${this.shouldShowIcon - ? html`` - : html``} - - ${UiHelperUtil.getTruncateString({ - string: this.accountAddress, - charsStart: 4, - charsEnd: 6, - truncate: 'middle' - })} - ${label} - - - - ${this.fetchingBalance - ? html`` - : html` $${this.balance.toFixed(2)}`} - - - ` - } - - // -- Private ------------------------------------------- // - - private getLabel() { - let label = this.labels?.get(this.accountAddress) - - if (!label && this.connectedConnector === 'ID_AUTH') { - label = `${this.accountType === 'eoa' ? this.socialProvider ?? 'Email' : 'Smart'} Account` - } else if ( - (!label && this.connectedConnector === 'INJECTED') || - this.connectedConnector === 'ANNOUNCED' - ) { - label = `Injected Account` - } else if (!label) { - label = 'EOA' - } - - return label - } -} - -declare global { - interface HTMLElementTagNameMap { - 'wui-list-account': WuiListAccount - } -} diff --git a/packages/ui-new/src/composites/wui-list-account/styles.ts b/packages/ui-new/src/composites/wui-list-account/styles.ts deleted file mode 100644 index 2f459b2db0..0000000000 --- a/packages/ui-new/src/composites/wui-list-account/styles.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { css } from 'lit' - -export default css` - button { - padding: 6.5px var(--wui-spacing-l) 6.5px var(--wui-spacing-xs); - display: flex; - justify-content: space-between; - width: 100%; - border-radius: var(--wui-border-radius-xs); - background-color: var(--wui-color-gray-glass-002); - } - - button[data-clickable='false'] { - pointer-events: none; - background-color: transparent; - } - - wui-image { - width: var(--wui-spacing-3xl); - height: var(--wui-spacing-3xl); - border-radius: var(--wui-border-radius-3xl); - } - - wui-avatar { - width: var(--wui-spacing-3xl); - height: var(--wui-spacing-3xl); - box-shadow: 0 0 0 0; - } - .address { - color: var(--wui-color-fg-base-100); - } - .address-description { - text-transform: capitalize; - color: var(--wui-color-fg-base-200); - } - - wui-icon-box { - position: relative; - right: 15px; - top: 15px; - border: 2px solid var(--wui-color-bg-150); - background-color: var(--wui-color-bg-125); - } -` diff --git a/packages/ui-new/src/composites/wui-wallet-image/index.ts b/packages/ui-new/src/composites/wui-wallet-image/index.ts index f0064c3a3b..ae207b8a6d 100644 --- a/packages/ui-new/src/composites/wui-wallet-image/index.ts +++ b/packages/ui-new/src/composites/wui-wallet-image/index.ts @@ -27,13 +27,13 @@ export class WuiWalletImage extends LitElement { // -- Render -------------------------------------------- // public override render() { - let borderRadius: BorderRadiusType = 'xxs' + let borderRadius: BorderRadiusType = '1' if (this.size === 'lg') { - borderRadius = 'm' + borderRadius = '3' } else if (this.size === 'md') { - borderRadius = 'xs' + borderRadius = '2' } else { - borderRadius = 'xxs' + borderRadius = '1' } this.style.cssText = ` --local-border-radius: var(--wui-border-radius-${borderRadius}); diff --git a/packages/ui-new/src/utils/JSXTypeUtil.ts b/packages/ui-new/src/utils/JSXTypeUtil.ts index e13979cf50..df3ab929f8 100644 --- a/packages/ui-new/src/utils/JSXTypeUtil.ts +++ b/packages/ui-new/src/utils/JSXTypeUtil.ts @@ -67,7 +67,6 @@ import type { WuiListWalletTransaction } from '../composites/wui-list-wallet-tra import type { WuiPromo } from '../composites/wui-promo/index.js' import type { WuiProfileButton } from '../composites/wui-profile-button/index.js' import type { WuiProfileButtonV2 } from '../composites/wui-profile-button-v2/index.js' -import type { WuiListAccount } from '../composites/wui-list-account/index.js' import type { WuiPreviewItem } from '../composites/wui-preview-item/index.js' import type { WuiAlertBar } from '../composites/wui-alertbar/index.js' import type { WuiFlex } from '../layout/wui-flex/index.js' @@ -156,7 +155,6 @@ declare global { 'wui-visual-thumbnail': CustomElement 'wui-wallet-image': CustomElement 'wui-banner': CustomElement - 'wui-list-account': CustomElement 'wui-checkbox': CustomElement 'wui-toggle': CustomElement 'wui-certified-switch': CustomElement From 826fd7de89709125924672e76cb6503c7918c12b Mon Sep 17 00:00:00 2001 From: MK Date: Wed, 20 Nov 2024 18:37:09 +0000 Subject: [PATCH 3/9] chore: edit typography and push ellipsis text support --- .../wui-list-select-account.stories.ts | 4 +- packages/ui-new/src/assets/svg/mail.ts | 12 ++-- .../ui-new/src/components/wui-text/styles.ts | 58 +++++++++++++++++-- .../wui-list-select-account/index.ts | 32 +++++----- .../wui-list-select-account/styles.ts | 32 +++++++--- 5 files changed, 102 insertions(+), 36 deletions(-) diff --git a/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts b/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts index 5853a382b7..8a15488f2b 100644 --- a/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts +++ b/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts @@ -1,4 +1,4 @@ - import { html } from 'lit' +import { html } from 'lit' import type { Meta } from '@storybook/web-components' import '@reown/appkit-ui-new/src/composites/wui-list-select-account' import '../../components/gallery-container' @@ -17,7 +17,7 @@ export default { icon: 'mail', disabled: false }, - transparent: { + argTypes: { dollars: { control: { type: 'text' } }, diff --git a/packages/ui-new/src/assets/svg/mail.ts b/packages/ui-new/src/assets/svg/mail.ts index a44cccf93b..9dc38067fc 100644 --- a/packages/ui-new/src/assets/svg/mail.ts +++ b/packages/ui-new/src/assets/svg/mail.ts @@ -1,10 +1,6 @@ import { svg } from 'lit' -export const mailSvg = svg` - -` +export const mailSvg = svg` + + +` diff --git a/packages/ui-new/src/components/wui-text/styles.ts b/packages/ui-new/src/components/wui-text/styles.ts index eec2a096ce..8bd14aac13 100644 --- a/packages/ui-new/src/components/wui-text/styles.ts +++ b/packages/ui-new/src/components/wui-text/styles.ts @@ -9,10 +9,6 @@ export default css` width: 100%; display: inline-block; font-style: normal; - font-feature-settings: - 'tnum' on, - 'lnum' on, - 'case' on; overflow: inherit; text-overflow: inherit; text-align: var(--local-align); @@ -48,6 +44,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h1-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h1-medium { @@ -56,6 +55,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h1-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h2-regular-mono { @@ -72,6 +74,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h2-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h2-medium { @@ -80,6 +85,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h2-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h3-regular-mono { @@ -96,6 +104,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h3-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h3-medium { @@ -104,6 +115,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h3-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h4-regular-mono { @@ -120,6 +134,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h4-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h4-medium { @@ -128,6 +145,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h4-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h5-regular-mono { @@ -144,6 +164,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h5-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h5-medium { @@ -152,6 +175,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h5-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h6-regular-mono { @@ -168,6 +194,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h6-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-h6-medium { @@ -176,6 +205,9 @@ export default css` letter-spacing: ${({ typography }) => typography['h6-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-lg-regular-mono { @@ -192,6 +224,9 @@ export default css` letter-spacing: ${({ typography }) => typography['lg-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-lg-medium { @@ -200,6 +235,9 @@ export default css` letter-spacing: ${({ typography }) => typography['lg-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-md-regular-mono { @@ -216,6 +254,9 @@ export default css` letter-spacing: ${({ typography }) => typography['md-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-md-medium { @@ -224,6 +265,9 @@ export default css` letter-spacing: ${({ typography }) => typography['md-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-sm-regular-mono { @@ -240,6 +284,9 @@ export default css` letter-spacing: ${({ typography }) => typography['sm-regular'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.regular}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } .wui-font-sm-medium { @@ -248,5 +295,8 @@ export default css` letter-spacing: ${({ typography }) => typography['sm-medium'].letterSpacing}; font-weight: ${({ fontWeight }) => fontWeight.medium}; font-family: ${({ fontFamily }) => fontFamily.regular}; + font-feature-settings: + 'liga' off, + 'clig' off; } ` diff --git a/packages/ui-new/src/composites/wui-list-select-account/index.ts b/packages/ui-new/src/composites/wui-list-select-account/index.ts index bf7929536f..5b005c9d31 100644 --- a/packages/ui-new/src/composites/wui-list-select-account/index.ts +++ b/packages/ui-new/src/composites/wui-list-select-account/index.ts @@ -6,7 +6,6 @@ import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' import '../../components/wui-text/index.js' import '../../components/wui-icon/index.js' import '../wui-avatar/index.js' -import '../wui-icon-box/index.js' import { UiHelperUtil } from '../../utils/UiHelperUtil.js' import type { IconType } from '../../utils/TypeUtil.js' @@ -32,31 +31,34 @@ export class WuiListSelectAccount extends LitElement { return html`