update open in codesandbox and stackblitz

actifyjs · Jun 5, 2024 · 8b60fe0 · 8b60fe0
1 parent 521f19b
commit 8b60fe0
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 43 deletions.
diff --git a/apps/docs/src/components/OpenInCodeSandbox.tsx b/apps/docs/src/components/OpenInCodeSandbox.tsx
@@ -23,8 +23,8 @@ const OpenInCodeSandbox = ({ title, code }: OpenInCodeSandboxProps) => {
             },
             dependencies: {
               actify: `^${packageInfo.version}`,
-              react: 'rc',
-              'react-dom': 'rc'
+              react: '19.0.0-rc-f994737d14-20240522',
+              'react-dom': '19.0.0-rc-f994737d14-20240522'
             },
             devDependencies: {
               '@vitejs/plugin-react': '^1.3.0',
@@ -59,7 +59,46 @@ ReactDOM.createRoot(document.getElementById('root')).render(
       'main.css': {
         content: `@tailwind base;
 @tailwind components;
-@tailwind utilities;`,
+@tailwind utilities;
+:root {
+  --md-sys-color-background: #fff8f3;
+  --md-sys-color-on-background: #201b12;
+  --md-sys-color-surface: #fff8f3;
+  --md-sys-color-surface-dim: #e4d8cb;
+  --md-sys-color-surface-bright: #fff8f3;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #fef2e4;
+  --md-sys-color-surface-container: #f8ecde;
+  --md-sys-color-surface-container-high: #f3e6d8;
+  --md-sys-color-surface-container-highest: #ede1d3;
+  --md-sys-color-on-surface: #201b12;
+  --md-sys-color-surface-variant: #f2e0c9;
+  --md-sys-color-on-surface-variant: #504534;
+  --md-sys-color-inverse-surface: #362f26;
+  --md-sys-color-inverse-on-surface: #fbefe1;
+  --md-sys-color-outline: #837562;
+  --md-sys-color-outline-variant: #d5c4ae;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #7f5700;
+  --md-sys-color-primary: #7f5700;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #f7b337;
+  --md-sys-color-on-primary-container: #442d00;
+  --md-sys-color-inverse-primary: #ffba3e;
+  --md-sys-color-secondary: #765a2b;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #ffdca9;
+  --md-sys-color-on-secondary-container: #5c4316;
+  --md-sys-color-tertiary: #566500;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #b6ca54;
+  --md-sys-color-on-tertiary-container: #2d3600;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}`,
         isBinary: false
       },
       'postcss.config.js': {
@@ -78,45 +117,45 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   theme: {
     extend: {
       colors: {
-        background: 'var(--md-sys-color-background)',
-        'on-background': 'var(--md-sys-color-on-background)',
-        surface: 'var(--md-sys-color-surface)',
-        'surface-dim': 'var(--md-sys-color-surface-dim)',
-        'surface-bright': 'var(--md-sys-color-surface-bright)',
+        background: 'var(--md-sys-color-background,#fff8f3)',
+        'on-background': 'var(--md-sys-color-on-background,#201b12)',
+        surface: 'var(--md-sys-color-surface,#fff8f3)',
+        'surface-dim': 'var(--md-sys-color-surface-dim,#e4d8cb)',
+        'surface-bright': 'var(--md-sys-color-surface-bright,#fff8f3)',
         'surface-container-lowest':
-          'var(--md-sys-color-surface-container-lowest)',
-        'surface-container-low': 'var(--md-sys-color-surface-container-low)',
-        'surface-container': 'var(--md-sys-color-surface-container)',
-        'surface-container-high': 'var(--md-sys-color-surface-container-high)',
+          'var(--md-sys-color-surface-container-lowest,#ffffff)',
+        'surface-container-low': 'var(--md-sys-color-surface-container-low,#fef2e4)',
+        'surface-container': 'var(--md-sys-color-surface-container,#f8ecde)',
+        'surface-container-high': 'var(--md-sys-color-surface-container-high,#f3e6d8)',
         'surface-container-highest':
-          'var(--md-sys-color-surface-container-highest)',
-        'on-surface': 'var(--md-sys-color-on-surface)',
-        'surface-variant': 'var(--md-sys-color-surface-variant)',
-        'on-surface-variant': 'var(--md-sys-color-on-surface-variant)',
-        'inverse-surface': 'var(--md-sys-color-inverse-surface)',
-        'inverse-on-surface': 'var(--md-sys-color-inverse-on-surface)',
-        outline: 'var(--md-sys-color-outline)',
-        'outline-variant': 'var(--md-sys-color-outline-variant)',
-        shadow: 'var(--md-sys-color-shadow)',
-        scrim: 'var(--md-sys-color-scrim)',
-        'surface-tint': 'var(--md-sys-color-surface-tint)',
-        primary: 'var(--md-sys-color-primary)',
-        'on-primary': 'var(--md-sys-color-on-primary)',
-        'primary-container': 'var(--md-sys-color-primary-container)',
-        'on-primary-container': 'var(--md-sys-color-on-primary-container)',
-        'inverse-primary': 'var(--md-sys-color-inverse-primary)',
-        secondary: 'var(--md-sys-color-secondary)',
-        'on-secondary': 'var(--md-sys-color-on-secondary)',
-        'secondary-container': 'var(--md-sys-color-secondary-container)',
-        'on-secondary-container': 'var(--md-sys-color-on-secondary-container)',
-        tertiary: 'var(--md-sys-color-tertiary)',
-        'on-tertiary': 'var(--md-sys-color-on-tertiary)',
-        'tertiary-container': 'var(--md-sys-color-tertiary-container)',
-        'on-tertiary-container': 'var(--md-sys-color-on-tertiary-container)',
-        error: 'var(--md-sys-color-error)',
-        'on-error': 'var(--md-sys-color-on-error)',
-        'error-container': 'var(--md-sys-color-error-container)',
-        'on-error-container': 'var(--md-sys-color-on-error-container)'
+          'var(--md-sys-color-surface-container-highest,#ede1d3)',
+        'on-surface': 'var(--md-sys-color-on-surface,#201b12)',
+        'surface-variant': 'var(--md-sys-color-surface-variant,#f2e0c9)',
+        'on-surface-variant': 'var(--md-sys-color-on-surface-variant,#504534)',
+        'inverse-surface': 'var(--md-sys-color-inverse-surface,#362f26)',
+        'inverse-on-surface': 'var(--md-sys-color-inverse-on-surface,#fbefe1)',
+        outline: 'var(--md-sys-color-outline,#837562)',
+        'outline-variant': 'var(--md-sys-color-outline-variant,#d5c4ae)',
+        shadow: 'var(--md-sys-color-shadow,#000000)',
+        scrim: 'var(--md-sys-color-scrim,#000000)',
+        'surface-tint': 'var(--md-sys-color-surface-tint,#7f5700)',
+        primary: 'var(--md-sys-color-primary,#7f5700)',
+        'on-primary': 'var(--md-sys-color-on-primary,#ffffff)',
+        'primary-container': 'var(--md-sys-color-primary-container,#f7b337)',
+        'on-primary-container': 'var(--md-sys-color-on-primary-container,#442d00)',
+        'inverse-primary': 'var(--md-sys-color-inverse-primary,#ffba3e)',
+        secondary: 'var(--md-sys-color-secondary,#765a2b)',
+        'on-secondary': 'var(--md-sys-color-on-secondary,#ffffff)',
+        'secondary-container': 'var(--md-sys-color-secondary-container,#ffdca9)',
+        'on-secondary-container': 'var(--md-sys-color-on-secondary-container,#5c4316)',
+        tertiary: 'var(--md-sys-color-tertiary,#566500)',
+        'on-tertiary': 'var(--md-sys-color-on-tertiary,#ffffff)',
+        'tertiary-container': 'var(--md-sys-color-tertiary-container,#b6ca54)',
+        'on-tertiary-container': 'var(--md-sys-color-on-tertiary-container,#2d3600)',
+        error: 'var(--md-sys-color-error,#ba1a1a)',
+        'on-error': 'var(--md-sys-color-on-error,#ffffff)',
+        'error-container': 'var(--md-sys-color-error-container,#ffdad6)',
+        'on-error-container': 'var(--md-sys-color-on-error-container,#410002)'
       }
     }
   },

diff --git a/apps/docs/src/components/OpenInStackblitz.tsx b/apps/docs/src/components/OpenInStackblitz.tsx
@@ -46,8 +46,8 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   },
   "dependencies": {
     "actify": "^${packageInfo.version}",
-    "react": "rc",
-    "react-dom": "rc"
+    "react": "19.0.0-rc-f994737d14-20240522",
+    "react-dom": "19.0.0-rc-f994737d14-20240522"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^1.3.0",
@@ -59,7 +59,46 @@ ReactDOM.createRoot(document.getElementById('root')).render(
 }`,
       'main.css': `@tailwind base;
 @tailwind components;
-@tailwind utilities;`,
+@tailwind utilities;
+:root {
+  --md-sys-color-background: #fff8f3;
+  --md-sys-color-on-background: #201b12;
+  --md-sys-color-surface: #fff8f3;
+  --md-sys-color-surface-dim: #e4d8cb;
+  --md-sys-color-surface-bright: #fff8f3;
+  --md-sys-color-surface-container-lowest: #ffffff;
+  --md-sys-color-surface-container-low: #fef2e4;
+  --md-sys-color-surface-container: #f8ecde;
+  --md-sys-color-surface-container-high: #f3e6d8;
+  --md-sys-color-surface-container-highest: #ede1d3;
+  --md-sys-color-on-surface: #201b12;
+  --md-sys-color-surface-variant: #f2e0c9;
+  --md-sys-color-on-surface-variant: #504534;
+  --md-sys-color-inverse-surface: #362f26;
+  --md-sys-color-inverse-on-surface: #fbefe1;
+  --md-sys-color-outline: #837562;
+  --md-sys-color-outline-variant: #d5c4ae;
+  --md-sys-color-shadow: #000000;
+  --md-sys-color-scrim: #000000;
+  --md-sys-color-surface-tint: #7f5700;
+  --md-sys-color-primary: #7f5700;
+  --md-sys-color-on-primary: #ffffff;
+  --md-sys-color-primary-container: #f7b337;
+  --md-sys-color-on-primary-container: #442d00;
+  --md-sys-color-inverse-primary: #ffba3e;
+  --md-sys-color-secondary: #765a2b;
+  --md-sys-color-on-secondary: #ffffff;
+  --md-sys-color-secondary-container: #ffdca9;
+  --md-sys-color-on-secondary-container: #5c4316;
+  --md-sys-color-tertiary: #566500;
+  --md-sys-color-on-tertiary: #ffffff;
+  --md-sys-color-tertiary-container: #b6ca54;
+  --md-sys-color-on-tertiary-container: #2d3600;
+  --md-sys-color-error: #ba1a1a;
+  --md-sys-color-on-error: #ffffff;
+  --md-sys-color-error-container: #ffdad6;
+  --md-sys-color-on-error-container: #410002;
+}`,
       'postcss.config.js': `module.exports = {
   plugins: {
     tailwindcss: {},