⭐️

【Polaris和訳】Components/Structure④

2021/11/06に公開約71,100字

この記事について

この記事は、Polaris/Components/Structureの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Top bar

マーチャントはトップバーコンポーネントを使って、検索、メニューへのアクセス、ロゴをクリックしてのナビゲートができます。トップバーは、Shopify や Shopify Plus などのインターフェースの上部に常に表示されています。トップバーを使用するサードパーティのアプリは、アプリプロバイダコンポーネントを使用して、自社ブランドに合わせて色をカスタマイズすることができますが、独自のロゴを使用する必要があります。

Top bar with all of its elements

アプリケーションの最上部の構造を提供するために使用します。テーマ付きのアプリプロバイダコンポーネントを使用して、トップバーコンポーネントのスタイルを設定します。トップバーコンポーネントのテーマに背景キーだけを与えると、インテリジェントなデフォルトとして、コントラストのあるテキストを持つ補色が設定されます。

Image from Gyazo

React
function TopBarExample() {
  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false)
  const [isSecondaryMenuOpen, setIsSecondaryMenuOpen] = useState(false)
  const [isSearchActive, setIsSearchActive] = useState(false)
  const [searchValue, setSearchValue] = useState("")

  const toggleIsUserMenuOpen = useCallback(
    () => setIsUserMenuOpen((isUserMenuOpen) => !isUserMenuOpen),
    []
  )

  const toggleIsSecondaryMenuOpen = useCallback(
    () => setIsSecondaryMenuOpen((isSecondaryMenuOpen) => !isSecondaryMenuOpen),
    []
  )

  const handleSearchResultsDismiss = useCallback(() => {
    setIsSearchActive(false)
    setSearchValue("")
  }, [])

  const handleSearchChange = useCallback((value) => {
    setSearchValue(value)
    setIsSearchActive(value.length > 0)
  }, [])

  const handleNavigationToggle = useCallback(() => {
    console.log("toggle navigation visibility")
  }, [])

  const theme = {
    logo: {
      width: 124,
      topBarSource:
        "https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999",
      url: "http://jadedpixel.com",
      accessibilityLabel: "Jaded Pixel",
    },
  }

  const userMenuMarkup = (
    <TopBar.UserMenu
      actions={[
        {
          items: [{ content: "Back to Shopify", icon: ArrowLeftMinor }],
        },
        {
          items: [{ content: "Community forums" }],
        },
      ]}
      name="Dharma"
      detail="Jaded Pixel"
      initials="D"
      open={isUserMenuOpen}
      onToggle={toggleIsUserMenuOpen}
    />
  )

  const searchResultsMarkup = (
    <ActionList items={[{ content: "Shopify help center" }, { content: "Community forums" }]} />
  )

  const searchFieldMarkup = (
    <TopBar.SearchField
      onChange={handleSearchChange}
      value={searchValue}
      placeholder="Search"
      showFocusBorder
    />
  )

  const secondaryMenuMarkup = (
    <TopBar.Menu
      activatorContent={
        <span>
          <Icon source={QuestionMarkMajor} />
          <VisuallyHidden>Secondary menu</VisuallyHidden>
        </span>
      }
      open={isSecondaryMenuOpen}
      onOpen={toggleIsSecondaryMenuOpen}
      onClose={toggleIsSecondaryMenuOpen}
      actions={[
        {
          items: [{ content: "Community forums" }],
        },
      ]}
    />
  )

  const topBarMarkup = (
    <TopBar
      showNavigationToggle
      userMenu={userMenuMarkup}
      secondaryMenu={secondaryMenuMarkup}
      searchResultsVisible={isSearchActive}
      searchField={searchFieldMarkup}
      searchResults={searchResultsMarkup}
      onSearchResultsDismiss={handleSearchResultsDismiss}
      onNavigationToggle={handleNavigationToggle}
    />
  )

  return (
    <div style={{ height: "250px" }}>
      <AppProvider
        theme={theme}
        i18n={{
          Polaris: {
            Avatar: {
              label: "Avatar",
              labelWithInitials: "Avatar with initials {initials}",
            },
            Frame: { skipToContent: "Skip to content" },
            TopBar: {
              toggleMenuLabel: "Toggle menu",
              SearchField: {
                clearButtonLabel: "Clear",
                search: "Search",
              },
            },
          },
        }}
      >
        <Frame topBar={topBarMarkup} />
      </AppProvider>
    </div>
  )
}
HTML
<div>
  <div
    style='--p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px;'
  >
    <div class="Polaris-Frame Polaris-Frame--hasTopBar" data-polaris-layer="true">
      <div class="Polaris-Frame__Skip"><a href="#AppFrameMain">Skip to content</a></div>
      <div
        class="Polaris-Frame__TopBar"
        data-polaris-layer="true"
        data-polaris-top-bar="true"
        id="AppFrameTopBar"
      >
        <div class="Polaris-TopBar">
          <button type="button" class="Polaris-TopBar__NavigationIcon" aria-label="Toggle menu">
            <span class="Polaris-Icon"
              ><span class="Polaris-VisuallyHidden"></span
              ><svg
                viewBox="0 0 20 20"
                class="Polaris-Icon__Svg"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  d="M19 11H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14H1a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z"
                ></path></svg
            ></span>
          </button>
          <div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
            <a
              class="Polaris-TopBar__LogoLink"
              href="http://jadedpixel.com"
              data-polaris-unstyled="true"
              style="width: 124px;"
              ><img
                src="https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999"
                alt="Jaded Pixel"
                class="Polaris-TopBar__Logo"
                style="width: 124px;"
            /></a>
          </div>
          <div class="Polaris-TopBar__Contents">
            <div class="Polaris-TopBar__SearchField">
              <div class="Polaris-TopBar-SearchField">
                <span class="Polaris-VisuallyHidden"
                  ><label for="PolarisSearchField1">Search</label></span
                ><input
                  id="PolarisSearchField1"
                  class="Polaris-TopBar-SearchField__Input"
                  placeholder="Search"
                  type="search"
                  autocapitalize="off"
                  autocomplete="off"
                  autocorrect="off"
                  value=""
                /><span class="Polaris-TopBar-SearchField__Icon"
                  ><span class="Polaris-Icon"
                    ><span class="Polaris-VisuallyHidden"></span
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                      ></path></svg></span
                ></span>
                <div
                  class="Polaris-TopBar-SearchField__Backdrop Polaris-TopBar-SearchField__BackdropShowFocusBorder"
                ></div>
              </div>
              <div class="Polaris-TopBar-Search">
                <div
                  style='--p-background:rgba(11, 12, 13, 1); --p-background-hovered:rgba(11, 12, 13, 1); --p-background-pressed:rgba(11, 12, 13, 1); --p-background-selected:rgba(11, 12, 13, 1); --p-surface:rgba(32, 33, 35, 1); --p-surface-neutral:rgba(49, 51, 53, 1); --p-surface-neutral-hovered:rgba(49, 51, 53, 1); --p-surface-neutral-pressed:rgba(49, 51, 53, 1); --p-surface-neutral-disabled:rgba(49, 51, 53, 1); --p-surface-neutral-subdued:rgba(68, 71, 74, 1); --p-surface-subdued:rgba(26, 28, 29, 1); --p-surface-disabled:rgba(26, 28, 29, 1); --p-surface-hovered:rgba(47, 49, 51, 1); --p-surface-pressed:rgba(62, 64, 67, 1); --p-surface-depressed:rgba(80, 83, 86, 1); --p-surface-search-field:rgba(47, 49, 51, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(33, 33, 33, 0.5); --p-shadow-from-dim-light:rgba(255, 255, 255, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(255, 255, 255, 0.15); --p-hint-from-direct-light:rgba(185, 185, 185, 0.2); --p-border:rgba(80, 83, 86, 1); --p-border-neutral-subdued:rgba(130, 135, 139, 1); --p-border-hovered:rgba(80, 83, 86, 1); --p-border-disabled:rgba(103, 107, 111, 1); --p-border-subdued:rgba(130, 135, 139, 1); --p-border-depressed:rgba(142, 145, 145, 1); --p-border-shadow:rgba(91, 95, 98, 1); --p-border-shadow-subdued:rgba(130, 135, 139, 1); --p-divider:rgba(69, 71, 73, 1); --p-icon:rgba(166, 172, 178, 1); --p-icon-hovered:rgba(225, 227, 229, 1); --p-icon-pressed:rgba(166, 172, 178, 1); --p-icon-disabled:rgba(84, 87, 90, 1); --p-icon-subdued:rgba(120, 125, 129, 1); --p-text:rgba(227, 229, 231, 1); --p-text-disabled:rgba(111, 115, 119, 1); --p-text-subdued:rgba(153, 159, 164, 1); --p-interactive:rgba(54, 163, 255, 1); --p-interactive-disabled:rgba(38, 98, 182, 1); --p-interactive-hovered:rgba(103, 175, 255, 1); --p-interactive-pressed:rgba(136, 188, 255, 1); --p-icon-interactive:rgba(54, 163, 255, 1); --p-focused:rgba(38, 98, 182, 1); --p-surface-selected:rgba(2, 14, 35, 1); --p-surface-selected-hovered:rgba(7, 29, 61, 1); --p-surface-selected-pressed:rgba(13, 43, 86, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(77, 80, 83, 1); --p-action-secondary-disabled:rgba(32, 34, 35, 1); --p-action-secondary-hovered:rgba(84, 87, 91, 1); --p-action-secondary-pressed:rgba(96, 100, 103, 1); --p-action-secondary-depressed:rgba(123, 127, 132, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(0, 86, 64, 1); --p-action-primary-hovered:rgba(0, 150, 113, 1); --p-action-primary-pressed:rgba(0, 164, 124, 1); --p-action-primary-depressed:rgba(0, 179, 136, 1); --p-icon-on-primary:rgba(230, 255, 244, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 141, 106, 1); --p-text-primary-hovered:rgba(0, 158, 120, 1); --p-text-primary-pressed:rgba(0, 176, 133, 1); --p-surface-primary-selected:rgba(12, 18, 16, 1); --p-surface-primary-selected-hovered:rgba(40, 48, 44, 1); --p-surface-primary-selected-pressed:rgba(54, 64, 59, 1); --p-border-critical:rgba(227, 47, 14, 1); --p-border-critical-subdued:rgba(227, 47, 14, 1); --p-border-critical-disabled:rgba(131, 23, 4, 1); --p-icon-critical:rgba(218, 45, 13, 1); --p-surface-critical:rgba(69, 7, 1, 1); --p-surface-critical-subdued:rgba(69, 7, 1, 1); --p-surface-critical-subdued-hovered:rgba(68, 23, 20, 1); --p-surface-critical-subdued-pressed:rgba(107, 16, 3, 1); --p-surface-critical-subdued-depressed:rgba(135, 24, 5, 1); --p-text-critical:rgba(233, 128, 122, 1); --p-action-critical:rgba(205, 41, 12, 1); --p-action-critical-disabled:rgba(187, 37, 10, 1); --p-action-critical-hovered:rgba(227, 47, 14, 1); --p-action-critical-pressed:rgba(250, 53, 17, 1); --p-action-critical-depressed:rgba(253, 87, 73, 1); --p-icon-on-critical:rgba(255, 248, 247, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(253, 114, 106, 1); --p-interactive-critical-disabled:rgba(254, 172, 168, 1); --p-interactive-critical-hovered:rgba(253, 138, 132, 1); --p-interactive-critical-pressed:rgba(253, 159, 155, 1); --p-border-warning:rgba(153, 112, 0, 1); --p-border-warning-subdued:rgba(153, 112, 0, 1); --p-icon-warning:rgba(104, 75, 0, 1); --p-surface-warning:rgba(153, 112, 0, 1); --p-surface-warning-subdued:rgba(77, 59, 29, 1); --p-surface-warning-subdued-hovered:rgba(82, 63, 32, 1); --p-surface-warning-subdued-pressed:rgba(87, 67, 34, 1); --p-text-warning:rgba(202, 149, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(68, 157, 167, 1); --p-icon-highlight:rgba(44, 108, 115, 1); --p-surface-highlight:rgba(0, 105, 113, 1); --p-surface-highlight-subdued:rgba(18, 53, 57, 1); --p-surface-highlight-subdued-hovered:rgba(20, 58, 62, 1); --p-surface-highlight-subdued-pressed:rgba(24, 65, 70, 1); --p-text-highlight:rgba(162, 239, 250, 1); --p-border-success:rgba(0, 135, 102, 1); --p-border-success-subdued:rgba(0, 135, 102, 1); --p-icon-success:rgba(0, 94, 70, 1); --p-surface-success:rgba(0, 94, 70, 1); --p-surface-success-subdued:rgba(28, 53, 44, 1); --p-surface-success-subdued-hovered:rgba(31, 58, 48, 1); --p-surface-success-subdued-pressed:rgba(35, 65, 54, 1); --p-text-success:rgba(88, 173, 142, 1); --p-decorative-one-icon:rgba(255, 186, 67, 1); --p-decorative-one-surface:rgba(142, 102, 9, 1); --p-decorative-one-text:rgba(255, 255, 255, 1); --p-decorative-two-icon:rgba(245, 182, 192, 1); --p-decorative-two-surface:rgba(206, 88, 20, 1); --p-decorative-two-text:rgba(255, 255, 255, 1); --p-decorative-three-icon:rgba(0, 227, 141, 1); --p-decorative-three-surface:rgba(0, 124, 90, 1); --p-decorative-three-text:rgba(255, 255, 255, 1); --p-decorative-four-icon:rgba(0, 221, 218, 1); --p-decorative-four-surface:rgba(22, 124, 121, 1); --p-decorative-four-text:rgba(255, 255, 255, 1); --p-decorative-five-icon:rgba(244, 183, 191, 1); --p-decorative-five-surface:rgba(194, 51, 86, 1); --p-decorative-five-text:rgba(255, 255, 255, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(227, 229, 231);'
                >
                  <div class="Polaris-TopBar-Search__SearchContent">
                    <div class="Polaris-TopBar-Search__Results">
                      <div class="Polaris-ActionList">
                        <div class="Polaris-ActionList__Section--withoutTitle">
                          <ul class="Polaris-ActionList__Actions">
                            <li>
                              <button type="button" class="Polaris-ActionList__Item">
                                <span class="Polaris-ActionList__Content"
                                  ><span class="Polaris-ActionList__Text"
                                    >Shopify help center</span
                                  ></span
                                >
                              </button>
                            </li>
                            <li>
                              <button type="button" class="Polaris-ActionList__Item">
                                <span class="Polaris-ActionList__Content"
                                  ><span class="Polaris-ActionList__Text"
                                    >Community forums</span
                                  ></span
                                >
                              </button>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="Polaris-TopBar__SecondaryMenu">
              <div>
                <div class="Polaris-TopBar-Menu__ActivatorWrapper">
                  <button
                    type="button"
                    class="Polaris-TopBar-Menu__Activator"
                    tabindex="0"
                    aria-controls="Polarispopover1"
                    aria-owns="Polarispopover1"
                    aria-expanded="false"
                  >
                    <span
                      ><span class="Polaris-Icon"
                        ><span class="Polaris-VisuallyHidden"></span
                        ><svg
                          viewBox="0 0 20 20"
                          class="Polaris-Icon__Svg"
                          focusable="false"
                          aria-hidden="true"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M0 10C0 4.478 4.478 0 10 0c5.523 0 10 4.478 10 10 0 5.523-4.477 10-10 10-5.522 0-10-4.477-10-10zm11.125 2.002H8.989v-.141c.01-1.966.492-2.254 1.374-2.782.093-.056.19-.114.293-.178.73-.459 1.292-1.038 1.292-1.883 0-.948-.743-1.564-1.666-1.564-.851 0-1.657.398-1.712 1.533H6.304C6.364 4.693 8.18 3.5 10.294 3.5c2.306 0 3.894 1.447 3.894 3.488 0 1.382-.695 2.288-1.805 2.952l-.238.144c-.79.475-1.009.607-1.02 1.777V12zm.17 3.012a1.344 1.344 0 0 1-1.327 1.328 1.32 1.32 0 0 1-1.328-1.328 1.318 1.318 0 0 1 1.328-1.316c.712 0 1.322.592 1.328 1.316z"
                          ></path></svg></span
                      ><span class="Polaris-VisuallyHidden">Secondary menu</span></span
                    >
                  </button>
                </div>
              </div>
            </div>
            <div>
              <div class="Polaris-TopBar-Menu__ActivatorWrapper">
                <button
                  type="button"
                  class="Polaris-TopBar-Menu__Activator"
                  tabindex="0"
                  aria-controls="Polarispopover2"
                  aria-owns="Polarispopover2"
                  aria-expanded="false"
                >
                  <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
                    <span
                      aria-label="Avatar with initials D"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeSmall Polaris-Avatar--styleFour"
                      ><span class="Polaris-Avatar__Initials"
                        ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                          <text
                            x="50%"
                            y="50%"
                            dy="0.35em"
                            fill="currentColor"
                            font-size="20"
                            text-anchor="middle"
                          >
                            D
                          </text>
                        </svg></span
                      ></span
                    >
                  </div>
                  <span class="Polaris-TopBar-UserMenu__Details">
                    <p class="Polaris-TopBar-UserMenu__Name">Dharma</p>
                    <p class="Polaris-TopBar-UserMenu__Detail">Jaded Pixel</p>
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Frame__ContextualSaveBar Polaris-Frame-CSSAnimation--startFade"></div>
      <main class="Polaris-Frame__Main" id="AppFrameMain" data-has-global-ribbon="false">
        <div class="Polaris-Frame__Content"></div>
      </main>
    </div>
    <div id="PolarisPortalsContainer">
      <div data-portal-id="popover-Polarisportal2"></div>
      <div data-portal-id="popover-Polarisportal3"></div>
      <div data-portal-id="Polarisportal1">
        <div class="Polaris-Frame-ToastManager" aria-live="assertive"></div>
      </div>
    </div>
  </div>
</div>
,,
<div class="Polaris-Frame-ToastManager" aria-live="assertive"></div>

Top bar themed with colorsScheme

トップバーのテーマに特定のキーとそれに対応する色を与えることで、より細かい制御が可能になります。背景だけではなく、すべてのキーを提供することで、デフォルトの色に戻らないようにする必要があります。

Image from Gyazo

React
function TopBarExample() {
  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false)
  const [isSearchActive, setIsSearchActive] = useState(false)
  const [searchValue, setSearchValue] = useState("")
  const [isDarkTheme, setIsDarkTheme] = useState(false)

  const toggleIsUserMenuOpen = useCallback(
    () => setIsUserMenuOpen((isUserMenuOpen) => !isUserMenuOpen),
    []
  )

  const handleThemeChange = useCallback(() => setIsDarkTheme((isDarkTheme) => !isDarkTheme), [])

  const handleSearchResultsDismiss = useCallback(() => {
    setIsSearchActive(false)
    setSearchValue("")
  }, [])

  const handleSearchChange = useCallback((value) => {
    setSearchValue(value)
    setIsSearchActive(value.length > 0)
  }, [])

  const handleNavigationToggle = useCallback(() => {
    console.log("toggle navigation visibility")
  }, [])

  const theme = {
    colors: {
      surface: "#FFFFFF",
      onsurface: "#212B36",
    },
    colorScheme: isDarkTheme ? "dark" : "light",
    logo: {
      width: 124,
      topBarSource: `data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 446 92.6' fill='%23${
        isDarkTheme ? "fff" : "000"
      }'%3E%3Cpath d='M112.2 51.6c-2.8-1.5-4.2-2.8-4.2-4.5 0-2.2 2-3.7 5.1-3.7 3.6 0 6.9 1.5 6.9 1.5l2.5-7.8s-2.3-1.8-9.2-1.8c-9.6 0-16.3 5.5-16.3 13.2 0 4.4 3.1 7.7 7.3 10.1 3.3 1.9 4.5 3.3 4.5 5.3 0 2.1-1.7 3.7-4.8 3.7-4.6 0-9-2.4-9-2.4L92.3 73s4 2.7 10.8 2.7c9.9 0 17-4.9 17-13.6 0-4.7-3.6-8-7.9-10.5zM151.5 35.2c-4.9 0-8.7 2.3-11.6 5.8l-.2-.1 4.2-22.1h-11L122.3 75h11l3.7-19.2c1.4-7.3 5.2-11.7 8.7-11.7 2.5 0 3.4 1.7 3.4 4.1 0 1.5-.2 3.3-.5 4.9l-4.1 22h11l4.3-22.7c.5-2.4.8-5.3.8-7.2-.1-6.3-3.3-10-9.1-10zM185.4 35.2c-13.2 0-22 12-22 25.3 0 8.5 5.3 15.4 15.1 15.4 13 0 21.8-11.6 21.8-25.3 0-7.9-4.6-15.4-14.9-15.4zM180 67.4c-3.7 0-5.3-3.2-5.3-7.2 0-6.3 3.3-16.6 9.2-16.6 3.9 0 5.2 3.3 5.2 6.6 0 6.8-3.3 17.2-9.1 17.2zM228.4 35.2c-7.4 0-11.6 6.5-11.6 6.5h-.2l.6-5.9h-9.7c-.5 4-1.4 10-2.2 14.6l-7.6 40.2h11l3-16.3h.2s2.3 1.4 6.5 1.4c12.9 0 21.4-13.2 21.4-26.6 0-7.3-3.3-13.9-11.4-13.9zm-10.5 32.3c-2.9 0-4.5-1.6-4.5-1.6l1.8-10.3c1.3-6.9 4.9-11.4 8.7-11.4 3.3 0 4.4 3.1 4.4 6.1 0 7.1-4.2 17.2-10.4 17.2zM255.5 19.4c-3.5 0-6.3 2.8-6.3 6.4 0 3.3 2.1 5.5 5.2 5.5h.2c3.4 0 6.4-2.3 6.5-6.4-.2-3.2-2.3-5.5-5.6-5.5zM240.1 75h11l7.5-38.9h-11.1zM286.5 36h-7.6l.4-1.8c.6-3.7 2.9-7.1 6.5-7.1 2 0 3.5.6 3.5.6l2.2-8.6s-1.9-1-6-1c-3.9 0-7.8 1.1-10.8 3.7-3.7 3.2-5.5 7.8-6.4 12.4L268 36h-5.1l-1.6 8.3h5.1L260.6 75h11l5.8-30.8h7.6l1.5-8.2zM313 36.1s-6.9 17.3-10 26.8h-.2c-.2-3-2.7-26.8-2.7-26.8h-11.6l6.6 35.8c.2.8.1 1.3-.2 1.8-1.3 2.5-3.4 4.9-6 6.6-2.1 1.5-4.4 2.5-6.2 3.1l3 9.3c2.2-.5 6.9-2.3 10.8-6 5-4.7 9.6-12 14.4-21.8l13.5-28.8H313zM54.3 10.8s-1 .3-2.7.8c-.3-.9-.7-2-1.3-3.2-1.9-3.6-4.7-5.6-8.1-5.6h-.7c-.1-.1-.2-.2-.3-.4C39.7.8 37.8.1 35.6.1 31.2.2 26.9 3.4 23.4 9c-2.5 3.9-4.4 8.9-4.9 12.7-5 1.6-8.5 2.6-8.6 2.7-2.5.8-2.6.9-2.9 3.3-.3 1.8-6.9 53-6.9 53l55 9.5V10.7c-.4 0-.7.1-.8.1zm-12.7 3.9c-2.9.9-6.1 1.9-9.3 2.9.9-3.4 2.6-6.8 4.7-9.1.8-.8 1.9-1.8 3.1-2.3 1.3 2.5 1.5 6.1 1.5 8.5zM35.7 3.2c1 0 1.9.2 2.6.7-1.2.6-2.3 1.5-3.4 2.6-2.8 3-4.9 7.6-5.7 12.1-2.6.8-5.2 1.6-7.6 2.4C23 13.9 28.9 3.4 35.7 3.2zm-8.5 40c.3 4.7 12.6 5.7 13.3 16.6.5 8.6-4.6 14.5-11.9 15-8.8.6-13.7-4.7-13.7-4.7l1.9-8s4.9 3.7 8.8 3.4c2.6-.2 3.5-2.2 3.4-3.7-.4-6.1-10.4-5.7-11-15.8-.5-8.4 5-17 17.2-17.8 4.7-.3 7.1.9 7.1.9l-2.8 10.5s-3.1-1.4-6.8-1.2c-5.5.5-5.6 3.9-5.5 4.8zm17.3-29.4c0-2.2-.3-5.3-1.3-7.9 3.3.6 4.9 4.4 5.6 6.6-1.3.4-2.7.8-4.3 1.3zm12.3 76.3l22.8-5.7S69.8 18 69.7 17.6c-.1-.5-.5-.7-.8-.7-.3 0-6.7-.1-6.7-.1s-3.9-3.8-5.4-5.2v78.5zM347.7 35.4c-5.7 0-10.3 2-13.6 5.8l.6-3.3c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9L321 88.7c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l3.6-18.9c1.3 2.4 4.4 5.7 11.4 5.7 5.5 0 10-1.7 13.6-5 3.7-3.4 6.2-8.5 7.5-15.1 1.3-6.6.7-11.7-1.7-15.1-2.2-3.2-6.1-4.9-11.6-4.9zm-7 36.6c-8.3 0-11.6-5.7-9.5-16.5 2.1-10.9 7.4-16.5 15.6-16.5 9 0 12.4 5.4 10.2 16.5-2.1 11.2-7.3 16.5-16.3 16.5zm91.6-18.7c-4.9-1.8-9.6-3.5-8.7-8.1.4-2.3 2.3-6.2 9.9-6.2 4.2 0 6.9 1.2 9.2 4 .4.5.9.5 1.1.5 1 0 1.9-.8 2.1-1.8.1-.5 0-.8-.2-1.2-2.4-3.4-6.2-5.1-11.6-5.1-7.7 0-13.3 3.7-14.4 9.7-1.4 7.2 5 9.6 10.6 11.7 4.9 1.8 9.4 3.6 8.6 8-1.2 6.2-7.7 7.1-11.5 7.1-5.2 0-8.4-1.4-10.8-4.7-.3-.4-.7-.5-1.1-.5-.9 0-1.9.7-2.1 1.8-.1.5 0 .8.2 1.2 1.6 2.9 6.2 5.8 13.1 5.8 8.8 0 14.8-4 16.1-10.7 1.4-7.1-4.9-9.5-10.5-11.5zm-11.8-28h-4.1l.8-4.1c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9l-.8 4.1h-4.1c-1.1 0-2.1.9-2.3 1.9-.2 1.1.5 1.9 1.6 1.9h4.1l-.8 4.1c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l.8-4.1h4.1c1.1 0 2.1-.9 2.3-1.9.2-1-.5-1.9-1.6-1.9zm-9 14.3c-1.1 0-2.1.9-2.3 1.9l-3.7 19.3c-2 9.8-8.1 11.2-13.7 11.2-10.2 0-10.4-5.8-9.4-11.5l4.4-22.7c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9l-4.4 22.7c-.9 4.6-.6 8 1 10.4 1.9 3.1 5.8 4.6 11.6 4.6s10.3-1.6 13.4-4.6c2.5-2.4 4.1-5.9 5-10.4l3.7-19c.1-1-.6-1.9-1.7-1.9zm-35.1-20.2c-1.1 0-2.1.9-2.3 1.9l-10 51.8c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l10-51.8c.2-1-.5-1.9-1.6-1.9z'/%3E%3C/svg%3E`,
      url: "https://plus.shopify.com",
      accessibilityLabel: "Shopify Plus",
    },
  }

  const userMenuMarkup = (
    <TopBar.UserMenu
      actions={[
        {
          items: [{ content: "Back to Shopify Plus", icon: ArrowLeftMinor }],
        },
        {
          items: [{ content: "Community forums" }],
        },
      ]}
      name="Scott"
      detail="Snow Devil"
      initials="S"
      open={isUserMenuOpen}
      onToggle={toggleIsUserMenuOpen}
    />
  )

  const searchResultsMarkup = (
    <ActionList items={[{ content: "Shopify help center" }, { content: "Community forums" }]} />
  )

  const searchFieldMarkup = (
    <TopBar.SearchField
      onChange={handleSearchChange}
      value={searchValue}
      placeholder="Search"
      showFocusBorder
    />
  )

  const topBarMarkup = (
    <TopBar
      showNavigationToggle
      userMenu={userMenuMarkup}
      searchResultsVisible={isSearchActive}
      searchField={searchFieldMarkup}
      searchResults={searchResultsMarkup}
      onSearchResultsDismiss={handleSearchResultsDismiss}
      onNavigationToggle={handleNavigationToggle}
    />
  )

  return (
    <div style={{ height: "250px" }}>
      <AppProvider
        theme={theme}
        i18n={{
          Polaris: {
            Avatar: {
              label: "Avatar",
              labelWithInitials: "Avatar with initials {initials}",
            },
            Frame: { skipToContent: "Skip to content" },
            TopBar: {
              toggleMenuLabel: "Toggle menu",
              SearchField: {
                clearButtonLabel: "Clear",
                search: "Search",
              },
            },
          },
        }}
      >
        <Frame topBar={topBarMarkup}>
          <Button onClick={handleThemeChange}>Toggle between dark and light themes</Button>
        </Frame>
      </AppProvider>
    </div>
  )
}
HTML
<div>
  <div
    style='--p-background:rgba(246, 246, 246, 1); --p-background-hovered:rgba(242, 242, 242, 1); --p-background-pressed:rgba(238, 238, 238, 1); --p-background-selected:rgba(238, 238, 238, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(229, 229, 229, 1); --p-surface-neutral-hovered:rgba(221, 221, 221, 1); --p-surface-neutral-pressed:rgba(204, 204, 204, 1); --p-surface-neutral-disabled:rgba(242, 242, 242, 1); --p-surface-neutral-subdued:rgba(246, 246, 246, 1); --p-surface-subdued:rgba(251, 251, 251, 1); --p-surface-disabled:rgba(251, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 246, 1); --p-surface-pressed:rgba(242, 242, 242, 1); --p-surface-depressed:rgba(238, 238, 238, 1); --p-surface-search-field:rgba(242, 242, 242, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px;'
  >
    <div class="Polaris-Frame Polaris-Frame--hasTopBar" data-polaris-layer="true">
      <div class="Polaris-Frame__Skip"><a href="#AppFrameMain">Skip to content</a></div>
      <div
        class="Polaris-Frame__TopBar"
        data-polaris-layer="true"
        data-polaris-top-bar="true"
        id="AppFrameTopBar"
      >
        <div class="Polaris-TopBar">
          <button type="button" class="Polaris-TopBar__NavigationIcon" aria-label="Toggle menu">
            <span class="Polaris-Icon"
              ><span class="Polaris-VisuallyHidden"></span
              ><svg
                viewBox="0 0 20 20"
                class="Polaris-Icon__Svg"
                focusable="false"
                aria-hidden="true"
              >
                <path
                  d="M19 11H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7H1a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14H1a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z"
                ></path></svg
            ></span>
          </button>
          <div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
            <a
              class="Polaris-TopBar__LogoLink"
              href="https://plus.shopify.com"
              data-polaris-unstyled="true"
              style="width: 124px;"
              ><img
                src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 446 92.6' fill='%23000'%3E%3Cpath d='M112.2 51.6c-2.8-1.5-4.2-2.8-4.2-4.5 0-2.2 2-3.7 5.1-3.7 3.6 0 6.9 1.5 6.9 1.5l2.5-7.8s-2.3-1.8-9.2-1.8c-9.6 0-16.3 5.5-16.3 13.2 0 4.4 3.1 7.7 7.3 10.1 3.3 1.9 4.5 3.3 4.5 5.3 0 2.1-1.7 3.7-4.8 3.7-4.6 0-9-2.4-9-2.4L92.3 73s4 2.7 10.8 2.7c9.9 0 17-4.9 17-13.6 0-4.7-3.6-8-7.9-10.5zM151.5 35.2c-4.9 0-8.7 2.3-11.6 5.8l-.2-.1 4.2-22.1h-11L122.3 75h11l3.7-19.2c1.4-7.3 5.2-11.7 8.7-11.7 2.5 0 3.4 1.7 3.4 4.1 0 1.5-.2 3.3-.5 4.9l-4.1 22h11l4.3-22.7c.5-2.4.8-5.3.8-7.2-.1-6.3-3.3-10-9.1-10zM185.4 35.2c-13.2 0-22 12-22 25.3 0 8.5 5.3 15.4 15.1 15.4 13 0 21.8-11.6 21.8-25.3 0-7.9-4.6-15.4-14.9-15.4zM180 67.4c-3.7 0-5.3-3.2-5.3-7.2 0-6.3 3.3-16.6 9.2-16.6 3.9 0 5.2 3.3 5.2 6.6 0 6.8-3.3 17.2-9.1 17.2zM228.4 35.2c-7.4 0-11.6 6.5-11.6 6.5h-.2l.6-5.9h-9.7c-.5 4-1.4 10-2.2 14.6l-7.6 40.2h11l3-16.3h.2s2.3 1.4 6.5 1.4c12.9 0 21.4-13.2 21.4-26.6 0-7.3-3.3-13.9-11.4-13.9zm-10.5 32.3c-2.9 0-4.5-1.6-4.5-1.6l1.8-10.3c1.3-6.9 4.9-11.4 8.7-11.4 3.3 0 4.4 3.1 4.4 6.1 0 7.1-4.2 17.2-10.4 17.2zM255.5 19.4c-3.5 0-6.3 2.8-6.3 6.4 0 3.3 2.1 5.5 5.2 5.5h.2c3.4 0 6.4-2.3 6.5-6.4-.2-3.2-2.3-5.5-5.6-5.5zM240.1 75h11l7.5-38.9h-11.1zM286.5 36h-7.6l.4-1.8c.6-3.7 2.9-7.1 6.5-7.1 2 0 3.5.6 3.5.6l2.2-8.6s-1.9-1-6-1c-3.9 0-7.8 1.1-10.8 3.7-3.7 3.2-5.5 7.8-6.4 12.4L268 36h-5.1l-1.6 8.3h5.1L260.6 75h11l5.8-30.8h7.6l1.5-8.2zM313 36.1s-6.9 17.3-10 26.8h-.2c-.2-3-2.7-26.8-2.7-26.8h-11.6l6.6 35.8c.2.8.1 1.3-.2 1.8-1.3 2.5-3.4 4.9-6 6.6-2.1 1.5-4.4 2.5-6.2 3.1l3 9.3c2.2-.5 6.9-2.3 10.8-6 5-4.7 9.6-12 14.4-21.8l13.5-28.8H313zM54.3 10.8s-1 .3-2.7.8c-.3-.9-.7-2-1.3-3.2-1.9-3.6-4.7-5.6-8.1-5.6h-.7c-.1-.1-.2-.2-.3-.4C39.7.8 37.8.1 35.6.1 31.2.2 26.9 3.4 23.4 9c-2.5 3.9-4.4 8.9-4.9 12.7-5 1.6-8.5 2.6-8.6 2.7-2.5.8-2.6.9-2.9 3.3-.3 1.8-6.9 53-6.9 53l55 9.5V10.7c-.4 0-.7.1-.8.1zm-12.7 3.9c-2.9.9-6.1 1.9-9.3 2.9.9-3.4 2.6-6.8 4.7-9.1.8-.8 1.9-1.8 3.1-2.3 1.3 2.5 1.5 6.1 1.5 8.5zM35.7 3.2c1 0 1.9.2 2.6.7-1.2.6-2.3 1.5-3.4 2.6-2.8 3-4.9 7.6-5.7 12.1-2.6.8-5.2 1.6-7.6 2.4C23 13.9 28.9 3.4 35.7 3.2zm-8.5 40c.3 4.7 12.6 5.7 13.3 16.6.5 8.6-4.6 14.5-11.9 15-8.8.6-13.7-4.7-13.7-4.7l1.9-8s4.9 3.7 8.8 3.4c2.6-.2 3.5-2.2 3.4-3.7-.4-6.1-10.4-5.7-11-15.8-.5-8.4 5-17 17.2-17.8 4.7-.3 7.1.9 7.1.9l-2.8 10.5s-3.1-1.4-6.8-1.2c-5.5.5-5.6 3.9-5.5 4.8zm17.3-29.4c0-2.2-.3-5.3-1.3-7.9 3.3.6 4.9 4.4 5.6 6.6-1.3.4-2.7.8-4.3 1.3zm12.3 76.3l22.8-5.7S69.8 18 69.7 17.6c-.1-.5-.5-.7-.8-.7-.3 0-6.7-.1-6.7-.1s-3.9-3.8-5.4-5.2v78.5zM347.7 35.4c-5.7 0-10.3 2-13.6 5.8l.6-3.3c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9L321 88.7c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l3.6-18.9c1.3 2.4 4.4 5.7 11.4 5.7 5.5 0 10-1.7 13.6-5 3.7-3.4 6.2-8.5 7.5-15.1 1.3-6.6.7-11.7-1.7-15.1-2.2-3.2-6.1-4.9-11.6-4.9zm-7 36.6c-8.3 0-11.6-5.7-9.5-16.5 2.1-10.9 7.4-16.5 15.6-16.5 9 0 12.4 5.4 10.2 16.5-2.1 11.2-7.3 16.5-16.3 16.5zm91.6-18.7c-4.9-1.8-9.6-3.5-8.7-8.1.4-2.3 2.3-6.2 9.9-6.2 4.2 0 6.9 1.2 9.2 4 .4.5.9.5 1.1.5 1 0 1.9-.8 2.1-1.8.1-.5 0-.8-.2-1.2-2.4-3.4-6.2-5.1-11.6-5.1-7.7 0-13.3 3.7-14.4 9.7-1.4 7.2 5 9.6 10.6 11.7 4.9 1.8 9.4 3.6 8.6 8-1.2 6.2-7.7 7.1-11.5 7.1-5.2 0-8.4-1.4-10.8-4.7-.3-.4-.7-.5-1.1-.5-.9 0-1.9.7-2.1 1.8-.1.5 0 .8.2 1.2 1.6 2.9 6.2 5.8 13.1 5.8 8.8 0 14.8-4 16.1-10.7 1.4-7.1-4.9-9.5-10.5-11.5zm-11.8-28h-4.1l.8-4.1c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9l-.8 4.1h-4.1c-1.1 0-2.1.9-2.3 1.9-.2 1.1.5 1.9 1.6 1.9h4.1l-.8 4.1c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l.8-4.1h4.1c1.1 0 2.1-.9 2.3-1.9.2-1-.5-1.9-1.6-1.9zm-9 14.3c-1.1 0-2.1.9-2.3 1.9l-3.7 19.3c-2 9.8-8.1 11.2-13.7 11.2-10.2 0-10.4-5.8-9.4-11.5l4.4-22.7c.2-1.1-.5-1.9-1.6-1.9s-2.1.9-2.3 1.9l-4.4 22.7c-.9 4.6-.6 8 1 10.4 1.9 3.1 5.8 4.6 11.6 4.6s10.3-1.6 13.4-4.6c2.5-2.4 4.1-5.9 5-10.4l3.7-19c.1-1-.6-1.9-1.7-1.9zm-35.1-20.2c-1.1 0-2.1.9-2.3 1.9l-10 51.8c-.2 1.1.5 1.9 1.6 1.9s2.1-.9 2.3-1.9l10-51.8c.2-1-.5-1.9-1.6-1.9z'/%3E%3C/svg%3E"
                alt="Shopify Plus"
                class="Polaris-TopBar__Logo"
                style="width: 124px;"
            /></a>
          </div>
          <div class="Polaris-TopBar__Contents">
            <div class="Polaris-TopBar__SearchField">
              <div class="Polaris-TopBar-SearchField">
                <span class="Polaris-VisuallyHidden"
                  ><label for="PolarisSearchField1">Search</label></span
                ><input
                  id="PolarisSearchField1"
                  class="Polaris-TopBar-SearchField__Input"
                  placeholder="Search"
                  type="search"
                  autocapitalize="off"
                  autocomplete="off"
                  autocorrect="off"
                  value=""
                /><span class="Polaris-TopBar-SearchField__Icon"
                  ><span class="Polaris-Icon"
                    ><span class="Polaris-VisuallyHidden"></span
                    ><svg
                      viewBox="0 0 20 20"
                      class="Polaris-Icon__Svg"
                      focusable="false"
                      aria-hidden="true"
                    >
                      <path
                        d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
                      ></path></svg></span
                ></span>
                <div
                  class="Polaris-TopBar-SearchField__Backdrop Polaris-TopBar-SearchField__BackdropShowFocusBorder"
                ></div>
              </div>
              <div class="Polaris-TopBar-Search">
                <div
                  style='--p-background:rgba(12, 12, 12, 1); --p-background-hovered:rgba(12, 12, 12, 1); --p-background-pressed:rgba(12, 12, 12, 1); --p-background-selected:rgba(12, 12, 12, 1); --p-surface:rgba(33, 33, 33, 1); --p-surface-neutral:rgba(50, 50, 50, 1); --p-surface-neutral-hovered:rgba(50, 50, 50, 1); --p-surface-neutral-pressed:rgba(50, 50, 50, 1); --p-surface-neutral-disabled:rgba(50, 50, 50, 1); --p-surface-neutral-subdued:rgba(71, 71, 71, 1); --p-surface-subdued:rgba(27, 27, 27, 1); --p-surface-disabled:rgba(27, 27, 27, 1); --p-surface-hovered:rgba(48, 48, 48, 1); --p-surface-pressed:rgba(64, 64, 64, 1); --p-surface-depressed:rgba(82, 82, 82, 1); --p-surface-search-field:rgba(48, 48, 48, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(33, 33, 33, 0.5); --p-shadow-from-dim-light:rgba(255, 255, 255, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(255, 255, 255, 0.15); --p-hint-from-direct-light:rgba(185, 185, 185, 0.2); --p-border:rgba(80, 83, 86, 1); --p-border-neutral-subdued:rgba(130, 135, 139, 1); --p-border-hovered:rgba(80, 83, 86, 1); --p-border-disabled:rgba(103, 107, 111, 1); --p-border-subdued:rgba(130, 135, 139, 1); --p-border-depressed:rgba(142, 145, 145, 1); --p-border-shadow:rgba(91, 95, 98, 1); --p-border-shadow-subdued:rgba(130, 135, 139, 1); --p-divider:rgba(69, 71, 73, 1); --p-icon:rgba(166, 172, 178, 1); --p-icon-hovered:rgba(225, 227, 229, 1); --p-icon-pressed:rgba(166, 172, 178, 1); --p-icon-disabled:rgba(84, 87, 90, 1); --p-icon-subdued:rgba(120, 125, 129, 1); --p-text:rgba(227, 229, 231, 1); --p-text-disabled:rgba(111, 115, 119, 1); --p-text-subdued:rgba(153, 159, 164, 1); --p-interactive:rgba(54, 163, 255, 1); --p-interactive-disabled:rgba(38, 98, 182, 1); --p-interactive-hovered:rgba(103, 175, 255, 1); --p-interactive-pressed:rgba(136, 188, 255, 1); --p-icon-interactive:rgba(54, 163, 255, 1); --p-focused:rgba(38, 98, 182, 1); --p-surface-selected:rgba(2, 14, 35, 1); --p-surface-selected-hovered:rgba(7, 29, 61, 1); --p-surface-selected-pressed:rgba(13, 43, 86, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(77, 80, 83, 1); --p-action-secondary-disabled:rgba(32, 34, 35, 1); --p-action-secondary-hovered:rgba(84, 87, 91, 1); --p-action-secondary-pressed:rgba(96, 100, 103, 1); --p-action-secondary-depressed:rgba(123, 127, 132, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(0, 86, 64, 1); --p-action-primary-hovered:rgba(0, 150, 113, 1); --p-action-primary-pressed:rgba(0, 164, 124, 1); --p-action-primary-depressed:rgba(0, 179, 136, 1); --p-icon-on-primary:rgba(230, 255, 244, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 141, 106, 1); --p-text-primary-hovered:rgba(0, 158, 120, 1); --p-text-primary-pressed:rgba(0, 176, 133, 1); --p-surface-primary-selected:rgba(12, 18, 16, 1); --p-surface-primary-selected-hovered:rgba(40, 48, 44, 1); --p-surface-primary-selected-pressed:rgba(54, 64, 59, 1); --p-border-critical:rgba(227, 47, 14, 1); --p-border-critical-subdued:rgba(227, 47, 14, 1); --p-border-critical-disabled:rgba(131, 23, 4, 1); --p-icon-critical:rgba(218, 45, 13, 1); --p-surface-critical:rgba(69, 7, 1, 1); --p-surface-critical-subdued:rgba(69, 7, 1, 1); --p-surface-critical-subdued-hovered:rgba(68, 23, 20, 1); --p-surface-critical-subdued-pressed:rgba(107, 16, 3, 1); --p-surface-critical-subdued-depressed:rgba(135, 24, 5, 1); --p-text-critical:rgba(233, 128, 122, 1); --p-action-critical:rgba(205, 41, 12, 1); --p-action-critical-disabled:rgba(187, 37, 10, 1); --p-action-critical-hovered:rgba(227, 47, 14, 1); --p-action-critical-pressed:rgba(250, 53, 17, 1); --p-action-critical-depressed:rgba(253, 87, 73, 1); --p-icon-on-critical:rgba(255, 248, 247, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(253, 114, 106, 1); --p-interactive-critical-disabled:rgba(254, 172, 168, 1); --p-interactive-critical-hovered:rgba(253, 138, 132, 1); --p-interactive-critical-pressed:rgba(253, 159, 155, 1); --p-border-warning:rgba(153, 112, 0, 1); --p-border-warning-subdued:rgba(153, 112, 0, 1); --p-icon-warning:rgba(104, 75, 0, 1); --p-surface-warning:rgba(153, 112, 0, 1); --p-surface-warning-subdued:rgba(77, 59, 29, 1); --p-surface-warning-subdued-hovered:rgba(82, 63, 32, 1); --p-surface-warning-subdued-pressed:rgba(87, 67, 34, 1); --p-text-warning:rgba(202, 149, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(68, 157, 167, 1); --p-icon-highlight:rgba(44, 108, 115, 1); --p-surface-highlight:rgba(0, 105, 113, 1); --p-surface-highlight-subdued:rgba(18, 53, 57, 1); --p-surface-highlight-subdued-hovered:rgba(20, 58, 62, 1); --p-surface-highlight-subdued-pressed:rgba(24, 65, 70, 1); --p-text-highlight:rgba(162, 239, 250, 1); --p-border-success:rgba(0, 135, 102, 1); --p-border-success-subdued:rgba(0, 135, 102, 1); --p-icon-success:rgba(0, 94, 70, 1); --p-surface-success:rgba(0, 94, 70, 1); --p-surface-success-subdued:rgba(28, 53, 44, 1); --p-surface-success-subdued-hovered:rgba(31, 58, 48, 1); --p-surface-success-subdued-pressed:rgba(35, 65, 54, 1); --p-text-success:rgba(88, 173, 142, 1); --p-decorative-one-icon:rgba(255, 186, 67, 1); --p-decorative-one-surface:rgba(142, 102, 9, 1); --p-decorative-one-text:rgba(255, 255, 255, 1); --p-decorative-two-icon:rgba(245, 182, 192, 1); --p-decorative-two-surface:rgba(206, 88, 20, 1); --p-decorative-two-text:rgba(255, 255, 255, 1); --p-decorative-three-icon:rgba(0, 227, 141, 1); --p-decorative-three-surface:rgba(0, 124, 90, 1); --p-decorative-three-text:rgba(255, 255, 255, 1); --p-decorative-four-icon:rgba(0, 221, 218, 1); --p-decorative-four-surface:rgba(22, 124, 121, 1); --p-decorative-four-text:rgba(255, 255, 255, 1); --p-decorative-five-icon:rgba(244, 183, 191, 1); --p-decorative-five-surface:rgba(194, 51, 86, 1); --p-decorative-five-text:rgba(255, 255, 255, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(227, 229, 231);'
                >
                  <div class="Polaris-TopBar-Search__SearchContent">
                    <div class="Polaris-TopBar-Search__Results">
                      <div class="Polaris-ActionList">
                        <div class="Polaris-ActionList__Section--withoutTitle">
                          <ul class="Polaris-ActionList__Actions">
                            <li>
                              <button type="button" class="Polaris-ActionList__Item">
                                <span class="Polaris-ActionList__Content"
                                  ><span class="Polaris-ActionList__Text"
                                    >Shopify help center</span
                                  ></span
                                >
                              </button>
                            </li>
                            <li>
                              <button type="button" class="Polaris-ActionList__Item">
                                <span class="Polaris-ActionList__Content"
                                  ><span class="Polaris-ActionList__Text"
                                    >Community forums</span
                                  ></span
                                >
                              </button>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="Polaris-TopBar__SecondaryMenu"></div>
            <div>
              <div class="Polaris-TopBar-Menu__ActivatorWrapper">
                <button
                  type="button"
                  class="Polaris-TopBar-Menu__Activator"
                  tabindex="0"
                  aria-controls="Polarispopover1"
                  aria-owns="Polarispopover1"
                  aria-expanded="false"
                >
                  <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
                    <span
                      aria-label="Avatar with initials S"
                      role="img"
                      class="Polaris-Avatar Polaris-Avatar--sizeSmall Polaris-Avatar--styleFour"
                      ><span class="Polaris-Avatar__Initials"
                        ><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
                          <text
                            x="50%"
                            y="50%"
                            dy="0.35em"
                            fill="currentColor"
                            font-size="20"
                            text-anchor="middle"
                          >
                            S
                          </text>
                        </svg></span
                      ></span
                    >
                  </div>
                  <span class="Polaris-TopBar-UserMenu__Details">
                    <p class="Polaris-TopBar-UserMenu__Name">Scott</p>
                    <p class="Polaris-TopBar-UserMenu__Detail">Snow Devil</p>
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Frame__ContextualSaveBar Polaris-Frame-CSSAnimation--startFade"></div>
      <main class="Polaris-Frame__Main" id="AppFrameMain" data-has-global-ribbon="false">
        <div class="Polaris-Frame__Content">
          <button class="Polaris-Button" type="button">
            <span class="Polaris-Button__Content"
              ><span class="Polaris-Button__Text">Toggle between dark and light themes</span></span
            >
          </button>
        </div>
      </main>
    </div>
    <div id="PolarisPortalsContainer">
      <div data-portal-id="popover-Polarisportal2"></div>
      <div data-portal-id="Polarisportal1">
        <div class="Polaris-Frame-ToastManager" aria-live="assertive"></div>
      </div>
    </div>
  </div>
</div>
,
<div class="Polaris-Frame-ToastManager" aria-live="assertive"></div>

Props

contextControl
React.ReactNode
ユーザーが異なるコンテキストを切り替えるのを助けるために使用されるコンポーネントを受け入れます。

onSearchResultsDismiss
onDismiss
検索結果の棄却を処理するコールバック関数

searchField
React.ReactNode
トップバーコンポーネントのTextFieldスタティックメンバーとして利用可能になる検索フィールドコンポーネントを受け入れます。

searchResults
React.ReactNode
行動可能な検索結果のリストを含むカードコンポーネントで理想的に構成される検索結果コンポーネントを受け入れます。

searchResultsOverlayVisible
boolean
検索結果オーバーレイの背景が見えるかどうか。

searchResultsVisible
boolean
検索結果が現在表示されているかどうかを示す boolean プロパティ。

secondaryMenu
React.ReactNode
トップバーコンポーネントの静的メンバーとして利用可能になるメニューコンポーネントを受け入れる。

showNavigationToggle
boolean
ナビゲーションコンポーネントが提供されているかどうかをトグルする。モバイルナビのトグルボタンの存在を制御する。

userMenu
React.ReactNode
トップバーコンポーネントの静的メンバーとして利用可能になったユーザーコンポーネントを受け入れ、プライマリーメニューとしてレンダリングする。

onNavigationToggle
() => void
モバイルナビゲーションの非表示と表示を処理するコールバック関数です

必要なコンポーネント

トップバーコンポーネントをフレームコンポーネントに渡す必要があります。

ベストプラクティス

トップバーコンポーネントは

  • アプリケーションのグローバルナビゲーションを提供しない。
    • 代わりにナビゲーションコンポーネントを使用してください。
  • マーチャントがリソースを見つけたり、アプリケーションをナビゲートするのに役立つ検索を含める。
  • ログインしたマーチャントを示し、グローバルアクションを提供するために、ユーザーメニューコンポーネントを含める。
  • 背景のスタイルを決めるために、アプリ・プロバイダ・コンポーネントで色を提供する。
  • グローバルメニューのテキストは、トップバーの他の部分とコントラストをつけ、WCAG 2.0 ガイドラインの最小コントラスト比を満たすようにします。
  • ロゴには SVG ファイルを使用する
  • トップバーの背景色と比較して、WCAG 2.0 ガイドラインの最小コントラスト比を満たすロゴを使用する。
  • ナビゲーションのトグルを表示し、小さな画面でも表示されるようにする。

コンテンツに関するガイドライン

プレースホルダーコンテンツ

検索フィールドのプレースホルダーコンテンツは以下の通りです。

  • 常に "Search "と表示する
  • 省略記号を入れない

Image from Gyazo

トップバーメニュー

アクティベーターと、アクションリストを含むポップオーバーを組み合わせて、ドロップダウンメニューを作成するコンポーネントです。

メニューのプロパティ

プロップ タイプ 説明
activatorContent React.ReactNode メニューを開くボタンの中にレンダリングされるアクチベーターコンポーネントを受け入れます。
actions ActionListProps['section'] このメニューで起動されるポップオーバーの中でレンダリングされるアクションオブジェクトの配列です。
message MessageProps メニューを通じてマーチャントとの直接かつ緊急のコミュニケーションを容易にするメッセージを受け付ける。
open boolean メニューが現在開かれているかどうかを示す boolean プロパティです。
onOpen() function メニュー・ポップオーバを開くためのコールバック関数
onClose() function メニュー・ポップオーバーを閉じるためのコールバック関数

ユーザーのアバターによって起動される、特殊なメニューコンポーネントです。

メニューのプロパティ

プロップ タイプ 説明
アクション {items: IconableAction[]}[] このメニューによって引き起こされるポップオーバーの中でレンダリングされるアクションオブジェクトの配列
メッセージ メッセージプロップス ユーザーメニューを通じてマーチャントとの直接かつ緊急のコミュニケーションを可能にするメッセージを受け入れます。
name string ユーザーメニューに表示されるマーチャントのフルネームを示す文字列。
detail string ユーザーメニューに表示されるマーチャントの名前の詳細を許可する文字列。
initials AvatarProps['initials'] マーチャントのイニシャル、提供されていない場合はアバター画像の代わりにレンダリングされる
avatar AvatarProps['s source'] マーチャントを表すアバター画像。
open boolean ユーザーメニューが現在開かれているかどうかを示す boolean プロパティ
onToggle() function ユーザーメニューの開閉を処理するコールバック関数

トップバーメニューメッセージ

メッセージのプロパティ

プロップ タイプ 説明
title string メッセージのタイトル
description string メッセージの説明
action {onClick(): void; content: string} メッセージの近くに表示するアクション
link {to: string; content: string} メッセージの内容を見るためのリンク。
badge {content: string; status: BadgeProps['status']} メッセージの近くに表示されるバッジ

トップバー検索フィールド

検索の用途に合わせて作られたテキストフィールドコンポーネントです。

検索フィールドのプロパティ

プロップ タイプ 説明
value string 入力の初期値
placeholder string 表示するためのヒントテキスト
focused boolean 入力のフォーカス状態を強制します
active boolean 検索は有効だがテキストフィールドコンポーネントがフォーカスされていない状態を強制します。
onChange(value: string) function 値が変更された際のコールバック
onFocus() function 入力がフォーカスされたときのコールバック
onBlur() funciton フォーカスが外されたときのコールバック

関連コンポーネント

  • トップバーコンポーネントの構造と主要なナビゲーションを提供するには、フレームコンポーネントを使用します。
  • アプリケーションのフレーム内に主要なナビゲーションを表示するには、navigation コンポーネントを使用します。
  • マーチャントがページ上のフォームに変更を加えたときのオプションを伝えるには、contextual save bar コンポーネントを使用します。
  • アクションの結果をひと目でわかるように表示するには、トーストコンポーネントを使用します。
  • ページの読み込み中やアップロードの処理中をマーチャントに示すには、loading コンポーネントを使用します。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます