diff --git a/README.md b/README.md index 3f1b5c1a..7a349eb8 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Supercharged radio! - [React](https://reactjs.org/) - [Next.js](https://nextjs.org/) -- [Emotion](http://emotion.sh/) +- [Stitches](http://stitches.dev/) - [GenQL](https://genql.now.sh/) - [Testcafe](https://devexpress.github.io/testcafe/) diff --git a/assets/logo.png b/assets/logo.png deleted file mode 100644 index 6c3e4a29..00000000 Binary files a/assets/logo.png and /dev/null differ diff --git a/assets/logo.svg b/assets/logo.svg deleted file mode 100644 index 0e103e7a..00000000 --- a/assets/logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/package.json b/package.json index d871f662..d0c857f9 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,11 @@ "postinstall": "yarn generate" }, "dependencies": { - "@emotion/react": "^11.1.5", - "@emotion/styled": "^11.1.5", "@geist-ui/react-icons": "^1.0.0", "@genql/runtime": "2.5.0", "@next/plugin-google-analytics": "^10.0.6", "@next/plugin-sentry": "ricardocasares/next-plugin-sentry", + "@stitches/react": "0.1.0-canary.20", "@vercel/fetch": "^6.1.0", "apollo-server-micro": "^2.21.2", "debounce": "^1.2.1", diff --git a/src/components/AutoGrid/index.ts b/src/components/AutoGrid/index.ts index abd3958b..ee69772a 100644 --- a/src/components/AutoGrid/index.ts +++ b/src/components/AutoGrid/index.ts @@ -1,13 +1,8 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; import { Box } from "@/components/Box"; -export type AutoGrid = Box & { - min?: string; - max?: string; -}; - -export const AutoGrid = styled(Box)` - display: grid; - grid-template-columns: ${({ min = "200px", max = "1fr" }) => - `repeat(auto-fit, minmax(${min}, ${max}))`}; -`; +export const AutoGrid = styled(Box, { + display: "grid", + gap: "10px", + gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", +}); diff --git a/src/components/Box/index.ts b/src/components/Box/index.ts index f0a873c8..2c976e78 100644 --- a/src/components/Box/index.ts +++ b/src/components/Box/index.ts @@ -1,24 +1,3 @@ -import { - grid, - GridProps, - margin, - MarginProps, - padding, - PaddingProps, - background, - BackgroundProps, - border, - BorderProps, - compose, -} from "styled-system"; -import styled from "@emotion/styled"; +import { styled } from "@/css"; -export type Box = { as?: string } & GridProps & - MarginProps & - PaddingProps & - BackgroundProps & - BorderProps; - -export const Box = styled.div( - compose(grid, margin, padding, background, border) -); +export const Box = styled.div({}); diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index c93acc31..ef8da6df 100644 --- a/src/components/Button/index.ts +++ b/src/components/Button/index.ts @@ -1,14 +1,14 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; -export const GhostButton = styled.button` - text-align: left; - border: none; - background: transparent; - color: var(--foreground); - padding: 0; - margin: 0; - line-height: 0; - display: block; - width: 100%; - font-size: var(--sz4); -`; +export const GhostButton = styled.button({ + textAlign: "left", + border: "none", + background: "transparent", + color: "$foreground", + padding: "0", + margin: "0", + lineHeight: 0, + display: "block", + width: "100%", + fontSize: "16px", +}); diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index 7d8809df..cc8c90ec 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -1,7 +1,9 @@ import { FC, memo } from "react"; -import { PlayCircle } from "@geist-ui/react-icons"; +import PlayCircle from "@geist-ui/react-icons/playCircle"; +import { Box } from "@/components/Box"; import { HeartToggle } from "@/components/Toggles"; -import { Container, Cover, Button, Title, Subtitle, Body } from "./style"; +import { Cover, Button, Title, Subtitle, Body } from "./style"; +import { truncate } from "@/css/utils"; const DEFAULT_SUBTITLE = "Global"; @@ -17,16 +19,16 @@ export interface Card { export const Card: FC = memo( ({ hash, title, subtitle, onPlay, onFaved, onUnFaved, isFaved }) => ( - + -
- {title} - {subtitle || DEFAULT_SUBTITLE} +
+ {title} + {subtitle || DEFAULT_SUBTITLE}
- + ) ); diff --git a/src/components/Card/style.ts b/src/components/Card/style.ts index 9c351c08..f694dbae 100644 --- a/src/components/Card/style.ts +++ b/src/components/Card/style.ts @@ -1,54 +1,45 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; import { truncate } from "@/css/utils"; import { Gradient } from "@/components/Gradient"; -export const Container = styled.div` - border-radius: var(--sz1); -`; +export const Cover = styled(Gradient, { + display: "grid", + placeItems: "center", + borderRadius: "$1 $1 0 0", +}); -export interface Cover { - hash: string; -} +export const Title = styled.h2({ + fontSize: "$2", + fontWeight: 500, + margin: "0", + marginBottom: "$1", + color: "fg", + ...truncate, +}); -export const Cover = styled(Gradient)` - display: grid; - place-items: center; - border-radius: var(--sz2) var(--sz2) 0 0; -`; +export const Subtitle = styled.h3({ + fontSize: "$1", + fontWeight: 400, + textTransform: "uppercase", + color: "$accents-4", + margin: "0", +}); -export const Title = styled.h3` - font-size: var(--sz4); - font-weight: 500; - margin: 0; - margin-bottom: var(--sz1); - color: var(--accents-7); - ${truncate} -`; +export const Body = styled.div({ + padding: "$3", + border: "1px solid $accents-2", + borderTop: "0", + borderRadius: "0 0 $1 $1", + display: "grid", + gridTemplateColumns: "1fr auto", + gridGap: "10px", + alignItems: "center", +}); -export const Subtitle = styled.h4` - font-size: var(--sz3); - font-weight: 300; - text-transform: uppercase; - color: var(--accents-4); - margin: 0; - ${truncate} -`; - -export const Body = styled.div` - padding: var(--sz3); - border: 1px solid var(--accents-2); - border-top: 0; - border-radius: 0 0 var(--sz2) var(--sz2); - display: grid; - grid-template-columns: 1fr auto; - grid-gap: 10px; - align-items: center; -`; - -export const Button = styled.button` - color: var(--background); - margin: 0; - padding: 0; - border: none; - background: transparent; -`; +export const Button = styled.button({ + color: "$background", + margin: "0", + padding: "0", + border: "none", + background: "transparent", +}); diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index e3d963d1..20890266 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,6 +1,8 @@ import Link from "next/link"; import { Logo } from "@/components/Logo"; -import { HeartFill, Search, Sliders } from "@geist-ui/react-icons"; +import Search from "@geist-ui/react-icons/search"; +import Sliders from "@geist-ui/react-icons/sliders"; +import HeartFill from "@geist-ui/react-icons/heartFill"; import { Container, Navigation, Hidden } from "./style"; export const Header = () => ( @@ -21,7 +23,7 @@ export const Header = () => ( - diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts index f672ee82..045e3583 100644 --- a/src/components/Header/style.ts +++ b/src/components/Header/style.ts @@ -1,26 +1,24 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; import { hidden } from "@/css/utils"; -export const Container = styled.header` - display: grid; - padding: var(--sz3) var(--sz4); - grid-gap: var(--sz4); - grid-template-columns: auto 1fr; - align-items: center; - border-bottom: 1px solid var(--accents-2); -`; +export const Container = styled.header({ + display: "grid", + padding: "$3 $4", + gridTemplateColumns: "auto 1fr", + alignItems: "center", + borderBottom: "1px solid $accents-2", +}); -export const Navigation = styled.nav` - display: grid; - grid-gap: var(--sz3); - grid-auto-flow: column; - justify-content: right; - align-items: center; - list-style: none; - margin: 0; - padding: 0; -`; +export const Navigation = styled.nav({ + display: "grid", + gridGap: "$3", + gridAutoFlow: "column", + justifyContent: "right", + alignItems: "center", + listStyle: "none", + margin: "0", + padding: "0", +}); -export const Hidden = styled.span` - ${hidden} -`; +//@ts-ignore +export const Hidden = styled.span(hidden); diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index e037bbee..2374689c 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -1,9 +1,9 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; -export const Layout = styled.div` - width: 100%; - height: 100%; - display: grid; - position: fixed; - grid-template-rows: auto 1fr auto; -`; +export const Layout = styled.div({ + width: "100%", + height: "100%", + display: "grid", + position: "fixed", + gridTemplateRows: "auto 1fr auto" +}); diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx index 45d3f5e5..933b30b0 100644 --- a/src/components/Logo/index.tsx +++ b/src/components/Logo/index.tsx @@ -22,7 +22,7 @@ export const Logo = () => { cy="12" r="2" style={{ - stroke: "var(--accents-4)", + stroke: "var(--colors-accents-4)", transform: `scale(${opacity})`, transformOrigin: "center", willChange: "transform, stroke", @@ -32,7 +32,7 @@ export const Logo = () => { d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14" style={{ opacity, - stroke: "var(--success)", + stroke: "var(--colors-active)", willChange: "opacity", }} /> diff --git a/src/components/Placeholder/index.tsx b/src/components/Placeholder/index.tsx index 9ae21c62..7ff5a5b9 100644 --- a/src/components/Placeholder/index.tsx +++ b/src/components/Placeholder/index.tsx @@ -5,7 +5,7 @@ import { CardSkeleton } from '@/components/Skeleton'; export type Placeholder = { count?: number; }; export const Placeholder: FC = ({ count = 10 }) => ( - - {Array(count).fill(null).map((i) => )} + + {Array(count).fill(null).map((_, i) => )} ); \ No newline at end of file diff --git a/src/components/Player/index.tsx b/src/components/Player/index.tsx index c84ba1dd..bb654816 100644 --- a/src/components/Player/index.tsx +++ b/src/components/Player/index.tsx @@ -1,4 +1,7 @@ -import { Play, Pause, Square, AlertCircle } from "@geist-ui/react-icons"; +import Play from "@geist-ui/react-icons/play"; +import Pause from "@geist-ui/react-icons/pause"; +import Square from "@geist-ui/react-icons/square"; +import AlertCircle from "@geist-ui/react-icons/alertCircle"; import { LineSkeleton } from "@/components/Skeleton"; import { Container, Controls, Title, ErrorNotification, Button } from "./style"; import { usePlayer } from "@/lib/hooks/usePlayer"; diff --git a/src/components/Player/style.ts b/src/components/Player/style.ts index dbe1f46b..73638d3e 100644 --- a/src/components/Player/style.ts +++ b/src/components/Player/style.ts @@ -1,50 +1,49 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; import { truncate } from "@/css/utils"; import { fadeInAndOut } from "@/css/animations"; -export const Container = styled.footer` - display: grid; - padding: var(--sz4); - grid-gap: var(--sz4); - align-items: center; - grid-template-columns: 1fr auto; - background: var(--background); - border-top: 1px solid var(--accents-2); -`; +export const Container = styled.footer({ + display: "grid", + padding: "$4", + gridGap: "$4", + alignItems: "center", + gridTemplateColumns: "1fr auto", + borderTop: "1px solid $accents-2", +}); -export const Title = styled.div` - font-weight: 500; - text-align: center; - font-size: var(--sz4); - color: var(--foreground); - ${truncate} -`; +export const Title = styled.div({ + fontWeight: 500, + textAlign: "center", + fontSize: "$2", + color: "$foreground", + ...truncate, +}); -export const ErrorNotification = styled.div` - font-weight: 500; - display: grid; - grid-gap: var(--sz4); - grid-template-columns: auto 1fr; - align-items: center; - color: var(--error-lighter); - background: var(--error); - font-size: var(--sz4); - padding: var(--sz5) var(--sz4); - animation: ${fadeInAndOut} linear 5s; -`; +export const ErrorNotification = styled.div({ + fontWeight: 500, + display: "grid", + gridGap: "$2", + gridTemplateColumns: "auto 1fr", + alignItems: "center", + color: "$errorLight", + background: "$error", + fontSize: "$2", + padding: "$5 $4", + animation: `${fadeInAndOut} linear 5s`, +}); -export const Controls = styled.section` - display: grid; - grid-gap: var(--sz4); - grid-auto-flow: column; - justify-content: center; -`; +export const Controls = styled.section({ + display: "grid", + gridGap: "$1", + gridAutoFlow: "column", + justifyContent: "center", +}); -export const Button = styled.button` - margin: 0; - padding: 0; - border: none; - appearance: none; - background: none; - color: var(--foreground); -`; +export const Button = styled.button({ + margin: "0", + padding: "0", + border: "none", + appearance: "none", + background: "none", + color: "$foreground", +}); diff --git a/src/components/Scrollable/index.tsx b/src/components/Scrollable/index.tsx index 48da1219..7138dd78 100644 --- a/src/components/Scrollable/index.tsx +++ b/src/components/Scrollable/index.tsx @@ -1,5 +1,3 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; -export const Scrollable = styled.div` - overflow-y: scroll; -`; +export const Scrollable = styled.div({ overflowY: "scroll" }); diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts index bf00e3b4..70061cd9 100644 --- a/src/components/SearchInput/index.ts +++ b/src/components/SearchInput/index.ts @@ -1,19 +1,14 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; -export const SearchInput = styled.input` - width: 100%; - padding: var(--sz3); - font-size: var(--sz4); - border-radius: var(--sz1); - margin-bottom: var(--sz4); - color: var(--foreground); - background: var(--background); - border: 1px solid var(--accents-2); - outline: none; - transition: border-color 0.2s; - - :hover, - :focus { - border-color: var(--accents-3); - } -`; +export const SearchInput = styled.input({ + width: "100%", + padding: "$3", + fontSize: "$2", + borderRadius: "$1", + color: "$foreground", + background: "$background", + border: "1px solid $accents-3", + outline: "none", + transition: "border-color 0.2s", + "&:hover, &:focus": { borderColor: "$active" }, +}); diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx index 01b21064..1ae10ad2 100644 --- a/src/components/Skeleton/index.tsx +++ b/src/components/Skeleton/index.tsx @@ -5,8 +5,8 @@ export const CardSkeleton = () => ( speed={2} width="100%" height={180} - backgroundColor="var(--accents-1)" - foregroundColor="var(--accents-2)" + backgroundColor="var(--colors-accents-1)" + foregroundColor="var(--colors-accents-2)" > @@ -19,8 +19,8 @@ export const LineSkeleton = () => ( speed={2} width="100%" height={16} - backgroundColor="var(--accents-1)" - foregroundColor="var(--accents-2)" + backgroundColor="var(--colors-accents-1)" + foregroundColor="var(--colors-accents-2)" > diff --git a/src/components/Stack/index.ts b/src/components/Stack/index.ts index d80e83f4..422132d8 100644 --- a/src/components/Stack/index.ts +++ b/src/components/Stack/index.ts @@ -1,27 +1,50 @@ -import styled from "@emotion/styled"; -import { BorderProps } from "styled-system"; +import { styled } from "@/css"; import { Box } from "@/components/Box"; -import { - stackSpacing, - StackSpacingProps, - stackBorder, - StackBorderProps, - itemPadding, - ItemPaddingProps, -} from "@/css/system"; - -export type Stack = StackSpacingProps & - StackBorderProps & - ItemPaddingProps & - BorderProps & - Box; - -export const Stack = styled(Box)` - > * { - ${itemPadding} - } - > *:not(style) ~ *:not(style) { - ${stackBorder} - ${stackSpacing} - } -`; + +export const Stack = styled(Box, { + variants: { + debug: { + true: { + border: "1px solid red", + }, + }, + + separated: { + true: { + "> * + *": { + borderTop: "1px solid $accents-1", + }, + }, + }, + + spacing: { + sm: { + padding: "$3", + + "> * ": { + padding: "$2 0", + }, + }, + + md: { + padding: "$4", + + "> * ": { + padding: "$3 0", + }, + }, + + xl: { + padding: "$5", + + "> * ": { + padding: "$4 0", + }, + }, + }, + }, + + defaultVariants: { + spacing: "sm", + }, +}); diff --git a/src/components/StationCardList/index.tsx b/src/components/StationCardList/index.tsx index afb300bd..0a437fe5 100644 --- a/src/components/StationCardList/index.tsx +++ b/src/components/StationCardList/index.tsx @@ -16,7 +16,7 @@ export const CardList: FC = ({ list }) => { const { add, remove, isFaved } = useFavorites(); return ( - + {list.map((item) => ( = ({ on, off, active }) => ( export const HeartToggle: FC = (props) => ( } - off={} + on={} + off={} {...props} /> ); export const RightLeftToggle: FC = (props) => ( } - off={} + on={} + off={} {...props} /> ); diff --git a/src/components/Toggles/style.ts b/src/components/Toggles/style.ts index 566edb76..3ebc5ff8 100644 --- a/src/components/Toggles/style.ts +++ b/src/components/Toggles/style.ts @@ -1,8 +1,8 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; -export const ToggleItem = styled.div` - display: grid; - text-transform: capitalize; - grid-template-columns: 1fr auto; - align-items: center; -`; +export const ToggleItem = styled.div({ + display: "grid", + textTransform: "capitalize", + gridTemplateColumns: "1fr auto", + alignItems: "center", +}); diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx index 26430e31..a0304331 100644 --- a/src/components/Typography/index.tsx +++ b/src/components/Typography/index.tsx @@ -1,29 +1,32 @@ -import styled from "@emotion/styled"; +import { styled } from "@/css"; -const sizesMap = { - h1: "var(--sz8)", - h2: "var(--sz7)", - h3: "var(--sz6)", - h4: "var(--sz5)", - h5: "var(--sz4)", - h6: "var(--sz3)", -}; +export const Heading = styled.h1({ + fontWeight: 500, + lineHeight: "1em", + margin: "0", -export interface Text { - as?: string; - muted?: boolean; + variants: { + size: { + 1: { + fontSize: "$4" + }, + 2: { + fontSize: "$3" + }, + 3: { + fontSize: "$2" + } + }, + muted: { + true: { + color: "$accents-4" + } + } + }, } +); -export const Heading = styled.h1` - font-weight: 500; - line-height: 1.3em; - margin-bottom: var(--sz4); - font-size: ${({ as = "h1" }) => sizesMap[as]}; - color: ${({ muted }) => (muted ? "var(--accents-6)" : "var(--foreground)")}; -`; - -export const Text = styled.p` - margin-top: 0; - line-height: 1.5em; - color: ${({ muted }) => (muted ? "var(--accents-6)" : "var(--foreground)")}; -`; +export const Text = styled.p({ + marginTop: "0", + lineHeight: "1.5em" +}); diff --git a/src/css/animations.ts b/src/css/animations.ts index e5e05809..0d1b2f7a 100644 --- a/src/css/animations.ts +++ b/src/css/animations.ts @@ -1,19 +1,8 @@ -import { keyframes } from "@emotion/react"; - -export const fadeInAndOut = keyframes` -0% { - opacity: 0; -} - -10% { - opacity: 1; -} - -90% { - opacity: 1; -} - -100% { - opacity: 0 -} -`; +import { keyframes } from "@/css"; + +export const fadeInAndOut = keyframes({ + "0%": { opacity: 0 }, + "10%": { opacity: 1 }, + "90%": { opacity: 1 }, + "100%": { opacity: 0 }, +}); diff --git a/src/css/global.ts b/src/css/global.ts index 098a2b33..f0f5c1bf 100644 --- a/src/css/global.ts +++ b/src/css/global.ts @@ -1,39 +1,50 @@ -import { css } from "@emotion/react"; -import { reset } from "./reset"; -import { theme } from "./theme"; - -export const styles = css` - ${reset} - ${theme} - - html { - height: 100vh; - min-height: 100%; - } - - *, - *::before, - *::after { - font-family: var(--font-family); - will-change: color, background; - transition: color 0.1s, background 0.3s, border-color 0.3s; - } - - body { - font-size: 16px; - color: var(--foreground); - background: var(--background); - margin: 0; - padding: 0; - } - - a { - text-decoration: none; - color: var(--foreground); - } - - ::selection { - color: var(--foreground); - background: var(--selection); - } -`; +import { global } from "@/css"; + +export const globalStyles = global({ + "html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6": { + margin: "0", + padding: "0", + }, + + "h1, h2, h3, h4, h5, h6": { + fontSize: "100%", + fontWeight: "normal", + }, + + ul: { listStyle: "none" }, + + "button, input, select, textarea": { margin: "0" }, + + html: { + boxSizing: "border-box", + height: "100vh", + minHeight: "100%", + }, + + "*, *::before, *::after": { + boxSizing: "inherit", + fontFamily: "$sans", + }, + + "img, video": { height: "auto", maxWidth: "100%" }, + iframe: { border: "0" }, + table: { borderCollapse: "collapse", borderSpacing: "0" }, + + body: { + fontSize: "16px", + color: "$foreground", + background: "$background", + margin: 0, + padding: 0, + }, + + a: { + textDecoration: "none", + color: "$foreground", + }, + + "::selection": { + color: "$foreground", + background: "$selection", + }, +}); diff --git a/src/css/index.ts b/src/css/index.ts new file mode 100644 index 00000000..91af9984 --- /dev/null +++ b/src/css/index.ts @@ -0,0 +1,74 @@ +import { createCss } from "@stitches/react"; + +export const { + css, + theme, + styled, + global, + keyframes, + getCssString, +} = createCss({ + theme: { + colors: { + active: "$success", + foreground: "#000", + background: "#fff", + selection: "$cyan-light", + success: "#0070f3", + "success-dark": "#0761d1", + "success-light": "#3291ff", + "success-lighter": "#d3e5ff", + error: "#e00", + "error-dark": "#c50000", + "error-light": "#ff1a1a", + "error-lighter": "#f7d4d6", + warning: "#f5a623", + "warning-dark": "#ab570a", + "warning-lighter": "#ffefcf", + "warning-light": "#f7b955", + violet: "#7928ca", + "violet-dark": "#4c2889", + "violet-light": "#8a63d2", + "violet-lighter": "#e3d7fc", + cyan: "#50e3c2", + "cyan-dark": "#29bc9b", + "cyan-light": "#79ffe1", + "cyan-lighter": "#aaffec", + "highlight-purple": "#f81ce5", + "highlight-magenta": "#eb367f", + "highlight-pink": "#ff0080", + "highlight-yellow": "#fff500", + "accents-1": "#fafafa", + "accents-2": "#eaeaea", + "accents-3": "#999", + "accents-4": "#888", + "accents-5": "#666", + "accents-6": "#444", + "accents-7": "#333", + "accents-8": "#111", + }, + fonts: { + sans: + 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', + }, + fontSizes: { + 1: "12px", + 2: "16px", + 3: "20px", + 4: "24px", + }, + radii: { + 1: "4px", + 2: "5px", + }, + space: { + 1: "4px", + 2: "8px", + 3: "12px", + 4: "16px", + 5: "24px", + 6: "32px", + 7: "40px", + }, + }, +}); diff --git a/src/css/reset.ts b/src/css/reset.ts deleted file mode 100644 index aca4e907..00000000 --- a/src/css/reset.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { css } from "@emotion/react"; - -export const reset = css` - html, - body, - p, - ol, - ul, - li, - dl, - dt, - dd, - blockquote, - figure, - fieldset, - legend, - textarea, - pre, - iframe, - hr, - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 0; - padding: 0; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-size: 100%; - font-weight: normal; - } - - ul { - list-style: none; - } - - button, - input, - select, - textarea { - margin: 0; - } - - html { - box-sizing: border-box; - } - - *, - *::before, - *::after { - box-sizing: inherit; - } - - img, - video { - height: auto; - max-width: 100%; - } - - iframe { - border: 0; - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - td, - th { - padding: 0; - } - - td:not([align]), - th:not([align]) { - text-align: left; - } -`; diff --git a/src/css/system.ts b/src/css/system.ts deleted file mode 100644 index 7399462b..00000000 --- a/src/css/system.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { system } from "styled-system"; - -export interface StackSpacingProps { - stackSpacing?: number | number[] | string | string[]; -} - -export const stackSpacing = system({ - stackSpacing: { - property: "marginTop", - }, -}); - -export interface ItemPaddingProps { - itemPadding?: number | number[] | string | string[]; -} - -export const itemPadding = system({ - itemPadding: { - property: "padding", - }, -}); - -export interface StackBorderProps { - stackBorder?: number | number[] | string | string[]; -} - -export const stackBorder = system({ - stackBorder: { - property: "borderTop", - }, -}); diff --git a/src/css/theme.ts b/src/css/theme.ts index 21bffb1c..59374a9c 100644 --- a/src/css/theme.ts +++ b/src/css/theme.ts @@ -1,77 +1,17 @@ -import { css } from "@emotion/react"; +import { theme } from "@/css"; -export const base = css` - :root { - /* sizes */ - --sz1: 4px; - --sz2: 8px; - --sz3: 12px; - --sz4: 16px; - --sz5: 24px; - --sz6: 32px; - --sz7: 40px; - - /* fonts */ - --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, "Helvetica Neue", sans-serif; - - /* colors */ - --success-lighter: #d3e5ff; - --success-light: #3291ff; - --success: #0070f3; - --success-dark: #0761d1; - --error-lighter: #f7d4d6; - --error-light: #ff1a1a; - --error: #e00; - --error-dark: #c50000; - --warning-lighter: #ffefcf; - --warning-light: #f7b955; - --warning: #f5a623; - --warning-dark: #ab570a; - --violet-lighter: #e3d7fc; - --violet-light: #8a63d2; - --violet: #7928ca; - --violet-dark: #4c2889; - --cyan-lighter: #aaffec; - --cyan-light: #79ffe1; - --cyan: #50e3c2; - --cyan-dark: #29bc9b; - --highlight-purple: #f81ce5; - --highlight-magenta: #eb367f; - --highlight-pink: #ff0080; - --highlight-yellow: #fff500; - --foreground: #000; - --background: #fff; - --selection: var(--cyan-light); - --accents-1: #fafafa; - --accents-2: #eaeaea; - --accents-3: #999; - --accents-4: #888; - --accents-5: #666; - --accents-6: #444; - --accents-7: #333; - --accents-8: #111; - } -`; - -export const dark = css` - [data-theme="dark"] { - /* colors */ - --foreground: #fff; - --background: #000; - --selection: var(--highlight-purple); - --accents-8: #fafafa; - --accents-7: #eaeaea; - --accents-6: #999; - --accents-5: #888; - --accents-4: #666; - --accents-3: #444; - --accents-2: #333; - --accents-1: #111; - } -`; - -export const theme = css` - ${base} - ${dark} -`; +export const dark = theme("dark", { + colors: { + background: "#000", + foreground: "#fff", + selection: "$highlight-magenta", + "accents-1": "#111", + "accents-2": "#333", + "accents-3": "#444", + "accents-4": "#666", + "accents-5": "#888", + "accents-6": "#999", + "accents-7": "#eaeaea", + "accents-8": "#fafafa", + }, +}); diff --git a/src/css/utils.ts b/src/css/utils.ts index 860d024c..6c78091a 100644 --- a/src/css/utils.ts +++ b/src/css/utils.ts @@ -1,17 +1,17 @@ -import { css } from "@emotion/react"; +import { css } from "@/css"; -export const truncate = css` - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -`; +export const truncate = css({ + overflow: "hidden", + whiteSpace: "nowrap", + textOverflow: "ellipsis", +}); -export const hidden = css` - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -`; +export const hidden = css({ + clip: "rect(0 0 0 0)", + clipPath: "inset(50%)", + height: "1px", + overflow: "hidden", + position: "absolute", + whiteSpace: "nowrap", + width: "1px", +}); diff --git a/src/lib/providers/index.tsx b/src/lib/providers/index.tsx index cff322d1..4569178e 100644 --- a/src/lib/providers/index.tsx +++ b/src/lib/providers/index.tsx @@ -4,9 +4,10 @@ import { PlayerProvider } from "@/lib/context/player"; import { TranslateProvider } from "@/lib/context/translate"; import { FavoritesProvider } from "@/lib/context/favorites"; import { AudioElementProvider } from "@/lib/context/audio"; +import { dark } from "@/css/theme"; export const Providers: FC = ({ children }) => ( - + diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 02cd0fcd..db750b6f 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,22 +1,22 @@ import { AppProps } from "next/app"; import { DefaultSeo } from "next-seo"; -import { Global } from "@emotion/react"; import { Providers } from "@/lib/providers"; import { Layout } from "@/components/Layout"; import { Header } from "@/components/Header"; import { Scrollable } from "@/components/Scrollable"; import { Player } from "@/components/Player"; -import { styles } from "@/css/global"; -import SEO from "@/config/seo"; +import seoProps from "@/config/seo"; +import { globalStyles } from "@/css/global"; export function BembaApp({ Component, pageProps }: AppProps) { + globalStyles(); + return ( -
- + diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx new file mode 100644 index 00000000..6d4d9c5b --- /dev/null +++ b/src/pages/_document.tsx @@ -0,0 +1,18 @@ +import NextDocument, { Html, Head, Main, NextScript } from 'next/document'; +import { getCssString } from '@/css'; + +export default class Document extends NextDocument { + render() { + return ( + + +