fix: use scss for next example

Author: lisalupi

examples/next/next.config.js

@@ -1,7 +1,3 @@
-import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
-
-const withVanillaExtract = createVanillaExtractPlugin();
-
 const nextConfig = () => {
   /** @type {import('next/dist/server/config').NextConfig} */
   const config = {
@@ -23,7 +19,7 @@ const nextConfig = () => {
     },
   }
 
-  return withVanillaExtract(config)
+  return config
 }
 
 export default nextConfig()

examples/next/package.json

@@ -20,21 +20,21 @@
     "@ultraviolet/form": "workspace:*",
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
-    "@vanilla-extract/css": "1.17.4",
+    "@ultraviolet/themes": "workspace:*",
     "next": "15.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-schemaorg": "2.0.0",
     "react-syntax-highlighter": "15.6.6",
     "react-use-clipboard": "1.0.9",
+    "sass": "1.93.3",
     "schema-dts": "1.1.5"
   },
   "devDependencies": {
     "@babel/core": "7.28.4",
     "@types/node": "22.18.11",
     "@types/react": "19.2.2",
     "@types/react-syntax-highlighter": "15.5.13",
-    "@vanilla-extract/next-plugin": "2.4.14",
     "next-transpile-modules": "10.0.1"
   }
 }

examples/next/src/components/Card.tsx

@@ -1,7 +1,7 @@
 import { Card as ScwUICard, Text } from '@ultraviolet/ui'
 import Image from 'next/image'
 import type { ReactNode } from 'react'
-import { borderedBox } from './componentsStyles.css'
+import styles from '../../styles/component.module.scss'
 
 type CardProps = {
   title: string
@@ -11,7 +11,9 @@ type CardProps = {
 }
 
 const Card = ({ title, description, icon, className }: CardProps) => (
-  <ScwUICard className={`${className ? `${className} ` : ''}${borderedBox}`}>
+  <ScwUICard
+    className={`${className ? `${className} ` : ''}${styles.borderedBox}`}
+  >
     <div>
       <Image alt="icon" height={64} src={icon} width={64} />
     </div>

examples/next/src/components/CopyBoxCommand.tsx

@@ -7,7 +7,7 @@ import {
   dracula,
   oneLight,
 } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import { copyBoxBase } from './componentsStyles.css'
+import styles from '../../styles/component.module.scss'
 
 type CopyBoxProps = {
   children: ReactElement<CommandProps> | ReactElement<CommandProps>[]
@@ -22,7 +22,7 @@ const CopyBox = ({ children }: CopyBoxProps) => {
   const [tab, setTab] = useState(0)
 
   return (
-    <Stack className={copyBoxBase} gap={2}>
+    <Stack className={styles.copyBox} gap={2}>
       {flatChild.length > 1 ? (
         <Tabs
           onChange={value => {

examples/next/src/components/Footer.tsx

@@ -1,11 +1,11 @@
 import { Text } from '@ultraviolet/ui'
-import { disclaimerContainer, footer, footerRow } from './componentsStyles.css'
+import styles from '../../styles/component.module.scss'
 import GithubAndDocumentationButtons from './GithubAndDocumentationButtons'
 import Logo from './Logo'
 
 const Footer = () => (
-  <footer className={footer}>
-    <div className={footerRow}>
+  <footer className={styles.footer}>
+    <div className={styles.footerRow}>
       <div>
         <Text as="p" variant="body">
           Hosted in green datacenters in France
@@ -17,7 +17,7 @@ const Footer = () => (
           technologies that reduce our environmental impact.
         </Text>
       </div>
-      <div className={disclaimerContainer}>
+      <div className={styles.disclaimerContainer}>
         <Logo />
         <GithubAndDocumentationButtons />
       </div>

examples/next/src/components/Header.tsx

@@ -1,23 +1,31 @@
 import { MoonIcon, SunIcon } from '@ultraviolet/icons'
 import { useTheme } from '@ultraviolet/themes'
 import { Breakpoint, Toggle } from '@ultraviolet/ui'
-import { header, headerRow, horizontalStack } from './componentsStyles.css'
+import styles from '../../styles/component.module.scss'
 import GithubAndDocumentationButtons from './GithubAndDocumentationButtons'
 import Logo from './Logo'
 
-const TopBar = () => {
+type Themes = 'light' | 'dark'
+
+const TopBar = ({ setTheme }: { setTheme: (theme: Themes) => void }) => {
   const { theme } = useTheme()
 
   return (
-    <header className={header}>
-      <div className={headerRow}>
+    <header className={styles.header}>
+      <div className={styles.headerRow}>
         <Logo />
-        <div className={horizontalStack}>
+        <div className={styles.horizontalStack}>
           <Breakpoint up="medium">
             <GithubAndDocumentationButtons />
           </Breakpoint>
           <SunIcon size="small" />
-          <Toggle checked={theme === 'dark'} name="darkMode" />
+          <Toggle
+            checked={theme === 'dark'}
+            name="darkMode"
+            onChange={() => {
+              setTheme(theme === 'light' ? 'dark' : 'light')
+            }}
+          />
           <MoonIcon size="small" />
         </div>
       </div>

examples/next/src/components/Logo.tsx

@@ -1,4 +1,4 @@
-import { logo } from './componentsStyles.css'
+import styles from '../../styles/component.module.scss'
 
 type LogoProps = {
   width?: number
@@ -13,7 +13,7 @@ const Logo = ({ width = 148, height = 24 }: LogoProps) => (
     width={width}
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g className={logo}>
+    <g className={styles.logo}>
       <path d="M124.75,80.79a30.52,30.52,0,0,1-14.36-3.69A33.58,33.58,0,0,1,98.8,67.15a2.39,2.39,0,0,1-.43-.84,2.29,2.29,0,0,1-.08-.94,2.41,2.41,0,0,1,.3-.89,2.11,2.11,0,0,1,.62-.71l5.54-4.93a2.37,2.37,0,0,1,1.64-.61h.41a2.53,2.53,0,0,1,1,.37,2.5,2.5,0,0,1,.76.76A22.31,22.31,0,0,0,116,66.74a18.69,18.69,0,0,0,9.64,2.67c3.69,0,6.46-.73,8.2-2.26a7,7,0,0,0,1.93-2.63,6.91,6.91,0,0,0,.53-3.21,7.33,7.33,0,0,0-.57-3.46,7.25,7.25,0,0,0-2.1-2.8q-3.22-2.46-10.46-4.62C108.93,47,101.79,40.18,101.79,30.21c0-6.15,2-11,6.15-14.35s9.44-4.93,16.21-4.93A29,29,0,0,1,148,22.21a2.55,2.55,0,0,1-.31,3.49l-5.39,4.52a2.34,2.34,0,0,1-1.65.62h-.31a2.63,2.63,0,0,1-1-.32,2.32,2.32,0,0,1-.75-.71A19.43,19.43,0,0,0,132.21,24a17.39,17.39,0,0,0-8.11-1.85,13.63,13.63,0,0,0-7.9,2.15,6.42,6.42,0,0,0-2,2.34,6.25,6.25,0,0,0-.67,3A6.7,6.7,0,0,0,116,35.14c2,1.65,5.44,3,10.35,4.2,6.68,1.86,11.91,4.31,15.7,7.5,4,3.48,6.06,8.33,6.06,14.45A17.89,17.89,0,0,1,145,71.44a19.33,19.33,0,0,1-8.33,6.88,26.63,26.63,0,0,1-11.95,2.47Z" />
       <path d="M177.91,80.8a23.08,23.08,0,0,1-12.43-3.28,22.25,22.25,0,0,1-8.5-9,26.56,26.56,0,0,1-3-12.89,25.89,25.89,0,0,1,3-12.78,22.29,22.29,0,0,1,8.5-9,24.52,24.52,0,0,1,12.32-3.28,20.5,20.5,0,0,1,10.37,2.55A28,28,0,0,1,196,40a2.48,2.48,0,0,1,.5,1.82,2.54,2.54,0,0,1-.91,1.66L191.07,47a2.88,2.88,0,0,1-1.56.52h-.41a2.48,2.48,0,0,1-.94-.34,2.63,2.63,0,0,1-.72-.69,11.06,11.06,0,0,0-4.06-3.89,11.36,11.36,0,0,0-5.47-1.43,12.88,12.88,0,0,0-6.42,1.74A11.74,11.74,0,0,0,167,48a18.86,18.86,0,0,0,0,15.34,11.83,11.83,0,0,0,4.46,5.12,10.86,10.86,0,0,0,6.42,1.73,12.34,12.34,0,0,0,6-1.18,13.8,13.8,0,0,0,4.35-3.68,2.59,2.59,0,0,1,3.42-.51l4.88,3.37a2.39,2.39,0,0,1,.68.7,2.55,2.55,0,0,1,.36.91,2.64,2.64,0,0,1,0,1,2.39,2.39,0,0,1-.4.89v0l0,0,0,0h0a24.63,24.63,0,0,1-8.3,6.54A24.25,24.25,0,0,1,177.91,80.8Z" />
       <path d="M224.45,80.8a22.53,22.53,0,0,1-20.53-12.28,29,29,0,0,1,0-25.67,22.29,22.29,0,0,1,20.33-12.27A21.48,21.48,0,0,1,234,32.82a16.85,16.85,0,0,1,2.86,1.85v-.21A2.49,2.49,0,0,1,239.28,32h6.14a2.46,2.46,0,0,1,1.72.73,2.5,2.5,0,0,1,.73,1.73h0V76.81a2.48,2.48,0,0,1-2.45,2.45h-6.13a2.48,2.48,0,0,1-2.46-2.45h0v-.1c-.92.61-1.83,1.18-2.76,1.74A19.65,19.65,0,0,1,224.45,80.8Zm-.2-39.59A11.8,11.8,0,0,0,218,43a13,13,0,0,0-4.4,5A18,18,0,0,0,212,55.63a17.08,17.08,0,0,0,1.63,7.77,11.7,11.7,0,0,0,4.4,5.12,10.21,10.21,0,0,0,6.23,1.74,13,13,0,0,0,6.44-1.74,11.74,11.74,0,0,0,4.39-5.12,19.05,19.05,0,0,0,0-15.33,12.25,12.25,0,0,0-4.39-5,10.61,10.61,0,0,0-6.44-1.84Z" />

examples/next/src/components/componentsStyles.css.ts

@@ -13,7 +13,10 @@ import {
   consoleLightTheme,
   ThemeProvider,
 } from '@ultraviolet/themes'
-import '../components/globalStyle.css'
+import '@ultraviolet/themes/dark.css'
+import '@ultraviolet/themes/light.css'
+import '@ultraviolet/themes/darker.css'
+import '../../styles/global.css'
 
 type Themes = 'light' | 'dark'
 
@@ -35,6 +38,12 @@ const COMMON_THEME_PROPS = {
 
 const App = ({ Component, pageProps }: AppProps) => {
   const [theme, setTheme] = useState<Themes>('light')
+
+  const setThemes = (theme: Themes) => {
+    setTheme(theme)
+    document.documentElement.classList.remove('light-theme', 'dark-theme')
+    document.documentElement.classList.add(`${theme}-theme`)
+  }
   const setThemeCallBack = useCallback((localTheme: Themes) => {
     localStorage.setItem('theme', localTheme)
     setTheme(localTheme)
@@ -86,7 +95,7 @@ const App = ({ Component, pageProps }: AppProps) => {
     <ThemeProvider theme={theme === 'light' ? localLightTheme : localDarkTheme}>
       <Head />
       <Stack alignItems="center" gap={4}>
-        <Header />
+        <Header setTheme={setThemes} />
         <Component
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...pageProps}