Connect tokens from config.yaml to used fonts and colores

src/components/CustomStyles.astro

@@ -1,4 +1,6 @@
 ---
+import { UI } from 'astrowind:config';
+
 import '@fontsource-variable/inter';
 
 // 'DM Sans'
@@ -17,44 +19,53 @@ import '@fontsource-variable/inter';
 // Oswald
 // '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>
+`;
 ---
 
-<style is:inline is:global>
+<Fragment set:html={html} />
-  :root {
-    --aw-font-sans: 'Inter Variable';
-    --aw-font-serif: var(--aw-font-sans);
-    --aw-font-heading: var(--aw-font-sans);
-
-    --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(0 0 0); 
-    --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: 'Inter Variable';
-    --aw-font-serif: var(--aw-font-sans);
-    --aw-font-heading: var(--aw-font-sans);
-
-    --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(0 0 0); 
-    --aw-color-text-default: rgb(229 236 246);
-    --aw-color-text-muted: rgb(229 236 246 / 66%);
-    --aw-color-bg-page: var(--aw-color-bg-page-dark);
-
-    ::selection {background-color: black; color: snow}
-
-  }
-</style>

src/config.yaml

@@ -75,35 +75,23 @@ ui:
     default:
       fonts:
         sans: InterVariable
-        serif: var(--ph-font-sans)
+        serif: InterVariable
-        heading: var(--ph-font-sans)
+        heading: InterVariable
       colors:
         default: rgb(16 16 16)
         heading: rgb(0 0 0)
-        muted: rgb(40 40 40)
+        muted: rgb(16 16 16 / 66%)
         bgPage: rgb(255 255 255)
-        primary: rgb(0 124 220)
+        primary: rgb(1 97 239)
-        secondary: rgb(30 58 138)
+        secondary: rgb(1 84 207)
         accent: rgb(109 40 217)
-        info: rgb(119 182 234)
-        success: rgb(54 211 153)
-        warning: rgb(251 189 35)
-        error: rgb(248 114 114)
-        link: var(--ph-color-primary)
-        linkActive: var(--ph-color-link)
     dark:
       fonts: {}
       colors:
-        default: rgb(247, 248, 248)
+        default: rgb(229 236 246)
         heading: rgb(247, 248, 248)
-        muted: rgb(200, 188, 208)
+        muted: rgb(229 236 246 / 66%)
         bgPage: rgb(3 6 32)
-        primary: rgb(29 78 216)
+        primary: rgb(1 97 239)
-        secondary: rgb(30 58 138)
+        secondary: rgb(1 84 207)
-        accent: rgb(135 77 2267)
+        accent: rgb(109 40 217)
-        info: rgb(58 191 248)
-        success: rgb(54 211 153)
-        warning: rgb(251 189 35)
-        error: rgb(248 114 114)
-        link: var(--ph-color-primary)
-        linkActive: var(--ph-color-link)

tailwind.config.cjs

@@ -12,9 +12,9 @@ module.exports = {
         muted: 'var(--aw-color-text-muted)',
       },
       fontFamily: {
-        sans: ['var(--aw-font-sans)', ...defaultTheme.fontFamily.sans],
+        sans: ['var(--aw-font-sans, ui-sans-serif)', ...defaultTheme.fontFamily.sans],
-        serif: ['var(--aw-font-serif)', ...defaultTheme.fontFamily.serif],
+        serif: ['var(--aw-font-serif, ui-serif)', ...defaultTheme.fontFamily.serif],
-        heading: ['var(--aw-font-heading)', ...defaultTheme.fontFamily.sans],
+        heading: ['var(--aw-font-heading, ui-sans-serif)', ...defaultTheme.fontFamily.sans],
       },
     },
   },