365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move all settings for fonts, colors and other design tokens to CustomStyles

Browse Source
This commit is contained in:
prototypa
2024-04-13 13:22:16 -04:00
parent 069f2edef1
commit c830d68321
7 changed files with 52 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
.vscode/astrowind/config-schema.json vendored
View File

@@ -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"]

32
README.md
View File

@@ -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)

2
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{
"name": "@onwidget/astrowind",
"version": "1.0.0-beta.28",
"version": "1.0.0-beta.29",
"lockfileVersion": 3,
"requires": true,
"packages": {

2
package.json
View File

@@ -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,

91
src/components/CustomStyles.astro
View File

@@ -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>

25
src/config.yaml
View File

@@ -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)

27
vendor/integration/utils/configBuilder.ts vendored
View File

@@ -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 ?? {});