morten/morten-olsen.github.io
1
0
Fork 0
mirror of https://github.com/morten-olsen/morten-olsen.github.io.git synced 2026-02-08 01:46:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Morten Olsen
2023-03-28 08:10:46 +02:00
parent 9b1a067d56
commit 7adf03c83f
44 changed files with 1780 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
content/templates/react/typography/index.tsx
View File

@@ -1,49 +1,43 @@
import styled from "styled-components";
import { Theme, Typography } from "../theme";
import styled from 'styled-components';
import { Theme, Typography } from '../theme';
interface TextProps {
color?: keyof Theme["colors"];
color?: keyof Theme['colors'];
bold?: boolean;
theme: Theme;
}
const BaseText = styled.span<TextProps>`
${({ theme }) =>
theme.font.family ? `font-family: ${theme.font.family};` : ""}
color: ${({ color, theme }) =>
color ? theme.colors[color] : theme.colors.foreground};
font-weight: ${({ bold }) => (bold ? "bold" : "normal")};
${({ theme }) => (theme.font.family ? `font-family: ${theme.font.family};` : '')}
color: ${({ color, theme }) => (color ? theme.colors[color] : theme.colors.foreground)};
font-weight: ${({ bold }) => (bold ? 'bold' : 'normal')};
font-size: ${({ theme }) => theme.font.baseSize}px;
`;
const get = (name: keyof Theme["typography"], theme: Theme): Typography => {
const get = (name: keyof Theme['typography'], theme: Theme): Typography => {
const typography = theme.typography[name];
return typography;
};
const createTypography = (name: keyof Theme["typography"]) => {
const Component = styled(BaseText) <TextProps>`
font-size: ${({ theme }) =>
theme.font.baseSize * (get(name, theme).size || 1)}px;
const createTypography = (name: keyof Theme['typography']) => {
const Component = styled(BaseText)<TextProps>`
font-size: ${({ theme }) => theme.font.baseSize * (get(name, theme).size || 1)}px;
font-weight: ${({ bold, theme }) =>
typeof bold !== "undefined"
? "bold"
: get(name, theme).weight || "normal"};
${({ theme }) =>
get(name, theme).upperCase ? "text-transform: uppercase;" : ""}
typeof bold !== 'undefined' ? 'bold' : get(name, theme).weight || 'normal'};
${({ theme }) => (get(name, theme).upperCase ? 'text-transform: uppercase;' : '')}
`;
return Component;
};
const Jumbo = createTypography("Jumbo");
const Title2 = createTypography("Title2");
const Title1 = createTypography("Title1");
const Body1 = createTypography("Body1");
const Overline = createTypography("Overline");
const Caption = createTypography("Caption");
const Link = createTypography("Link");
const Jumbo = createTypography('Jumbo');
const Title2 = createTypography('Title2');
const Title1 = createTypography('Title1');
const Body1 = createTypography('Body1');
const Overline = createTypography('Overline');
const Caption = createTypography('Caption');
const Link = createTypography('Link');
const types: { [key in keyof Theme["typography"]]: typeof BaseText } = {
const types: { [key in keyof Theme['typography']]: typeof BaseText } = {
Jumbo,
Title2,
Title1,