Skip to content

Commit

Permalink
Move all settings for fonts, colors and other design tokens to Custom…
Browse files Browse the repository at this point in the history 
…Styles
  • Loading branch information
@prototypa
prototypa committed Apr 13, 2024
1 parent 069f2ed commit c830d68
Show file tree
Hide file tree
Showing 7 changed files with 43 additions and 262 deletions.
144 changes: 1 addition & 143 deletions .vscode/astrowind/config-schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
Expand Down
32 changes: 7 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
73 changes: 33 additions & 40 deletions src/components/CustomStyles.astro
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
---
import { UI } from 'astrowind:config';
import '@fontsource-variable/inter';
// 'DM Sans'
Expand All @@ -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)'};
<style is:inline>
:root {
--aw-font-sans: 'InterVariable';
--aw-font-serif: 'InterVariable';
--aw-font-heading: 'InterVariable';

--aw-color-primary: ${tokens.default.colors.primary};
--aw-color-secondary: ${tokens.default.colors.secondary};
--aw-color-accent: ${tokens.default.colors.accent};
--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: ${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-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: ${tokens.dark.colors.bgPage};
--aw-color-bg-page-dark: rgb(3 6 32);

::selection {
background-color: lavender;
}
::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}';` : ''}
.dark {
--aw-font-sans: 'InterVariable';
--aw-font-serif: 'InterVariable';
--aw-font-heading: 'InterVariable';

--aw-color-primary: ${tokens.dark.colors.primary};
--aw-color-secondary: ${tokens.dark.colors.secondary};
--aw-color-accent: ${tokens.dark.colors.accent};
--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: ${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};
--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;
}
::selection {
background-color: black;
color: snow;
}
</style>
`;
---

<Fragment set:html={html} />
}
</style>
25 changes: 0 additions & 25 deletions src/config.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 0 additions & 27 deletions vendor/integration/utils/configBuilder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ?? {});
Expand Down

0 comments on commit c830d68

Please sign in to comment.