From c830d683216e3ed21cc81369b6760518f4da7b65 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sat, 13 Apr 2024 13:22:16 -0400
Subject: [PATCH] Move all settings for fonts, colors and other design tokens
 to CustomStyles

---
 .vscode/astrowind/config-schema.json      | 144 +---------------------
 README.md                                 |  32 ++---
 package-lock.json                         |   2 +-
 package.json                              |   2 +-
 src/components/CustomStyles.astro         |  91 +++++++-------
 src/config.yaml                           |  25 ----
 vendor/integration/utils/configBuilder.ts |  27 ----
 7 files changed, 52 insertions(+), 271 deletions(-)

diff --git a/.vscode/astrowind/config-schema.json b/.vscode/astrowind/config-schema.json
index 08fd2b7..3297fa3 100644
--- a/.vscode/astrowind/config-schema.json
+++ b/.vscode/astrowind/config-schema.json
@@ -266,151 +266,9 @@
       "properties": {
         "theme": {
           "type": "string"
-        },
-        "tokens": {
-          "type": "object",
-          "properties": {
-            "default": {
-              "type": "object",
-              "properties": {
-                "colors": {
-                  "type": "object",
-                  "properties": {
-                    "default": {
-                      "type": "string"
-                    },
-                    "heading": {
-                      "type": "string"
-                    },
-                    "muted": {
-                      "type": "string"
-                    },
-                    "bgPage": {
-                      "type": "string"
-                    },
-                    "primary": {
-                      "type": "string"
-                    },
-                    "secondary": {
-                      "type": "string"
-                    },
-                    "accent": {
-                      "type": "string"
-                    },
-                    "info": {
-                      "type": "string"
-                    },
-                    "success": {
-                      "type": "string"
-                    },
-                    "warning": {
-                      "type": "string"
-                    },
-                    "error": {
-                      "type": "string"
-                    },
-                    "link": {
-                      "type": "string"
-                    },
-                    "linkActive": {
-                      "type": "string"
-                    }
-                  },
-                  "required": [
-                    "default",
-                    "heading",
-                    "muted",
-                    "bgPage",
-                    "primary",
-                    "secondary",
-                    "accent"
-                  ]
-                },
-                "fonts": {
-                  "type": "object",
-                  "properties": {
-                    "sans": {
-                      "type": "string"
-                    },
-                    "serif": {
-                      "type": "string"
-                    },
-                    "heading": {
-                      "type": "string"
-                    }
-                  },
-                  "required": ["sans", "serif", "heading"]
-                }
-              },
-              "required": ["colors", "fonts"]
-            },
-            "dark": {
-              "type": "object",
-              "properties": {
-                "colors": {
-                  "type": "object",
-                  "properties": {
-                    "default": {
-                      "type": "string"
-                    },
-                    "heading": {
-                      "type": "string"
-                    },
-                    "muted": {
-                      "type": "string"
-                    },
-                    "bgPage": {
-                      "type": "string"
-                    },
-                    "primary": {
-                      "type": "string"
-                    },
-                    "secondary": {
-                      "type": "string"
-                    },
-                    "accent": {
-                      "type": "string"
-                    },
-                    "info": {
-                      "type": "string"
-                    },
-                    "success": {
-                      "type": "string"
-                    },
-                    "warning": {
-                      "type": "string"
-                    },
-                    "error": {
-                      "type": "string"
-                    },
-                    "link": {
-                      "type": "string"
-                    },
-                    "linkActive": {
-                      "type": "string"
-                    }
-                  },
-                  "required": [
-                    "default",
-                    "heading",
-                    "muted",
-                    "bgPage",
-                    "primary",
-                    "secondary",
-                    "accent"
-                  ]
-                },
-                "fonts": {
-                  "type": "object"
-                }
-              },
-              "required": ["colors", "fonts"]
-            }
-          },
-          "required": ["default", "dark"]
         }
       },
-      "required": ["theme", "tokens"]
+      "required": ["theme"]
     }
   },
   "required": ["site", "metadata", "i18n", "apps", "analytics", "ui"]
diff --git a/README.md b/README.md
index 1f26376..0785845 100644
--- a/README.md
+++ b/README.md
@@ -229,35 +229,17 @@ analytics:
 
 ui:
   theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"
-
-  tokens:
-    default:
-      fonts:
-        sans: InterVariable
-        serif: InterVariable
-        heading: InterVariable
-      colors:
-        default: rgb(16 16 16)
-        heading: rgb(0 0 0)
-        muted: rgb(16 16 16 / 66%)
-        bgPage: rgb(255 255 255)
-        primary: rgb(1 97 239)
-        secondary: rgb(1 84 207)
-        accent: rgb(109 40 217)
-    dark:
-      fonts: {}
-      colors:
-        default: rgb(229 236 246)
-        heading: rgb(247, 248, 248)
-        muted: rgb(229 236 246 / 66%)
-        bgPage: rgb(3 6 32)
-        primary: rgb(1 97 239)
-        secondary: rgb(1 84 207)
-        accent: rgb(109 40 217)
 ```
 
 <br>
 
+#### Customize Design
+
+To customize Font families, Colors or more Elements refer to the following files:
+
+- `src/components/CustomStyles.astro`
+- `src/assets/styles/tailwind.css`
+
 ### Deploy
 
 #### Deploy to production (manual)
diff --git a/package-lock.json b/package-lock.json
index 14e1109..a586de1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@onwidget/astrowind",
-  "version": "1.0.0-beta.28",
+  "version": "1.0.0-beta.29",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 263d214..1f00648 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onwidget/astrowind",
-  "version": "1.0.0-beta.28",
+  "version": "1.0.0-beta.29",
   "description": "AstroWind: A free template using Astro 4.0 and Tailwind CSS. Astro starter theme.",
   "type": "module",
   "private": true,
diff --git a/src/components/CustomStyles.astro b/src/components/CustomStyles.astro
index 98e0450..26ce2db 100644
--- a/src/components/CustomStyles.astro
+++ b/src/components/CustomStyles.astro
@@ -1,6 +1,4 @@
 ---
-import { UI } from 'astrowind:config';
-
 import '@fontsource-variable/inter';
 
 // 'DM Sans'
@@ -20,52 +18,47 @@ import '@fontsource-variable/inter';
 // 'Space Grotesk'
 // Urbanist
 
-const { tokens } = UI;
-
-const html = `
-  <style>
-    :root {
-      --aw-font-sans: ${tokens.default.fonts.sans ? `'${tokens.default.fonts.sans}'` : '""'};
-      --aw-font-serif: ${tokens.default.fonts.serif ? `'${tokens.default.fonts.serif}'` : 'var(--aw-font-sans)'};
-      --aw-font-heading: ${tokens.default.fonts.heading ? `'${tokens.default.fonts.heading}'` : 'var(--aw-font-sans)'};
-
-      --aw-color-primary: ${tokens.default.colors.primary};
-      --aw-color-secondary: ${tokens.default.colors.secondary};
-      --aw-color-accent: ${tokens.default.colors.accent};
-
-      --aw-color-text-heading: ${tokens.default.colors.heading};
-      --aw-color-text-default: ${tokens.default.colors.default};
-      --aw-color-text-muted: ${tokens.default.colors.muted};
-      --aw-color-bg-page: ${tokens.default.colors.bgPage};
-
-      --aw-color-bg-page-dark: ${tokens.dark.colors.bgPage};
-
-      ::selection {
-        background-color: lavender;
-      }
-    }
-
-    .dark {
-      ${tokens.dark.fonts.sans ? `--aw-font-sans: '${tokens.dark.fonts.sans}';` : ''}
-      ${tokens.dark.fonts.serif ? `--aw-font-serif: '${tokens.dark.fonts.serif};'` : ''}
-      ${tokens.dark.fonts.heading ? `--aw-font-heading: '${tokens.dark.fonts.heading}';` : ''}
-
-      --aw-color-primary: ${tokens.dark.colors.primary};
-      --aw-color-secondary: ${tokens.dark.colors.secondary};
-      --aw-color-accent: ${tokens.dark.colors.accent};
-
-      --aw-color-text-heading: ${tokens.dark.colors.heading};
-      --aw-color-text-default: ${tokens.dark.colors.default};
-      --aw-color-text-muted: ${tokens.dark.colors.muted};
-      --aw-color-bg-page: ${tokens.dark.colors.bgPage};
-
-      ::selection {
-        background-color: black;
-        color: snow;
-      }
-    }
-  </style>
-`;
 ---
 
-<Fragment set:html={html} />
+<style is:inline>
+  :root {
+    --aw-font-sans: 'InterVariable';
+    --aw-font-serif: 'InterVariable';
+    --aw-font-heading: 'InterVariable';
+
+    --aw-color-primary: rgb(1 97 239);
+    --aw-color-secondary: rgb(1 84 207);
+    --aw-color-accent: rgb(109 40 217);
+
+    --aw-color-text-heading: 'InterVariable';
+    --aw-color-text-default: rgb(16 16 16);
+    --aw-color-text-muted: rgb(16 16 16 / 66%);
+    --aw-color-bg-page: rgb(255 255 255);
+
+    --aw-color-bg-page-dark: rgb(3 6 32);
+
+    ::selection {
+      background-color: lavender;
+    }
+  }
+
+  .dark {
+    --aw-font-sans: 'InterVariable';
+    --aw-font-serif: 'InterVariable';
+    --aw-font-heading: 'InterVariable';
+
+    --aw-color-primary: rgb(1 97 239);
+    --aw-color-secondary: rgb(1 84 207);
+    --aw-color-accent: rgb(109 40 217);
+
+    --aw-color-text-heading: rgb(247, 248, 248);
+    --aw-color-text-default: rgb(229 236 246);
+    --aw-color-text-muted: rgb(229 236 246 / 66%);
+    --aw-color-bg-page: rgb(3 6 32);
+
+    ::selection {
+      background-color: black;
+      color: snow;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/config.yaml b/src/config.yaml
index 254752a..8dab37c 100644
--- a/src/config.yaml
+++ b/src/config.yaml
@@ -70,28 +70,3 @@ analytics:
 
 ui:
   theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"
-
-  tokens:
-    default:
-      fonts:
-        sans: InterVariable
-        serif: InterVariable
-        heading: InterVariable
-      colors:
-        default: rgb(16 16 16)
-        heading: rgb(0 0 0)
-        muted: rgb(16 16 16 / 66%)
-        bgPage: rgb(255 255 255)
-        primary: rgb(1 97 239)
-        secondary: rgb(1 84 207)
-        accent: rgb(109 40 217)
-    dark:
-      fonts: {}
-      colors:
-        default: rgb(229 236 246)
-        heading: rgb(247, 248, 248)
-        muted: rgb(229 236 246 / 66%)
-        bgPage: rgb(3 6 32)
-        primary: rgb(1 97 239)
-        secondary: rgb(1 84 207)
-        accent: rgb(109 40 217)
diff --git a/vendor/integration/utils/configBuilder.ts b/vendor/integration/utils/configBuilder.ts
index 18df411..f4b5f6d 100644
--- a/vendor/integration/utils/configBuilder.ts
+++ b/vendor/integration/utils/configBuilder.ts
@@ -173,33 +173,6 @@ const getAppBlog = (config: Config) => {
 const getUI = (config: Config) => {
   const _default = {
     theme: 'system',
-    classes: {},
-    tokens: {
-      default: {
-        fonts: {},
-        colors: {
-          default: 'rgb(16 16 16)',
-          heading: 'rgb(0 0 0)',
-          muted: 'rgb(16 16 16 / 66%)',
-          bgPage: 'rgb(255 255 255)',
-          primary: 'rgb(1 97 239)',
-          secondary: 'rgb(1 84 207)',
-          accent: 'rgb(109 40 217)',
-        },
-      },
-      dark: {
-        fonts: {},
-        colors: {
-          default: 'rgb(229 236 246)',
-          heading: 'rgb(247, 248, 248)',
-          muted: 'rgb(229 236 246 / 66%)',
-          bgPage: 'rgb(3 6 32)',
-          primary: 'rgb(1 97 239)',
-          secondary: 'rgb(1 84 207)',
-          accent: 'rgb(109 40 217)',
-        },
-      },
-    },
   };
 
   return merge({}, _default, config?.ui ?? {});