Move PosterView to stylex

Frikanalen · Feb 23, 2024 · 001a0f5 · 001a0f5
1 parent 70334ad
commit 001a0f5
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 64 deletions.
diff --git a/src/core/components/Card.tsx b/src/core/components/Card.tsx
@@ -1,19 +1,27 @@
-import { css, Theme } from "@emotion/react"
-import styled from "@emotion/styled"
+import * as stylex from "@stylexjs/stylex"
+import { theme } from "../../theme.stylex.ts"
+import { ComponentPropsWithoutRef, forwardRef } from "react"
 
-export const CardStyle = (props: { theme: Theme }) => css`
-  background: ${props.theme.color.card};
-  box-shadow: ${props.theme.shadow.card};
-  backdrop-filter: blur(30px);
+// Define the basic card style
+export const cardStyle = stylex.create({
+  baseCard: {
+    boxShadow: theme.shadowCard,
+    padding: "24px",
+    borderRadius: "8px",
+    background: theme.colorCard,
+    backdropFilter: "blur(30px)",
+  },
+})
 
-  @supports not (backdrop-filter: blur(30px)) {
-    background: ${props.theme.color.cardFallback};
-  }
-`
-
-export const Card = styled.div`
-  padding: 24px;
-  border-radius: 8px;
-
-  ${CardStyle}
-`
+/**
+ * This is here for styled-component backwards compatibility.
+ */
+export const Card = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<"div">>(
+  ({ children, ...props }, ref) => {
+    return (
+      <div ref={ref} {...stylex.props(cardStyle.baseCard)} {...props}>
+        {children}
+      </div>
+    )
+  },
+)
diff --git a/src/core/components/IntroView.tsx b/src/core/components/IntroView.tsx
@@ -1,9 +1,10 @@
 import styled from "@emotion/styled"
 import { css, keyframes } from "@emotion/react"
-import { CardStyle } from "./Card"
+import { cardStyle } from "./Card"
 import { Logo } from "./Logo"
 import { TransitionStatus } from "react-transition-group"
 import { SequenceEntry } from "../../sequencing/components/ViewSequence"
+import stylex from "@stylexjs/stylex"
 
 const ENTER_MS = 1200
 const EXIT_MS = 700
@@ -54,8 +55,6 @@ const Container = styled.div<{ status: TransitionStatus }>`
           animation: ${CardFall} ${EXIT_MS}ms ease-in-out forwards;
         `
     }}
-
-    ${CardStyle};
   }
 `
 
@@ -115,7 +114,7 @@ export function IntroView(props: IntroView) {
   const { status } = props
 
   return (
-    <Container status={status}>
+    <Container {...stylex.props(cardStyle.baseCard)} status={status}>
       <LogoContainer status={status}>
         <Logo />
       </LogoContainer>

diff --git a/src/poster/components/PosterView.tsx b/src/poster/components/PosterView.tsx
@@ -4,12 +4,13 @@ import { css, keyframes } from "@emotion/react"
 import { size, transparentize } from "polished"
 import { type TransitionStatus } from "react-transition-group"
 import { useParams } from "../../core/hooks/useParams"
-import { CardStyle } from "../../core/components/Card"
 import { SVGIcon } from "../../core/components/SVGIcon"
 import { type PosterType } from "../types"
 import { POSTER_TYPES } from "../constants"
 import { FADE_TRANSITION_MS } from "../../core/constants"
 import { AppContext } from "../../core/components/AppContext.tsx"
+import stylex from "@stylexjs/stylex"
+import { cardStyle } from "../../core/components/Card.tsx"
 
 const Container = styled.div`
   padding: 64px;
@@ -65,7 +66,6 @@ const Content = styled.div<{
       position: relative;
       z-index: 2;
 
-      ${CardStyle(props)}
       border-radius: 8px;
     `
   }};
@@ -101,7 +101,12 @@ export function PosterView(props: PosterViewProps) {
 
   return (
     <Container>
-      <Content transition={transition} type={safeType} keyed={app.keyed}>
+      <Content
+        {...stylex.props(cardStyle.baseCard)}
+        transition={transition}
+        type={safeType}
+        keyed={app.keyed}
+      >
         <Icon name={safeType} />
         <Message>{message}</Message>
       </Content>

diff --git a/src/schedule/components/ScheduleView.tsx b/src/schedule/components/ScheduleView.tsx
@@ -2,22 +2,24 @@ import { css, keyframes } from "@emotion/react"
 import styled from "@emotion/styled"
 import { darken } from "polished"
 import { TransitionStatus } from "react-transition-group"
-import { Card, CardStyle } from "../../core/components/Card"
+import { Card, cardStyle } from "../../core/components/Card"
 import { Clock } from "../../core/components/Clock"
 import { Logo } from "../../core/components/Logo"
 
 import { ScheduleItemSummary } from "./ScheduleItemSummary"
 import { useSchedule } from "../../core/useSchedule"
+import * as stylex from "@stylexjs/stylex"
 
-const SlideTransition = (px: number, reversed: boolean) => keyframes`
-  ${reversed ? "0%" : "100%"} {
-    transform: translateX(${px}px);
-  }
+// Define the keyframe animations
+const slideIn = stylex.keyframes({
+  from: { transform: "translateX(-700px)" },
+  to: { transform: "translateY(0)" },
+})
 
-  ${reversed ? "100%" : "0%"} {
-    transform: translateY(0px);
-  }
-`
+const slideOut = stylex.keyframes({
+  from: { transform: "translateY(0)" },
+  to: { transform: "translateX(-700px)" },
+})
 
 const SlideFadeTransition = (px: number, reversed: boolean) => keyframes`
   ${reversed ? "0%" : "100%"} {
@@ -31,14 +33,6 @@ const SlideFadeTransition = (px: number, reversed: boolean) => keyframes`
   }
 `
 
-const slide = (px: number) => (props: { status: TransitionStatus }) => {
-  const { status } = props
-
-  return css`
-    animation-name: ${SlideTransition(px, status !== "exiting")};
-  `
-}
-
 const slideFade = (px: number) => (props: { status: TransitionStatus }) => {
   const { status } = props
 
@@ -68,16 +62,14 @@ const Container = styled.div<{ status: TransitionStatus }>`
     width: 65%;
     height: 140%;
 
-    right: 0px;
-    top: 0px;
+    right: 0;
+    top: 0;
     position: absolute;
 
     transform: rotate(10deg) translateY(-90px) translateX(70px);
     animation: ${(props) => ContainerTransition(props.status !== "exiting")}
       500ms ease both;
 
-    ${CardStyle}
-
     @supports not (backdrop-filter: blur(30px)) {
       background: ${(props) => darken(0.02, props.theme.color.cardFallback)};
     }
@@ -121,21 +113,28 @@ const Content = styled.div`
   flex: 1;
 `
 
-const NextCard = styled(Card)`
-  margin-top: 24px;
-  margin-bottom: 42px;
-
-  animation: 1000ms ease both;
-  ${slide(-700)}
-`
-
-const LaterListCard = styled(Card)`
-  margin-top: 24px;
-
-  animation: 1000ms ease both;
-  animation-delay: 100ms;
-  ${slide(-700)}
-`
+const styles = stylex.create({
+  entering: {
+    animationName: slideIn,
+    animationDuration: "1000ms",
+    animationFillMode: "both",
+    animationTimingFunction: "ease",
+  },
+  exiting: {
+    animationName: slideOut,
+    animationDuration: "1000ms",
+    animationFillMode: "both",
+    animationTimingFunction: "ease",
+  },
+  nextCardBase: {
+    marginTop: "24px",
+    marginBottom: "42px",
+  },
+  laterListCardBase: {
+    marginTop: "24px",
+    animationDelay: "100ms",
+  },
+})
 
 const Aside = styled.div`
   flex: 1;
@@ -195,15 +194,27 @@ export function ScheduleView(props: ScheduleViewProps) {
       <Body>
         <Content>
           <Heading status={status}>Neste program</Heading>
-          <NextCard status={status}>
+          <Card
+            {...stylex.props(
+              cardStyle.baseCard,
+              styles.nextCardBase,
+              status !== "exiting" ? styles.entering : styles.exiting,
+            )}
+          >
             {next ? <ScheduleItemSummary item={next} /> : null}
-          </NextCard>
+          </Card>
           <Heading status={status}>Senere</Heading>
-          <LaterListCard status={status}>
+          <div
+            {...stylex.props(
+              cardStyle.baseCard,
+              styles.laterListCardBase,
+              status !== "exiting" ? styles.entering : styles.exiting,
+            )}
+          >
             {scheduleItems.slice(0, 3).map((item) => (
               <ScheduleItemSummary key={item.id} item={item} />
             ))}
-          </LaterListCard>
+          </div>
         </Content>
         <Aside>
           <SizedLogo status={status} />

diff --git a/src/theme.stylex.ts b/src/theme.stylex.ts
@@ -0,0 +1,36 @@
+import * as stylex from "@stylexjs/stylex"
+
+const DARK = "@media (prefers-color-scheme: dark)"
+const DARK_BLUR =
+  "@media (prefers-color-scheme: dark) and (@supports (backdrop-filter: blur(30px)))"
+
+const BLUR = "@supports (backdrop-filter: blur(30px))"
+
+export const theme = stylex.defineVars({
+  colorCard: {
+    default: "rgba(255, 255, 255, 0.8)",
+    [BLUR]: "rgba(255, 255, 255, 0.45)",
+    [DARK]: "rgba(26, 42, 64, 0.85)",
+    [DARK_BLUR]: "rgba(26, 42, 64, 0.7)",
+  },
+  colorAccent: { default: "#E88840", [DARK]: "#FCBA20" },
+  fontColorOverlay: { default: "white", [DARK]: "white" }, // Overlay doesn't change between themes
+  fontColorNormal: {
+    default: "rgba(0, 0, 0, 0.85)",
+    [DARK]: "rgba(255, 255, 255, 0.85)",
+  },
+  fontColorMuted: {
+    default: "rgba(0, 0, 0, 0.7)",
+    [DARK]: "rgba(255, 255, 255, 0.7)",
+  },
+  stateColorWarning: { default: "#ff5400", [DARK]: "#ff5400" }, // Assuming warning color doesn't change
+  gradientOverlay: {
+    default:
+      "linear-gradient(0deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 35%)",
+    [DARK]: "linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 35%)",
+  },
+  shadowCard: {
+    default: "3px 3px 11px 1px rgb(0 0 0 / 10%)",
+    [DARK]: "3px 3px 15px 1px rgb(0 0 0 / 15%)",
+  },
+})