// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Text } from "@coreai-ds/react-components";
import * as React from 'react';

export const Foreground = () => {
    const styles = /* css */ `
    .text-foreground-example {
      display: flex;
      flex-direction: column;
      row-gap: var(--spacingVerticalS);
    }
  `;
    return (<>
      <style>{styles}</style>
      <div className="text-foreground-example">
        <Text foreground={1}>Foreground 1 — heading</Text>
        <Text foreground={2}>Foreground 2 — body (default)</Text>
        <Text foreground={3}>Foreground 3 — subtle</Text>
        <Text foreground={4}>Foreground 4 — muted</Text>
        <Text foreground={'disabled'}>Foreground Disabled — disabled</Text>
      </div>
    </>);
};

export default Foreground;