import React from "react";
import styled from "styled-components";
import {
  colorTokens,
  getTextSizes,
  textLevels,
} from "../../../design-system/tokens";
import { HeadingProps } from "./types";
import { HTag } from "./Heading";
export const StyledHeading = styled((props: HeadingProps) => (
  <HTag {...props} />
))`
  color: ${({ color }) => colorTokens[color || "text-default-color"]};
  ${({ type }) => getTextSizes(textLevels[type || "H1"])};
  margin-bottom: 0;
`;