HabitatMap/AirCasting

View on GitHub
app/javascript/react/components/Typography/Typography.style.tsx

Summary

Maintainability
A
2 hrs
Test Coverage
import styled from "styled-components";

const H1 = styled.h1`
  font-weight: 600;
  font-size: 28px;
`;

const H2 = styled.h2`
  font-weight: 600;
  font-size: 24px;
  text-transform: capitalize;
`;

const H3 = styled.h3<{ bold?: boolean }>`
  font-weight: ${(p) => (p.bold ? "600" : "400")};
  font-size: 18px;
`;

const H4 = styled.h4<{ bold?: boolean }>`
  font-weight: ${(p) => (p.bold ? "600" : "400")};
  font-size: 14px;
  letter-spacing: 0.14px;
`;

const H5 = styled.h5<{ bold?: boolean }>`
  font-weight: ${(p) => (p.bold ? "600" : "400")};
  font-size: 12px;
`;

const H6 = styled.h6<{ bold?: boolean; uppercase?: boolean }>`
  font-weight: ${(p) => (p.bold ? "500" : "400")};
  font-size: 10px;
  text-transform: ${(p) => (p.uppercase ? "uppercase" : "none")};
  letter-spacing: ${(p) => (p.uppercase ? "0.1px" : "normal")};
`;

export { H1, H2, H3, H4, H5, H6 };