Update CSSRuntimeProvider imports

master-co · Mar 3, 2024 · 68cb136 · 68cb136
1 parent 5e6197f
commit 68cb136
Show file tree

Hide file tree

Showing 16 changed files with 25 additions and 50 deletions.
diff --git a/examples/next.js-with-runtime-rendering/app/layout.tsx b/examples/next.js-with-runtime-rendering/app/layout.tsx
@@ -1,5 +1,5 @@
 import './globals.css'
-import { CSSRuntimeProvider } from '@master/css.react'
+import CSSRuntimeProvider from '@master/css.react'
 import config from '../master.css'
 
 export const metadata = {

diff --git a/examples/next.js/app/layout.tsx b/examples/next.js/app/layout.tsx
@@ -1,5 +1,5 @@
 import './globals.css'
-import { CSSRuntimeProvider } from '@master/css.react'
+import CSSRuntimeProvider from '@master/css.react'
 import config from '../master.css'
 
 export const metadata = {

diff --git a/examples/nuxt.js-with-runtime-rendering/app.vue b/examples/nuxt.js-with-runtime-rendering/app.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CSSRuntimeProvider } from '@master/css.vue'
+import CSSRuntimeProvider from '@master/css.vue'
 import config from './master.css'
 </script>
 

diff --git a/examples/react-with-static-extraction/index.html b/examples/react-with-static-extraction/index.html
@@ -9,7 +9,7 @@
     <link href="./src/index.css" rel="stylesheet" />
 </head>
 
-<body class="bg:gray-10@dark bg:white@light fg:white@dark fg:slate-20@light">
+<body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
 </body>

diff --git a/examples/react-with-static-extraction/src/App.tsx b/examples/react-with-static-extraction/src/App.tsx
@@ -7,20 +7,18 @@ function App() {
     return (
         <>
             <div className='grid-cols:2 w:fit mx:auto'>
+                <a href="https://rc.css.master.co" target="_blank">
+                    <img src={masterLogo} className="logo master scale(2)" alt="Master logo" />
+                </a>
                 <a href="https://reactjs.org" target="_blank">
                     <img src={reactLogo} className="logo react" alt="React logo" />
                 </a>
-                <a href="https://rc.css.master.co" target="_blank">
-                    <img src={masterLogo} className="logo master scale(1.6)" alt="Master logo" />
-                </a>
             </div>
-            <h1 className="font:sans ls:-.25 fg:white@dark font:heavy">
-                <span className="fg:#00D8FF">React</span>
-                <span className="fg:slate-70 mx:10 font:semibold">+</span>
-                <span>Master CSS</span>
+            <h1 className="font:sans ls:-.25 font:heavy">
+                <span>Master CSS</span> <span className="fg:#00D8FF">React</span>
             </h1>
             <div className="card">
-                <button className="h:40 bg:gray-20@dark bg:slate-90@light" onClick={() => setCount((count) => count + 1)}>
+                <button className="h:40" onClick={() => setCount((count) => count + 1)}>
                     count is {count}
                 </button>
             </div>

diff --git a/examples/react/index.html b/examples/react/index.html
@@ -9,7 +9,7 @@
     <link href="./src/index.css" rel="stylesheet" />
 </head>
 
-<body class="bg:gray-10@dark bg:white@light fg:white@dark fg:slate-20@light">
+<body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
 </body>

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -7,20 +7,18 @@ function App() {
     return (
         <>
             <div className='grid-cols:2 w:fit mx:auto'>
+                <a href="https://rc.css.master.co" target="_blank">
+                    <img src={masterLogo} className="logo master scale(2)" alt="Master logo" />
+                </a>
                 <a href="https://reactjs.org" target="_blank">
                     <img src={reactLogo} className="logo react" alt="React logo" />
                 </a>
-                <a href="https://rc.css.master.co" target="_blank">
-                    <img src={masterLogo} className="logo master scale(1.6)" alt="Master logo" />
-                </a>
             </div>
             <h1 className="font:sans ls:-.25 fg:white@dark font:heavy">
-                <span className="fg:#00D8FF">React</span>
-                <span className="fg:slate-70 mx:10 font:semibold">+</span>
-                <span>Master CSS</span>
+                <span>Master CSS</span> <span className="fg:#00D8FF">React</span>
             </h1>
             <div className="card">
-                <button className="h:40 bg:gray-20@dark bg:slate-90@light" onClick={() => setCount((count) => count + 1)}>
+                <button className="h:40 bg:gray-80" onClick={() => setCount((count) => count + 1)}>
                     count is {count}
                 </button>
             </div>

diff --git a/examples/react/src/index.css b/examples/react/src/index.css
@@ -34,12 +34,6 @@
     }
 }
 
-@media (prefers-reduced-motion: no-preference) {
-    .logo.react {
-        animation: logo-spin infinite 20s linear;
-    }
-}
-
 .card {
     padding: 2em;
 }
@@ -107,18 +101,3 @@ button:focus,
 button:focus-visible {
     outline: 4px auto -webkit-focus-ring-color;
 }
-
-@media (prefers-color-scheme: light) {
-    :root {
-        color: #213547;
-        background-color: #ffffff;
-    }
-
-    a:hover {
-        color: #747bff;
-    }
-
-    button {
-        background-color: #f9f9f9;
-    }
-}
diff --git a/examples/react/src/main.tsx b/examples/react/src/main.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
-import { CSSRuntimeProvider } from '@master/css.react'
+import CSSRuntimeProvider from '@master/css.react'
 import config from '../master.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

diff --git a/examples/svelte-with-runtime-rendering/src/routes/+layout.svelte b/examples/svelte-with-runtime-rendering/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { CSSRuntimeProvider } from "@master/css.svelte";
+    import CSSRuntimeProvider from "@master/css.svelte";
     import config from "../../master.css";
     import Header from "./Header.svelte";
     import "./styles.css";

diff --git a/website/app/[locale]/(root)/docs/installation/nextjs/content.mdx b/website/app/[locale]/(root)/docs/installation/nextjs/content.mdx
@@ -101,7 +101,7 @@ import ProgressiveRenderingIntro from '../../rendering-modes/components/Progress
                         lang: 'tsx',
                         code: `
                             import './globals.css'
-                            +import { CSSRuntimeProvider } from '@master/css.react'
+                            +import CSSRuntimeProvider from '@master/css.react'
                             +import config from '../master.css'
 
                             export const metadata = {

diff --git a/website/app/[locale]/(root)/docs/installation/nextjs/runtime-rendering/content.mdx b/website/app/[locale]/(root)/docs/installation/nextjs/runtime-rendering/content.mdx
@@ -99,7 +99,7 @@ import RuntimeRenderingIntro from '../../../rendering-modes/components/RuntimeRe
                         lang: 'tsx',
                         code: `
                             import './globals.css'
-                            +import { CSSRuntimeProvider } from '@master/css.react'
+                            +import CSSRuntimeProvider from '@master/css.react'
                             +import config from '../master.css'
 
                             export const metadata = {
@@ -126,7 +126,7 @@ import RuntimeRenderingIntro from '../../../rendering-modes/components/RuntimeRe
                         code: `
                             import '../styles/globals.css'
                             import type { AppProps } from 'next/app'
-                            +import { CSSRuntimeProvider } from '@master/css.react'
+                            +import CSSRuntimeProvider from '@master/css.react'
                             +import config from '../master.css'
 
                             export default function App({ Component, pageProps }: AppProps) {

diff --git a/website/app/[locale]/(root)/docs/installation/nuxtjs/runtime-rendering/content.mdx b/website/app/[locale]/(root)/docs/installation/nuxtjs/runtime-rendering/content.mdx
@@ -77,7 +77,7 @@ import RuntimeRenderingIntro from '../../../rendering-modes/components/RuntimeRe
         <StepR>
             ```html name=app.vue
             <script setup lang="ts">
-            +import { CSSRuntimeProvider } from '@master/css.vue'
+            +import CSSRuntimeProvider from '@master/css.vue'
             +import config from './master.css'
             </script>
 

diff --git a/website/app/[locale]/(root)/docs/installation/react/content.mdx b/website/app/[locale]/(root)/docs/installation/react/content.mdx
@@ -84,7 +84,7 @@ A full-stack framework, such as [Next.js](/docs/installation/nextjs), [Remix](/d
             import ReactDOM from 'react-dom/client'
             import App from './App'
             import './index.css'
-            +import { CSSRuntimeProvider } from '@master/css.react'
+            +import CSSRuntimeProvider from '@master/css.react'
             +import config from '../master.css'
 
             ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

diff --git a/website/app/[locale]/(root)/docs/installation/svelte/runtime-rendering/content.mdx b/website/app/[locale]/(root)/docs/installation/svelte/runtime-rendering/content.mdx
@@ -99,7 +99,7 @@ import RuntimeRenderingIntro from '../../../rendering-modes/components/RuntimeRe
         <StepR>
             ```svelte name=src/routes/%2Blayout.svelte
                 <script>
-                +    import { CSSRuntimeProvider } from "@master/css.svelte";
+                +    import CSSRuntimeProvider from "@master/css.svelte";
                 +    import config from '../../master.css';
                     import Header from "./Header.svelte";
                     import "./styles.css";

diff --git a/website/app/[locale]/(root)/docs/installation/vuejs/content.mdx b/website/app/[locale]/(root)/docs/installation/vuejs/content.mdx
@@ -80,7 +80,7 @@ A full-stack framework, such as [Nuxt.js](/docs/installation/nuxtjs), is recomme
         <StepR>
             ```html name=src/App.vue
             <script setup lang="ts">
-            +import { CSSRuntimeProvider } from '@master/css.vue'
+            +import CSSRuntimeProvider from '@master/css.vue'
             +import config from '../master.css'
             </script>