Skip to content

Commit 7de1a37

Browse files
FrontendlandFrontendland
committed
✨ Add additional example themes + themes page
1 parent e72a8ed commit 7de1a37

File tree

6 files changed

+196
-48
lines changed

6 files changed

+196
-48
lines changed

‎src/components/Button/button.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use '../../scss/config.scss' as *;
22

33
.button {
4-
@include layout(inline-flex, v-center, xs);
4+
@include layout(inline-flex, center, xs);
55
@include typography(default, primary-50, none);
66
@include spacing(py-sm, px-md);
77
@include border-radius(xs);

‎src/data.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -81,14 +81,15 @@ export const menuLogo = {
8181
}
8282

8383
export const themes = {
84-
'#252525': 'theme-dark',
85-
'#DDD': 'theme-light',
86-
'#415a77': 'theme-blue',
87-
'#d5bdaf': 'theme-beige',
88-
'#588157': 'theme-green'
84+
'#252525': 'dark',
85+
'#DDD': 'light',
86+
'#415a77': 'midnight',
87+
'#d5bdaf': 'vintage',
88+
'#fCBA28': 'amber',
89+
'#9D2BD6': 'synthwave',
8990
}
9091

9192
export const toggleThemes = {
92-
'#252525': 'theme-dark',
93-
'#DDD': 'theme-light'
93+
'#252525': 'dark',
94+
'#DDD': 'light'
9495
}

‎src/pages/themes.astro

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
import Examples from '@static/Examples.astro'
4+
import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.astro'
5+
import Button from '@components/Button/Button.astro'
6+
import Toast from '@components/Toast/Toast.astro'
7+
8+
import { themes } from '@data'
9+
---
10+
11+
<Layout>
12+
<h1>Themes</h1>
13+
14+
<ThemeSwitcher themes={themes} className="justify-center" />
15+
16+
<div class="flex sm justify-center my column">
17+
<label class="flex column none">
18+
<span class="muted">Radius</span>
19+
<input
20+
type="range"
21+
min={0}
22+
max={100}
23+
value={50}
24+
step={10}
25+
id="radius"
26+
/>
27+
</label>
28+
<Button id="copy">Copy Setup</Button>
29+
</div>
30+
31+
<Examples />
32+
33+
<Toast theme="success" id="toast">
34+
Copied setup to clipboard
35+
</Toast>
36+
</Layout>
37+
38+
<script>
39+
import { toast } from '@utils/toast'
40+
import { interpolate } from '@utils/interpolate'
41+
42+
const input = document.querySelector('#radius') as HTMLElement
43+
const copy = document.querySelector('#copy') as HTMLElement
44+
45+
input.addEventListener('change', (e: any) => {
46+
const value = Number(e.target.value)
47+
48+
const sm = interpolate(value, [0, 100], [0, 8])
49+
const md = interpolate(value, [0, 100], [0, 20])
50+
const lg = interpolate(value, [0, 100], [0, 40])
51+
const xl = interpolate(value, [0, 100], [0, 60])
52+
53+
document.body.style.setProperty('--w-sm-radius', `${sm}px`)
54+
document.body.style.setProperty('--w-md-radius', `${md}px`)
55+
document.body.style.setProperty('--w-lg-radius', `${lg}px`)
56+
document.body.style.setProperty('--w-xl-radius', `${xl}px`)
57+
})
58+
59+
copy.addEventListener('click', () => {
60+
const bodyStyles = document.body.style
61+
62+
const sm = bodyStyles.getPropertyValue('--w-sm-radius') || '2px'
63+
const md = bodyStyles.getPropertyValue('--w-md-radius') || '5px'
64+
const lg = bodyStyles.getPropertyValue('--w-lg-radius') || '10px'
65+
const xl = bodyStyles.getPropertyValue('--w-xl-radius') || '15px'
66+
67+
const code = `
68+
@import 'webcoreui/styles';
69+
@include setup((
70+
theme: '${document.body.className}'
71+
));
72+
73+
html body {
74+
--w-sm-radius: ${sm};
75+
--w-md-radius: ${md};
76+
--w-lg-radius: ${lg};
77+
--w-xl-radius: ${xl};
78+
}
79+
`.trim().replace(new RegExp('^[ \\t]{12}', 'gm'), '')
80+
81+
navigator.clipboard.writeText(code)
82+
83+
toast('#toast')
84+
})
85+
</script>
86+
87+
<style lang="scss">
88+
input {
89+
margin: 0;
90+
}
91+
92+
.flex {
93+
max-width: fit-content;
94+
}
95+
</style>

‎src/scss/global/theme.scss

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -67,70 +67,97 @@
6767
--w-color-primary-60: #101a2d;
6868
--w-color-primary-70: #061321;
6969

70-
--w-color-info: #1058b6;
71-
--w-color-info-accent: #176ee0;
72-
--w-color-info-fg: #FFF;
73-
--w-color-success: #10ac95;
70+
--w-color-info: #57a0ff;
71+
--w-color-info-accent: #71afff;
72+
--w-color-info-fg: #000;
73+
--w-color-success: #10b59c;
7474
--w-color-success-accent: #1DD1A1;
7575
--w-color-success-fg: #000;
7676
--w-color-warning: #FF9F43;
77-
--w-color-warning-accent: #f7AA61;
77+
--w-color-warning-accent: #feb570;
7878
--w-color-warning-fg: #000;
79-
--w-color-alert: #de3233;
80-
--w-color-alert-accent: #EE5253;
79+
--w-color-alert: #ed3b3c;
80+
--w-color-alert-accent: #fb6161;
8181
--w-color-alert-fg: #FFF;
8282
}
8383
}
8484

85-
@if $theme == green {
85+
@if $theme == 'vintage' {
8686
#{$selector} {
8787
--w-color-scheme: dark;
88-
--w-color-primary: #FFF;
89-
--w-color-primary-10: #EEE;
90-
--w-color-primary-20: #b7ffe4;
91-
--w-color-primary-30: #dad7cd;
92-
--w-color-primary-40: #10AC84;
93-
--w-color-primary-50: #4d6e4c;
94-
--w-color-primary-60: #315037;
95-
--w-color-primary-70: #22392d;
88+
--w-color-primary: #000;
89+
--w-color-primary-10: #111;
90+
--w-color-primary-20: #6b4430;
91+
--w-color-primary-30: #d6ccc2;
92+
--w-color-primary-40: #cbb39a;
93+
--w-color-primary-50: #e8d0b7;
94+
--w-color-primary-60: #f5e6d5;
95+
--w-color-primary-70: #f5ebe0;
9696

97-
--w-color-info: #0ABDE3;
97+
--w-color-info: #6d95d1;
9898
--w-color-info-accent: #48DBFB;
9999
--w-color-info-fg: #000;
100-
--w-color-success: #10AC84;
100+
--w-color-success: #85c8ba;
101101
--w-color-success-accent: #1DD1A1;
102102
--w-color-success-fg: #000;
103-
--w-color-warning: #FF9F43;
103+
--w-color-warning: #e79d6b;
104104
--w-color-warning-accent: #f7AA61;
105105
--w-color-warning-fg: #000;
106-
--w-color-alert: #de3233;
106+
--w-color-alert: #bf6170;
107107
--w-color-alert-accent: #EE5253;
108108
--w-color-alert-fg: #FFF;
109109
}
110110
}
111111

112-
@if $theme == beige {
112+
@if $theme == 'amber' {
113113
#{$selector} {
114114
--w-color-scheme: dark;
115-
--w-color-primary: #000;
116-
--w-color-primary-10: #111;
117-
--w-color-primary-20: #97725c;
118-
--w-color-primary-30: #d6ccc2;
119-
--w-color-primary-40: #e3d5ca;
120-
--w-color-primary-50: #ecddcd;
121-
--w-color-primary-60: #f1e6da;
122-
--w-color-primary-70: #f5ebe0;
115+
--w-color-primary: #FFF;
116+
--w-color-primary-10: #DDD;
117+
--w-color-primary-20: #FFF3DB;
118+
--w-color-primary-30: #757575;
119+
--w-color-primary-40: #232323;
120+
--w-color-primary-50: #312e31;
121+
--w-color-primary-60: #222;
122+
--w-color-primary-70: #111;
123123

124-
--w-color-info: #0ABDE3;
124+
--w-color-info: #78dcdc;
125125
--w-color-info-accent: #48DBFB;
126126
--w-color-info-fg: #000;
127-
--w-color-success: #10AC84;
128-
--w-color-success-accent: #1DD1A1;
127+
--w-color-success: #a9dc62;
128+
--w-color-success-accent: #97da3b;
129129
--w-color-success-fg: #000;
130-
--w-color-warning: #FF9F43;
130+
--w-color-warning: #FCBA28;
131131
--w-color-warning-accent: #f7AA61;
132132
--w-color-warning-fg: #000;
133-
--w-color-alert: #de3233;
133+
--w-color-alert: #ff6188;
134+
--w-color-alert-accent: #EE5253;
135+
--w-color-alert-fg: #000;
136+
}
137+
}
138+
139+
@if $theme == 'synthwave' {
140+
#{$selector} {
141+
--w-color-scheme: dark;
142+
--w-color-primary: #FFF;
143+
--w-color-primary-10: #EEE;
144+
--w-color-primary-20: #fad1ba;
145+
--w-color-primary-30: #a8b6de;
146+
--w-color-primary-40: #8212ba;
147+
--w-color-primary-50: #9D2BD6;
148+
--w-color-primary-60: #0f1b33;
149+
--w-color-primary-70: #030d1e;
150+
151+
--w-color-info: #1c98ff;
152+
--w-color-info-accent: #6be4ff;
153+
--w-color-info-fg: #000;
154+
--w-color-success: #83e300;
155+
--w-color-success-accent: #b7ff51;
156+
--w-color-success-fg: #000;
157+
--w-color-warning: #FF9F43;
158+
--w-color-warning-accent: #ffb672;
159+
--w-color-warning-fg: #000;
160+
--w-color-alert: #ff3333;
134161
--w-color-alert-accent: #EE5253;
135162
--w-color-alert-fg: #FFF;
136163
}

‎src/static/Layout.astro

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const menuClasses = [
99
nonStickyMenu && 'fixed'
1010
].filter(Boolean).join(' ')
1111
12-
const theme = (Astro.cookies.get('w-theme')?.value || 'theme-dark') as string
12+
const theme = (Astro.cookies.get('w-theme')?.value || 'dark') as string
1313
const isPath = (path: string) => Astro.url.pathname.includes(path)
1414
1515
const menu = {
@@ -19,6 +19,7 @@ const menu = {
1919
items: [
2020
{ url: '/svelte', name: 'Svelte', active: isPath('svelte') },
2121
{ url: '/react', name: 'React', active: isPath('react') },
22+
{ url: '/themes', name: 'Themes', active: isPath('themes') },
2223
{ url: '/resets', name: 'Resets', active: isPath('resets') },
2324
{ url: '/utilities', name: 'Utilities', active: isPath('utilities') }
2425
]
@@ -76,11 +77,12 @@ const externalLinks = [
7677
fontRegular: '/fonts/Inter-Regular.woff2',
7778
fontBold: '/fonts/Inter-Bold.woff2',
7879
themes: (
79-
dark: '.theme-dark',
80-
light: '.theme-light',
81-
midnight: '.theme-blue',
82-
green: '.theme-green',
83-
beige: '.theme-beige'
80+
dark: '.dark',
81+
light: '.light',
82+
midnight: '.midnight',
83+
vintage: '.vintage',
84+
amber: '.amber',
85+
synthwave: '.synthwave',
8486
)
8587
));
8688

‎src/utils/interpolate.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const clamp = (
2+
num: number,
3+
min: number,
4+
max: number
5+
) => Math.min(Math.max(num, min), max)
6+
7+
export const lerp = (
8+
x: number,
9+
y: number,
10+
z: number
11+
) => x * (1 - z) + y * z
12+
13+
export const invlerp = (
14+
x: number,
15+
y: number,
16+
z: number
17+
) => clamp((z - x) / (y - x), 0, 1)
18+
19+
export const interpolate = (
20+
value: number,
21+
input: [x: number, y: number],
22+
output: [x: number, y: number],
23+
) => lerp(output[0], output[1], invlerp(input[0], input[1], value))

0 commit comments

Comments
 (0)