import { html } from '@microsoft/fast-element';
export const DesignSystemPreviewContainerTemplate = html `
  <template>
    <alpha-tabs>
      <alpha-tab slot="tab">Components</alpha-tab>
      <alpha-tab slot="tab">Palettes</alpha-tab>
      <alpha-tab slot="tab">Typography</alpha-tab>
      <alpha-tab-panel slot="tabpanel">
        <design-system-preview></design-system-preview>
      </alpha-tab-panel>
      <alpha-tab-panel slot="tabpanel">
        <div class="wrapper">
          <h3>Accent</h3>
          <color-palette type="accent"></color-palette>
          <h3>Neutral</h3>
          <color-palette type="neutral"></color-palette>
        </div>
      </alpha-tab-panel>
      <alpha-tab-panel slot="tabpanel">
        <typography-tokens></typography-tokens>
      </alpha-tab-panel>
    </alpha-tabs>
  </template>
`;
