From b1a92a2eab8cbedbd5a1e6cc6def92919a53cc11 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Thu, 7 Jul 2022 13:33:20 -0400 Subject: [PATCH] refactor component styles to use type-safe stitches tokens https://stitches.dev/docs/typescript#stricter-experience --- components/Blockquote/Blockquote.tsx | 6 +- components/Code/Code.tsx | 10 ++-- components/CodeBlock/CodeBlock.tsx | 34 +++++------ components/Comments/Comments.tsx | 4 +- components/ContactForm/ContactForm.tsx | 30 +++++----- components/Content/Content.tsx | 4 +- components/CopyButton/CopyButton.tsx | 8 +-- components/Figure/Figure.tsx | 4 +- components/Footer/Footer.tsx | 22 ++++---- components/Header/Header.tsx | 10 ++-- components/Heading/Heading.tsx | 8 +-- components/HorizontalRule/HorizontalRule.tsx | 4 +- components/IFrame/IFrame.tsx | 6 +- components/Image/Image.tsx | 4 +- components/Layout/Layout.tsx | 4 +- components/Link/Link.tsx | 10 ++-- components/Loading/Loading.tsx | 4 +- components/MenuItem/MenuItem.tsx | 8 +-- components/NoteMeta/NoteMeta.tsx | 6 +- components/NoteTitle/NoteTitle.tsx | 4 +- components/NotesList/NotesList.tsx | 4 +- components/OctocatLink/OctocatLink.tsx | 6 +- components/PageTitle/PageTitle.tsx | 4 +- components/RepositoryCard/RepositoryCard.tsx | 14 ++--- components/Selfie/Selfie.tsx | 25 +++------ components/SkipToContent/SkipToContent.tsx | 10 ++-- components/ThemeToggle/ThemeToggle.tsx | 6 +- components/Ukraine/Ukraine.tsx | 59 -------------------- components/Ukraine/index.ts | 2 - components/Video/Video.tsx | 4 +- components/YouTubeEmbed/YouTubeEmbed.tsx | 4 +- lib/styles/stitches.config.ts | 20 ++++--- pages/404.tsx | 4 +- pages/hillary.tsx | 4 +- pages/index.tsx | 10 ++-- pages/leo.tsx | 4 +- pages/previously.tsx | 4 +- pages/projects.tsx | 4 +- pages/stats.tsx | 4 +- pages/y2k.tsx | 11 ++++ 40 files changed, 170 insertions(+), 223 deletions(-) delete mode 100644 components/Ukraine/Ukraine.tsx delete mode 100644 components/Ukraine/index.ts diff --git a/components/Blockquote/Blockquote.tsx b/components/Blockquote/Blockquote.tsx index 75c730dd..edeceaf6 100644 --- a/components/Blockquote/Blockquote.tsx +++ b/components/Blockquote/Blockquote.tsx @@ -1,10 +1,10 @@ -import { styled } from "../../lib/styles/stitches.config"; +import { styled, theme } from "../../lib/styles/stitches.config"; const Blockquote = styled("blockquote", { marginLeft: 0, paddingLeft: "1.25em", - borderLeft: "0.25em solid $link", - color: "$mediumDark", + borderLeft: `0.25em solid ${theme.colors.link}`, + color: theme.colors.mediumDark, }); export default Blockquote; diff --git a/components/Code/Code.tsx b/components/Code/Code.tsx index 007c2ad9..c6131310 100644 --- a/components/Code/Code.tsx +++ b/components/Code/Code.tsx @@ -1,11 +1,11 @@ -import { styled } from "../../lib/styles/stitches.config"; +import { styled, theme } from "../../lib/styles/stitches.config"; const Code = styled("code", { fontSize: "0.925em", - backgroundColor: "$codeBackground", - border: "1px solid $kindaLight", - borderRadius: "$rounded", - transition: "background $fade, border $fade", + backgroundColor: theme.colors.codeBackground, + border: `1px solid ${theme.colors.kindaLight}`, + borderRadius: theme.radii.rounded, + transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`, }); export default Code; diff --git a/components/CodeBlock/CodeBlock.tsx b/components/CodeBlock/CodeBlock.tsx index c3e46594..554f5a05 100644 --- a/components/CodeBlock/CodeBlock.tsx +++ b/components/CodeBlock/CodeBlock.tsx @@ -1,13 +1,13 @@ import Code from "../Code"; import CopyButton from "../CopyButton"; -import { styled } from "../../lib/styles/stitches.config"; +import { styled, theme } from "../../lib/styles/stitches.config"; import type { ComponentProps } from "react"; const Block = styled("div", { position: "relative", width: "100%", margin: "1em auto", - color: "$codeText", + color: theme.colors.codeText, [`& ${Code}`]: { display: "block", @@ -21,7 +21,7 @@ const Block = styled("div", { width: "1.5em", marginRight: "1.5em", textAlign: "right", - color: "$codeComment", + color: theme.colors.codeComment, content: "attr(line)", // added as spans by prism fontVariantNumeric: "tabular-nums", userSelect: "none", @@ -39,31 +39,31 @@ const Block = styled("div", { // the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file ".token": { "&.comment, &.prolog, &.cdata": { - color: "$codeComment", + color: theme.colors.codeComment, }, "&.delimiter, &.boolean, &.keyword, &.selector, &.important, &.doctype, &.atrule, &.url": { - color: "$codeKeyword", + color: theme.colors.codeKeyword, }, "&.tag, &.builtin, &.regex": { - color: "$codeNamespace", + color: theme.colors.codeNamespace, }, "&.property, &.constant, &.variable, &.attr-value, &.class-name, &.string, &.char": { - color: "$codeVariable", + color: theme.colors.codeVariable, }, "&.literal-property, &.attr-name": { - color: "$codeAttribute", + color: theme.colors.codeAttribute, }, "&.function": { - color: "$codeLiteral", + color: theme.colors.codeLiteral, }, "&.tag .punctuation, &.attr-value .punctuation": { - color: "$codePunctuation", + color: theme.colors.codePunctuation, }, "&.inserted": { - color: "$codeAddition", + color: theme.colors.codeAddition, }, "&.deleted": { - color: "$codeDeletion", + color: theme.colors.codeDeletion, }, "&.url": { textDecoration: "underline" }, "&.bold": { fontWeight: "bold" }, @@ -79,11 +79,11 @@ const CornerCopyButton = styled(CopyButton, { top: 0, right: 0, padding: "0.65em", - backgroundColor: "$backgroundInner", - border: "1px solid $kindaLight", - borderTopRightRadius: "$rounded", - borderBottomLeftRadius: "$rounded", - transition: "background $fade, border $fade", + backgroundColor: theme.colors.backgroundInner, + border: `1px solid ${theme.colors.kindaLight}`, + borderTopRightRadius: theme.radii.rounded, + borderBottomLeftRadius: theme.radii.rounded, + transition: `background ${theme.transitions.fade}, border ${theme.transitions.fade}`, }); export type CodeBlockProps = ComponentProps & { diff --git a/components/Comments/Comments.tsx b/components/Comments/Comments.tsx index b7632f20..779346a3 100644 --- a/components/Comments/Comments.tsx +++ b/components/Comments/Comments.tsx @@ -1,6 +1,6 @@ import Giscus from "@giscus/react"; import { useTheme } from "../../hooks/use-theme"; -import { styled } from "../../lib/styles/stitches.config"; +import { styled, theme } from "../../lib/styles/stitches.config"; import { giscusConfig } from "../../lib/config"; import type { ComponentProps } from "react"; import type { GiscusProps } from "@giscus/react"; @@ -8,7 +8,7 @@ import type { GiscusProps } from "@giscus/react"; const Wrapper = styled("div", { marginTop: "2em", paddingTop: "2em", - borderTop: "2px solid $light", + borderTop: `2px solid ${theme.colors.light}`, minHeight: "360px", }); diff --git a/components/ContactForm/ContactForm.tsx b/components/ContactForm/ContactForm.tsx index 2ea5ba0e..87d2cfa1 100644 --- a/components/ContactForm/ContactForm.tsx +++ b/components/ContactForm/ContactForm.tsx @@ -4,7 +4,7 @@ import TextareaAutosize from "react-textarea-autosize"; import Link from "../Link"; import Captcha from "../Captcha"; import { CheckOcticon, XOcticon, MarkdownIcon } from "../Icons"; -import { styled, css } from "../../lib/styles/stitches.config"; +import { styled, theme, css } from "../../lib/styles/stitches.config"; import type { FormikHelpers, FormikProps, FieldInputProps, FieldMetaProps } from "formik"; // CSS applied to both `` and `