Merge pull request #95 from codewithkyle/wip-0.10

📦 Release v0.10.0

Author: codewithkyle

.github/workflows/deploy.yml

@@ -3,7 +3,7 @@ name: Deployment
 on:
     push:
         branches:
-            - "wip-0.10"
+            - master
     workflow_dispatch:
 
 jobs:

README.md

@@ -54,18 +54,7 @@ module.exports = {
             700: "#3F3F46",
             800: "#27272A",
             900: "#18181B",
-        },
-        neutral: {
-            50: "#FAFAFA",
-            100: "#F5F5F5",
-            200: "#E5E5E5",
-            300: "#D4D4D4",
-            400: "#A3A3A3",
-            500: "#737373",
-            600: "#525252",
-            700: "#404040",
-            800: "#262626",
-            900: "#171717",
+            950: "#09090b",
         },
         primary: {
             50: "#EFF6FF",
@@ -78,18 +67,7 @@ module.exports = {
             700: "#1D4ED8",
             800: "#1E40AF",
             900: "#1E3A8A",
-        },
-        info: {
-            50: "#EFF6FF",
-            100: "#DBEAFE",
-            200: "#BFDBFE",
-            300: "#93C5FD",
-            400: "#60A5FA",
-            500: "#3B82F6",
-            600: "#2563EB",
-            700: "#1D4ED8",
-            800: "#1E40AF",
-            900: "#1E3A8A",
+            950: "#172554",
         },
         success: {
             50: "#ECFDF5",
@@ -102,6 +80,7 @@ module.exports = {
             700: "#047857",
             800: "#065F46",
             900: "#064E3B",
+            950: "#022c22",
         },
         danger: {
             50: "#FFF1F2",
@@ -114,6 +93,7 @@ module.exports = {
             700: "#BE123C",
             800: "#9F1239",
             900: "#881337",
+            950: "#4c0519",
         },
         warning: {
             50: "#FFFBEB",
@@ -126,6 +106,7 @@ module.exports = {
             700: "#B45309",
             800: "#92400E",
             900: "#78350F",
+            950: "#451a03",
         },
     },
     borders: {
@@ -137,15 +118,13 @@ module.exports = {
     variables: {
         "focus-ring": "1px auto var(--primary-500)",
         "focus-ring-offset": "5px",
-        "bevel": "0 1px 0 hsl(0deg 0% 0% / 0.1), inset 0 -2px 0 hsl(0deg 0% 0% / 0.05)",
-        "primary-opaque-hover": "rgba(14,165,233,0.05)",
-        "primary-opaque-active": "rgba(14,165,233,0.1)",
+        "bevel": "0 1px 0 hsl(0deg 0% 0% / 0.1)",
         "input-border": "1px solid var(--grey-300)",
-        "button-shadow": "0px 1px 2px -1px rgba(0, 0, 0, 0.09), 0px 7px 14px -5px rgba(0, 0, 0, 0.06), 0px 3px 7px -2px rgba(0, 0, 0, 0.04), inset 0px -1px 0px 1px rgba(0, 0, 0, 0.06)",
+        "button-shadow": "0px 1px 2px -1px rgba(0, 0, 0, 0.09), inset 0px -1px 0px 1px rgba(0, 0, 0, 0.06)",
     },
     shadows: {
         colors: {
-            grey: "0deg 0% 0%",
+            black: "var(--black-hsl)",
         },
         sizes: {
             sm: `
@@ -174,6 +153,12 @@ module.exports = {
             `,
         },
     },
+    prefixes: {
+        dark: {
+            features: ["backgrounds", "fonts", "borders", "shadows"],
+            rule: "prefers-color-scheme: dark",
+        },
+    },
 };
 ```
 

brixi.config.js

@@ -17,18 +17,7 @@ module.exports = {
             700: "#3F3F46",
             800: "#27272A",
             900: "#18181B",
-        },
-        neutral: {
-            50: "#FAFAFA",
-            100: "#F5F5F5",
-            200: "#E5E5E5",
-            300: "#D4D4D4",
-            400: "#A3A3A3",
-            500: "#737373",
-            600: "#525252",
-            700: "#404040",
-            800: "#262626",
-            900: "#171717",
+            950: "#09090b",
         },
         primary: {
             50: "#EFF6FF",
@@ -41,18 +30,7 @@ module.exports = {
             700: "#1D4ED8",
             800: "#1E40AF",
             900: "#1E3A8A",
-        },
-        info: {
-            50: "#EFF6FF",
-            100: "#DBEAFE",
-            200: "#BFDBFE",
-            300: "#93C5FD",
-            400: "#60A5FA",
-            500: "#3B82F6",
-            600: "#2563EB",
-            700: "#1D4ED8",
-            800: "#1E40AF",
-            900: "#1E3A8A",
+            950: "#172554",
         },
         success: {
             50: "#ECFDF5",
@@ -65,6 +43,7 @@ module.exports = {
             700: "#047857",
             800: "#065F46",
             900: "#064E3B",
+            950: "#022c22",
         },
         danger: {
             50: "#FFF1F2",
@@ -77,6 +56,7 @@ module.exports = {
             700: "#BE123C",
             800: "#9F1239",
             900: "#881337",
+            950: "#4c0519",
         },
         warning: {
             50: "#FFFBEB",
@@ -89,6 +69,7 @@ module.exports = {
             700: "#B45309",
             800: "#92400E",
             900: "#78350F",
+            950: "#451a03",
         },
     },
     borders: {
@@ -100,15 +81,13 @@ module.exports = {
     variables: {
         "focus-ring": "1px auto var(--primary-500)",
         "focus-ring-offset": "5px",
-        "bevel": "0 1px 0 hsl(0deg 0% 0% / 0.1), inset 0 -2px 0 hsl(0deg 0% 0% / 0.05)",
-        "primary-opaque-hover": "rgba(14,165,233,0.05)",
-        "primary-opaque-active": "rgba(14,165,233,0.1)",
+        "bevel": "0 1px 0 hsl(0deg 0% 0% / 0.1)",
         "input-border": "1px solid var(--grey-300)",
-        "button-shadow": "0px 1px 2px -1px rgba(0, 0, 0, 0.09), 0px 7px 14px -5px rgba(0, 0, 0, 0.06), 0px 3px 7px -2px rgba(0, 0, 0, 0.04), inset 0px -1px 0px 1px rgba(0, 0, 0, 0.06)",
+        "button-shadow": "0px 1px 2px -1px rgba(0, 0, 0, 0.09), inset 0px -1px 0px 1px rgba(0, 0, 0, 0.06)",
     },
     shadows: {
         colors: {
-            grey: "var(--black-hsl)",
+            black: "var(--black-hsl)",
         },
         sizes: {
             sm: `
@@ -137,4 +116,10 @@ module.exports = {
             `,
         },
     },
+    prefixes: {
+        dark: {
+            features: ["backgrounds", "fonts", "borders", "shadows"],
+            rule: "prefers-color-scheme: dark",
+        },
+    },
 };

build/iframe-generator.js

@@ -19,21 +19,32 @@ const componentsDir = path.join(cwd, "src", "framework", "components");
             .replace(/.*[\\\/]/, "")
             .toLowerCase()
             .trim();
-        const p = component
+        const spaHtml = await renderComponent(name, component);
+        const spaDir = path.join(publicDir, "spa", name);
+        if (!fs.existsSync(spaDir)) {
+            await fs.promises.mkdir(spaDir, { recursive: true });
+        }
+        await fs.promises.writeFile(path.join(spaDir, "index.html"), spaHtml);
+    }
+    const mpaComponents = glob.sync(`${componentsDir}/**/static.html`);
+    for (const component of mpaComponents) {
+        const name = component
             .match(/.*[\\\/]/, "")[0]
+            .replace(/[\\\/]$/, "")
+            .replace(/.*[\\\/]/, "")
             .toLowerCase()
             .trim();
-        const html = await renderComponent(name, p);
-        const pDir = path.join(publicDir, name);
-        if (!fs.existsSync(pDir)) {
-            await fs.promises.mkdir(pDir);
+        const mpaHtml = await renderComponent(name, component);
+        const mpaDir = path.join(publicDir, "mpa", name);
+        if (!fs.existsSync(mpaDir)) {
+            await fs.promises.mkdir(mpaDir, { recursive: true });
         }
-        await fs.promises.writeFile(path.join(pDir, "index.html"), html);
+        await fs.promises.writeFile(path.join(mpaDir, "index.html"), mpaHtml);
     }
 })();
 
 async function renderComponent(name, p) {
-    const content = await fs.promises.readFile(path.join(p, "index.html"), { encoding: "utf-8" });
+    const content = await fs.promises.readFile(p, { encoding: "utf-8" });
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -59,7 +70,7 @@ async function renderComponent(name, p) {
     <script type="module" src="/js/${name}.js"></script>
 </head>
 <body>
-    ${content}
+    ${content.trim().length ? content : '<p>Coming soon.</p>'}
 </body>
 </html>
 `;