feat: new chip button component (#3305)

reown-com · Dec 2, 2024 · 7a1607b · 7a1607b
1 parent b7b8e3d
commit 7a1607b
Show file tree

Hide file tree

Showing 13 changed files with 280 additions and 109 deletions.
diff --git a/apps/gallery-new/stories/composites/wui-domain-chip.stories.ts b/apps/gallery-new/stories/composites/wui-domain-chip.stories.ts
@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui-new/src/composites/wui-domain-chip'
+import type { WuiDomainChip } from '@reown/appkit-ui-new/src/composites/wui-domain-chip'
+import { html } from 'lit'
+import { domainChipVariants } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiDomainChip>
+
+export default {
+  title: 'Composites/wui-domain-chip',
+  args: {
+    variant: 'success',
+    size: 'md',
+    disabled: false,
+    text: 'reown.com/appkit'
+  },
+  argTypes: {
+    variant: {
+      options: domainChipVariants,
+      control: { type: 'select' }
+    },
+    size: {
+      options: ['sm', 'md'],
+      control: { type: 'select' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html`<wui-domain-chip
+      text=${args.text}
+      size=${args.size}
+      variant=${args.variant}
+      ?disabled=${args.disabled}
+    ></wui-domain-chip>`
+}
diff --git a/apps/gallery-new/utils/PresetUtils.ts b/apps/gallery-new/utils/PresetUtils.ts
@@ -29,6 +29,7 @@ import type {
   TransactionType,
   VisualType,
   ButtonLinkVariant,
+  DomainChipVariant,
   ToastMessageVariant
 } from '@reown/appkit-ui-new/src/utils/TypeUtil'
 import type { TransactionStatus, TransactionDirection } from '@reown/appkit-common'
@@ -205,6 +206,7 @@ export const iconOptions: IconType[] = [
   'arrowTop',
   'browser',
   'checkmark',
+  'checkmarkVerified',
   'chevronBottom',
   'chevronLeft',
   'chevronRight',
@@ -282,7 +284,9 @@ export const logoOptions: LogoType[] = [
 
 export const placementOptions: PlacementType[] = ['top', 'right', 'bottom', 'left']
 
-export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'shade', 'gray', 'shade']
+export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'primary']
+
+export const domainChipVariants: DomainChipVariant[] = ['success', 'warning', 'error']
 
 export const chipVariants: ChipType[] = [
   'fill',

diff --git a/packages/ui-new/index.ts b/packages/ui-new/index.ts
@@ -23,6 +23,7 @@ export * from './src/composites/wui-connect-button/index.js'
 export * from './src/composites/wui-cta-button/index.js'
 export * from './src/composites/wui-details-group/index.js'
 export * from './src/composites/wui-details-group-item/index.js'
+export * from './src/composites/wui-domain-chip/index.js'
 export * from './src/composites/wui-dropdown-menu/index.js'
 export * from './src/composites/wui-email-input/index.js'
 export * from './src/composites/wui-ens-input/index.js'

diff --git a/packages/ui-new/src/assets/svg/arrow-top-right.ts b/packages/ui-new/src/assets/svg/arrow-top-right.ts
@@ -1,5 +1,5 @@
 import { svg } from 'lit'
 
-export const arrowTopRightSvg = svg`<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
-<path d="M7.31248 0.78125V5.65625C7.31248 5.80543 7.25322 5.94851 7.14773 6.054C7.04224 6.15949 6.89916 6.21875 6.74998 6.21875C6.6008 6.21875 6.45772 6.15949 6.35223 6.054C6.24674 5.94851 6.18748 5.80543 6.18748 5.65625V2.14062L1.14795 7.17922C1.04228 7.28489 0.898954 7.34426 0.749511 7.34426C0.600068 7.34426 0.456746 7.28489 0.351073 7.17922C0.245401 7.07355 0.186035 6.93022 0.186035 6.78078C0.186035 6.63134 0.245401 6.48802 0.351073 6.38234L5.3906 1.34375H1.87498C1.7258 1.34375 1.58272 1.28449 1.47723 1.179C1.37174 1.07351 1.31248 0.930434 1.31248 0.78125C1.31248 0.632066 1.37174 0.488992 1.47723 0.383502C1.58272 0.278013 1.7258 0.21875 1.87498 0.21875H6.74998C6.89916 0.21875 7.04224 0.278013 7.14773 0.383502C7.25322 0.488992 7.31248 0.632066 7.31248 0.78125Z" fill="currentColor"/>
+export const arrowTopRightSvg = svg`<svg width="12" height="13" viewBox="0 0 12 13" fill="none">
+<path fill="currentColor" d="M9.37503 3.0625V7.9375C9.37503 8.03696 9.33552 8.13234 9.26519 8.20267C9.19486 8.27299 9.09948 8.3125 9.00003 8.3125C8.90057 8.3125 8.80519 8.27299 8.73486 8.20267C8.66453 8.13234 8.62503 8.03696 8.62503 7.9375V3.96766L3.26534 9.32781C3.19497 9.39818 3.09954 9.43771 3.00003 9.43771C2.90051 9.43771 2.80508 9.39818 2.73471 9.32781C2.66435 9.25745 2.62482 9.16201 2.62482 9.0625C2.62482 8.96299 2.66435 8.86755 2.73471 8.79719L8.09487 3.4375H4.12503C4.02557 3.4375 3.93019 3.39799 3.85986 3.32766C3.78953 3.25734 3.75003 3.16196 3.75003 3.0625C3.75003 2.96304 3.78953 2.86766 3.85986 2.79734C3.93019 2.72701 4.02557 2.6875 4.12503 2.6875H9.00003C9.09948 2.6875 9.19486 2.72701 9.26519 2.79734C9.33552 2.86766 9.37503 2.96304 9.37503 3.0625Z"/>
 </svg>`
diff --git a/packages/ui-new/src/assets/svg/checkmark-verified.ts b/packages/ui-new/src/assets/svg/checkmark-verified.ts
@@ -0,0 +1,6 @@
+import { svg } from 'lit'
+
+export const checkmarkVerifiedSvg = svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M14.1163 6.42625C13.8806 6.18 13.6369 5.92625 13.545 5.70312C13.46 5.49875 13.455 5.16 13.45 4.83187C13.4406 4.22187 13.4306 3.53062 12.95 3.05C12.4694 2.56937 11.7781 2.55937 11.1681 2.55C10.84 2.545 10.5012 2.54 10.2969 2.455C10.0744 2.36312 9.82 2.11937 9.57375 1.88375C9.1425 1.46937 8.6525 1 8 1C7.3475 1 6.85812 1.46937 6.42625 1.88375C6.18 2.11937 5.92625 2.36312 5.70312 2.455C5.5 2.54 5.16 2.545 4.83187 2.55C4.22187 2.55937 3.53062 2.56937 3.05 3.05C2.56937 3.53062 2.5625 4.22187 2.55 4.83187C2.545 5.16 2.54 5.49875 2.455 5.70312C2.36312 5.92562 2.11937 6.18 1.88375 6.42625C1.46937 6.8575 1 7.3475 1 8C1 8.6525 1.46937 9.14187 1.88375 9.57375C2.11937 9.82 2.36312 10.0738 2.455 10.2969C2.54 10.5012 2.545 10.84 2.55 11.1681C2.55937 11.7781 2.56937 12.4694 3.05 12.95C3.53062 13.4306 4.22187 13.4406 4.83187 13.45C5.16 13.455 5.49875 13.46 5.70312 13.545C5.92562 13.6369 6.18 13.8806 6.42625 14.1163C6.8575 14.5306 7.3475 15 8 15C8.6525 15 9.14187 14.5306 9.57375 14.1163C9.82 13.8806 10.0738 13.6369 10.2969 13.545C10.5012 13.46 10.84 13.455 11.1681 13.45C11.7781 13.4406 12.4694 13.4306 12.95 12.95C13.4306 12.4694 13.4406 11.7781 13.45 11.1681C13.455 10.84 13.46 10.5012 13.545 10.2969C13.6369 10.0744 13.8806 9.82 14.1163 9.57375C14.5306 9.1425 15 8.6525 15 8C15 7.3475 14.5306 6.85812 14.1163 6.42625ZM10.8538 6.85375L7.35375 10.3538C7.30731 10.4002 7.25217 10.4371 7.19147 10.4623C7.13077 10.4874 7.06571 10.5004 7 10.5004C6.93429 10.5004 6.86923 10.4874 6.80853 10.4623C6.74783 10.4371 6.69269 10.4002 6.64625 10.3538L5.14625 8.85375C5.05243 8.75993 4.99972 8.63268 4.99972 8.5C4.99972 8.36732 5.05243 8.24007 5.14625 8.14625C5.24007 8.05243 5.36732 7.99972 5.5 7.99972C5.63268 7.99972 5.75993 8.05243 5.85375 8.14625L7 9.29313L10.1462 6.14625C10.1927 6.09979 10.2479 6.06294 10.3086 6.0378C10.3692 6.01266 10.4343 5.99972 10.5 5.99972C10.5657 5.99972 10.6308 6.01266 10.6914 6.0378C10.7521 6.06294 10.8073 6.09979 10.8538 6.14625C10.9002 6.1927 10.9371 6.24786 10.9622 6.30855C10.9873 6.36925 11.0003 6.4343 11.0003 6.5C11.0003 6.5657 10.9873 6.63075 10.9622 6.69145C10.9371 6.75214 10.9002 6.8073 10.8538 6.85375Z" fill="currentColor"/>
+</svg>
+`
diff --git a/packages/ui-new/src/assets/svg/exclamation-circle.ts b/packages/ui-new/src/assets/svg/exclamation-circle.ts
@@ -0,0 +1,7 @@
+import { svg } from 'lit'
+
+export const exclamationCircleSvg = svg`<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+<path d="M6 1.125C5.03582 1.125 4.09329 1.41091 3.2916 1.94659C2.48991 2.48226 1.86507 3.24363 1.49609 4.13442C1.12711 5.02521 1.03057 6.00541 1.21867 6.95107C1.40678 7.89672 1.87108 8.76536 2.55286 9.44715C3.23464 10.1289 4.10328 10.5932 5.04894 10.7813C5.99459 10.9694 6.97479 10.8729 7.86558 10.5039C8.75637 10.1349 9.51775 9.51009 10.0534 8.7084C10.5891 7.90671 10.875 6.96418 10.875 6C10.8736 4.70749 10.3596 3.46831 9.44564 2.55436C8.5317 1.64042 7.29251 1.12636 6 1.125ZM5.625 3.75C5.625 3.65054 5.66451 3.55516 5.73484 3.48484C5.80516 3.41451 5.90055 3.375 6 3.375C6.09946 3.375 6.19484 3.41451 6.26517 3.48484C6.33549 3.55516 6.375 3.65054 6.375 3.75V6.375C6.375 6.47446 6.33549 6.56984 6.26517 6.64017C6.19484 6.71049 6.09946 6.75 6 6.75C5.90055 6.75 5.80516 6.71049 5.73484 6.64017C5.66451 6.56984 5.625 6.47446 5.625 6.375V3.75ZM6 8.625C5.88875 8.625 5.78 8.59201 5.68749 8.5302C5.59499 8.46839 5.52289 8.38054 5.48032 8.27776C5.43775 8.17498 5.42661 8.06188 5.44831 7.95276C5.47001 7.84365 5.52359 7.74342 5.60225 7.66475C5.68092 7.58609 5.78115 7.53251 5.89026 7.51081C5.99938 7.4891 6.11248 7.50024 6.21526 7.54282C6.31804 7.58539 6.4059 7.65749 6.4677 7.74999C6.52951 7.84249 6.5625 7.95125 6.5625 8.0625C6.5625 8.21168 6.50324 8.35476 6.39775 8.46025C6.29226 8.56574 6.14919 8.625 6 8.625Z" fill="currentColor"/>
+</svg>
+
+`
diff --git a/packages/ui-new/src/assets/svg/external-link.ts b/packages/ui-new/src/assets/svg/external-link.ts
@@ -1,10 +1,5 @@
 import { svg } from 'lit'
 
-export const externalLinkSvg = svg`<svg fill="none" viewBox="0 0 14 15">
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M3.74 3.99a1 1 0 0 1 1-1H11a1 1 0 0 1 1 1v6.26a1 1 0 0 1-2 0V6.4l-6.3 6.3a1 1 0 0 1-1.4-1.42l6.29-6.3H4.74a1 1 0 0 1-1-1Z"
-    clip-rule="evenodd"
-  />
+export const externalLinkSvg = svg`<svg width="12" height="13" viewBox="0 0 12 13" fill="none">
+<path d="M9.37503 3.0625V7.9375C9.37503 8.03696 9.33552 8.13234 9.26519 8.20267C9.19486 8.27299 9.09948 8.3125 9.00003 8.3125C8.90057 8.3125 8.80519 8.27299 8.73486 8.20267C8.66453 8.13234 8.62503 8.03696 8.62503 7.9375V3.96766L3.26534 9.32781C3.19497 9.39818 3.09954 9.43771 3.00003 9.43771C2.90051 9.43771 2.80508 9.39818 2.73471 9.32781C2.66435 9.25745 2.62482 9.16201 2.62482 9.0625C2.62482 8.96299 2.66435 8.86755 2.73471 8.79719L8.09487 3.4375H4.12503C4.02557 3.4375 3.93019 3.39799 3.85986 3.32766C3.78953 3.25734 3.75003 3.16196 3.75003 3.0625C3.75003 2.96304 3.78953 2.86766 3.85986 2.79734C3.93019 2.72701 4.02557 2.6875 4.12503 2.6875H9.00003C9.09948 2.6875 9.19486 2.72701 9.26519 2.79734C9.33552 2.86766 9.37503 2.96304 9.37503 3.0625Z" fill="currentColor"/>
 </svg>`
diff --git a/packages/ui-new/src/components/wui-icon/index.ts b/packages/ui-new/src/components/wui-icon/index.ts
@@ -7,6 +7,7 @@ import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
 // -- Svg's-------------------------------- //
+import { arrowTopRightSvg } from '../../assets/svg/arrow-top-right.js'
 import { addSvg } from '../../assets/svg/add.js'
 import { allWalletsSvg } from '../../assets/svg/all-wallets.js'
 import { arrowBottomCircleSvg } from '../../assets/svg/arrow-bottom-circle.js'
@@ -20,6 +21,7 @@ import { bankSvg } from '../../assets/svg/bank.js'
 import { browserSvg } from '../../assets/svg/browser.js'
 import { cardSvg } from '../../assets/svg/card.js'
 import { checkmarkBoldSvg } from '../../assets/svg/checkmark-bold.js'
+import { checkmarkVerifiedSvg } from '../../assets/svg/checkmark-verified.js'
 import { checkmarkSvg } from '../../assets/svg/checkmark.js'
 import { chevronBottomSvg } from '../../assets/svg/chevron-bottom.js'
 import { chevronLeftSvg } from '../../assets/svg/chevron-left.js'
@@ -36,6 +38,8 @@ import { desktopSvg } from '../../assets/svg/desktop.js'
 import { disconnectSvg } from '../../assets/svg/disconnect.js'
 import { discordSvg } from '../../assets/svg/discord.js'
 import { etherscanSvg } from '../../assets/svg/etherscan.js'
+import { exclamationTriangleSvg } from '../../assets/svg/exclamation-triangle.js'
+import { exclamationCircleSvg } from '../../assets/svg/exclamation-circle.js'
 import { extensionSvg } from '../../assets/svg/extension.js'
 import { externalLinkSvg } from '../../assets/svg/external-link.js'
 import { facebookSvg } from '../../assets/svg/facebook.js'
@@ -83,8 +87,6 @@ import { lightbulbSvg } from '../../assets/svg/lightbulb.js'
 import { idSvg } from '../../assets/svg/id.js'
 import { xSvg } from '../../assets/svg/x.js'
 import { infoSvg } from '../../assets/svg/info.js'
-import { exclamationTriangleSvg } from '../../assets/svg/exclamation-triangle.js'
-import { arrowTopRightSvg } from '../../assets/svg/arrow-top-right.js'
 
 const svgOptions: Record<IconType, TemplateResult<2>> = {
   add: addSvg,
@@ -102,6 +104,7 @@ const svgOptions: Record<IconType, TemplateResult<2>> = {
   card: cardSvg,
   checkmark: checkmarkSvg,
   checkmarkBold: checkmarkBoldSvg,
+  checkmarkVerified: checkmarkVerifiedSvg,
   chevronBottom: chevronBottomSvg,
   chevronLeft: chevronLeftSvg,
   chevronRight: chevronRightSvg,
@@ -117,6 +120,8 @@ const svgOptions: Record<IconType, TemplateResult<2>> = {
   disconnect: disconnectSvg,
   discord: discordSvg,
   etherscan: etherscanSvg,
+  exclamationTriangle: exclamationTriangleSvg,
+  exclamationCircle: exclamationCircleSvg,
   extension: extensionSvg,
   externalLink: externalLinkSvg,
   facebook: facebookSvg,
@@ -162,8 +167,7 @@ const svgOptions: Record<IconType, TemplateResult<2>> = {
   walletPlaceholder: walletPlaceholderSvg,
   warningCircle: warningCircleSvg,
   x: xSvg,
-  info: infoSvg,
-  exclamationTriangle: exclamationTriangleSvg
+  info: infoSvg
 }
 
 // @TODO: Add color property

diff --git a/packages/ui-new/src/composites/wui-chip-button/index.ts b/packages/ui-new/src/composites/wui-chip-button/index.ts
@@ -4,39 +4,39 @@ import '../../components/wui-icon/index.js'
 import '../../components/wui-image/index.js'
 import '../../components/wui-text/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
-import type { ChipButtonVariant, IconType } from '../../utils/TypeUtil.js'
+import type { ChipButtonSize, ChipButtonVariant, IconType } from '../../utils/TypeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
+// -- Constants --------------------------------------------------------------- //
+const FONT_BY_SIZE = {
+  sm: 'sm-regular',
+  md: 'md-regular'
+}
+
 @customElement('wui-chip-button')
 export class WuiChipButton extends LitElement {
   public static override styles = [resetStyles, elementStyles, styles]
 
   // -- State & Properties -------------------------------- //
   @property() public variant: ChipButtonVariant = 'accent'
 
+  @property() public size: ChipButtonSize = 'md'
+
   @property() public imageSrc = ''
 
   @property({ type: Boolean }) public disabled = false
 
   @property() public icon: IconType = 'externalLink'
 
-  @property() public size: 'sm' | 'md' = 'md'
-
   @property() public text = ''
 
   // -- Render -------------------------------------------- //
   public override render() {
-    const textVariant = this.size === 'sm' ? 'small-600' : 'paragraph-600'
-
     return html`
-      <button
-        class=${this.disabled ? 'disabled' : ''}
-        data-variant=${this.variant}
-        data-size=${this.size}
-      >
+      <button ?disabled=${this.disabled} data-variant=${this.variant} data-size=${this.size}>
         ${this.imageSrc ? html`<wui-image src=${this.imageSrc}></wui-image>` : null}
-        <wui-text variant=${textVariant} color="inherit"> ${this.text} </wui-text>
+        <wui-text variant=${FONT_BY_SIZE[this.size]} color="inherit">${this.text}</wui-text>
         <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
       </button>
     `

diff --git a/packages/ui-new/src/composites/wui-chip-button/styles.ts b/packages/ui-new/src/composites/wui-chip-button/styles.ts
@@ -1,122 +1,85 @@
-import { css } from 'lit'
+import { css } from '../../utils/ThemeHelperUtil.js'
 
 export default css`
   button {
     border: none;
     border-radius: var(--wui-border-radius-3xl);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${({ spacing }) => spacing[1]};
+    padding: ${({ spacing }) => spacing[2]};
   }
 
+  /* -- Variants --------------------------------------------------------------- */
   button[data-variant='main'] {
-    background-color: var(--wui-color-accent-100);
-    color: var(--wui-color-inverse-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+    background-color: ${({ tokens }) => tokens.core.backgroundAccentPrimary};
+    color: ${({ tokens }) => tokens.theme.textPrimary};
   }
 
   button[data-variant='accent'] {
-    background-color: var(--wui-color-accent-glass-010);
-    color: var(--wui-color-accent-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
+    color: ${({ tokens }) => tokens.core.textAccentPrimary};
   }
 
-  button[data-variant='gray'] {
-    background-color: transparent;
-    color: var(--wui-color-fg-200);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
-  button[data-variant='shade'] {
-    background-color: transparent;
-    color: var(--wui-color-accent-100);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
-  button[data-size='sm'] {
-    height: 32px;
-    padding: 0 var(--wui-spacing-s);
-  }
-
-  button[data-size='md'] {
-    height: 40px;
-    padding: 0 var(--wui-spacing-l);
-  }
-
-  button[data-size='sm'] > wui-image {
-    width: 16px;
-    height: 16px;
-  }
-
-  button[data-size='md'] > wui-image {
-    width: 24px;
-    height: 24px;
+  button[data-variant='primary'] {
+    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    color: ${({ tokens }) => tokens.theme.textPrimary};
   }
 
+  /* -- Icons and Images --------------------------------------------------------------- */
+  button[data-size='sm'] > wui-image,
   button[data-size='sm'] > wui-icon {
     width: 12px;
     height: 12px;
   }
 
+  button[data-size='md'] > wui-image,
   button[data-size='md'] > wui-icon {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
   }
 
   wui-image {
-    border-radius: var(--wui-border-radius-3xl);
+    border-radius: 8px;
     overflow: hidden;
   }
 
-  button.disabled > wui-icon,
-  button.disabled > wui-image {
-    filter: grayscale(1);
-  }
-
-  button[data-variant='main'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
-  }
-
-  button[data-variant='shade'] > wui-image,
-  button[data-variant='gray'] > wui-image {
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
-  }
-
+  /* -- States --------------------------------------------------------------- */
   @media (hover: hover) and (pointer: fine) {
-    button[data-variant='main']:focus-visible {
-      background-color: var(--wui-color-accent-090);
-    }
-
-    button[data-variant='main']:hover:enabled {
-      background-color: var(--wui-color-accent-090);
+    button[data-variant='main']:hover {
+      background-color: ${({ tokens }) => tokens.core.foregroundAccent060};
     }
 
-    button[data-variant='main']:active:enabled {
-      background-color: var(--wui-color-accent-080);
+    button[data-variant='accent']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.core.borderAccentPrimary};
     }
 
-    button[data-variant='accent']:hover:enabled {
-      background-color: var(--wui-color-accent-glass-015);
+    button[data-variant='primary']:hover {
+      box-shadow: 0 0 0 1px ${({ tokens }) => tokens.theme.borderSecondary};
     }
+  }
 
-    button[data-variant='accent']:active:enabled {
-      background-color: var(--wui-color-accent-glass-020);
-    }
+  button[data-variant='main']:focus-visible,
+  button[data-variant='main']:active {
+    box-shadow: 0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent020};
+  }
 
-    button[data-variant='shade']:focus-visible,
-    button[data-variant='gray']:focus-visible,
-    button[data-variant='shade']:hover,
-    button[data-variant='gray']:hover {
-      background-color: var(--wui-color-gray-glass-002);
-    }
+  button[data-variant='accent']:focus-visible,
+  button[data-variant='accent']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.core.borderAccentPrimary},
+      0 0 0 4px ${({ tokens }) => tokens.core.foregroundAccent020};
+  }
 
-    button[data-variant='gray']:active,
-    button[data-variant='shade']:active {
-      background-color: var(--wui-color-gray-glass-005);
-    }
+  button[data-variant='primary']:focus-visible,
+  button[data-variant='primary']:active {
+    box-shadow:
+      0 0 0 1px ${({ tokens }) => tokens.theme.borderSecondary},
+      0 0 0 4px ${({ tokens }) => tokens.theme.foregroundSecondary};
   }
 
-  button.disabled {
-    color: var(--wui-color-gray-glass-020);
-    background-color: var(--wui-color-gray-glass-002);
-    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
-    pointer-events: none;
+  button:disabled {
+    opacity: 0.5;
   }
 `