Skip to content

Commit 310e572

Browse files
hperrinhperrin
committed
docs: add alternate theme to demo site
1 parent dd3c405 commit 310e572

File tree

21 files changed

+513
-82
lines changed

21 files changed

+513
-82
lines changed

‎packages/site/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,9 @@ node_modules
88
!.env.example
99
/static/smui.css
1010
/static/smui-dark.css
11+
/static/smui-fixation.css
12+
/static/smui-fixation-dark.css
1113
/static/site.css
1214
/static/site-dark.css
15+
/static/site-fixation.css
16+
/static/site-fixation-dark.css

‎packages/site/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,17 @@
99
"preview": "vite preview",
1010
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
1111
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12-
"prepare": "npm run smui-theme-light && npm run smui-theme-dark && npm run site-light && npm run site-dark",
12+
"prepare": "npm run prepare-smui && npm run prepare-site",
13+
"prepare-smui": "npm run smui-theme-light && npm run smui-theme-dark && npm run smui-fixation-light && npm run smui-fixation-dark",
14+
"prepare-site": "npm run site-light && npm run site-dark && npm run site-fixation-light && npm run site-fixation-dark",
1315
"smui-theme-light": "smui-theme compile static/smui.css -s expanded -i src/theme -i node_modules/",
1416
"smui-theme-dark": "smui-theme compile static/smui-dark.css -s expanded -i src/theme/dark -i node_modules/",
17+
"smui-fixation-light": "smui-theme compile static/smui-fixation.css -s expanded -i src/theme/fixation -i node_modules/",
18+
"smui-fixation-dark": "smui-theme compile static/smui-fixation-dark.css -s expanded -i src/theme/fixation-dark -i node_modules/",
1519
"site-light": "sass --no-source-map -I src/theme -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site.css",
1620
"site-dark": "sass --no-source-map -I src/theme/dark -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-dark.css",
21+
"site-fixation-light": "sass --no-source-map -I src/theme/fixation -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-fixation.css",
22+
"site-fixation-dark": "sass --no-source-map -I src/theme/fixation-dark -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-fixation-dark.css",
1723
"clean": "test -d .svelte-kit && rm -r .svelte-kit || true",
1824
"test": "echo \"Error: no test specified\" && exit 1"
1925
},

‎packages/site/src/app.scss‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
// Elevation mixins.
2-
@use '@material/elevation/index' as elevation;
2+
@use '@material/elevation/mixins' as elevation;
33

44
// Paper mixins.
5-
@use '@smui/paper/index' as paper;
6-
@use '@material/theme/index' as theme;
5+
@use '@smui/paper/mixins' as paper;
6+
@use '@material/theme/mixins' as theme;
77

88
// Typography mixins.
9-
@use '@material/typography/index' as typography;
9+
@use '@material/typography/mixins' as typography;
1010

1111
// Main Top App Bar styling.
12-
@use '@material/top-app-bar/index' as top-app-bar;
12+
@use '@material/top-app-bar/mixins' as top-app-bar-mixins;
13+
@use '@material/top-app-bar/variables' as top-app-bar-variables;
1314
.mdc-top-app-bar.demo-top-app-bar {
1415
// Color the top bar with "surface" colors.
15-
@include top-app-bar.fill-color(surface);
16-
@include top-app-bar.ink-color(on-surface);
17-
@include top-app-bar.icon-ink-color(on-surface);
16+
@include top-app-bar-mixins.fill-color(surface);
17+
@include top-app-bar-mixins.ink-color(on-surface);
18+
@include top-app-bar-mixins.icon-ink-color(on-surface);
1819
// Give it a shadow.
1920
@include elevation.elevation(4);
2021
// Position it above the drawer.
@@ -46,10 +47,11 @@ body,
4647
.demo-main-content {
4748
overflow: auto;
4849
height: 100%;
50+
border-radius: 0;
4951
}
5052

5153
.demo-drawer.demo-drawer-adjust {
52-
padding-bottom: top-app-bar.$row-height;
54+
padding-bottom: top-app-bar-variables.$row-height;
5355
}
5456

5557
.demo-app-content {

‎packages/site/src/routes/+layout.svelte‎

Lines changed: 84 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,64 @@
11
<svelte:window on:resize={setMiniWindow} />
22

33
<svelte:head>
4-
{#if lightTheme === true}
4+
<!-- SMUI Styles -->
5+
<link rel="stylesheet" href="{assets}/smui.css" />
6+
7+
<!-- Site Styles -->
8+
<link rel="stylesheet" href="{assets}/site.css" />
9+
10+
{#if fixationTheme}
511
<!-- SMUI Styles -->
6-
<link rel="stylesheet" href="{assets}/smui.css" />
12+
<link rel="stylesheet" href="{assets}/smui-fixation.css" />
713

814
<!-- Site Styles -->
9-
<link rel="stylesheet" href="{assets}/site.css" />
15+
<link rel="stylesheet" href="{assets}/site-fixation.css" />
16+
17+
{#if lightTheme === false}
18+
<!-- SMUI Styles -->
19+
<link rel="stylesheet" href="{assets}/smui-fixation.css" />
20+
<link
21+
rel="stylesheet"
22+
href="{assets}/smui-fixation-dark.css"
23+
media="screen"
24+
/>
25+
<!-- Site Styles -->
26+
<link rel="stylesheet" href="{assets}/site-fixation.css" />
27+
<link
28+
rel="stylesheet"
29+
href="{assets}/site-fixation-dark.css"
30+
media="screen"
31+
/>
32+
{:else if lightTheme !== true}
33+
<!-- SMUI Styles -->
34+
<link
35+
rel="stylesheet"
36+
href="{assets}/smui-fixation-dark.css"
37+
media="screen and (prefers-color-scheme: dark)"
38+
/>
39+
40+
<!-- Site Styles -->
41+
<link
42+
rel="stylesheet"
43+
href="{assets}/site-fixation-dark.css"
44+
media="screen and (prefers-color-scheme: dark)"
45+
/>
46+
{/if}
1047
{:else if lightTheme === false}
1148
<!-- SMUI Styles -->
12-
<link rel="stylesheet" href="{assets}/smui.css" />
1349
<link rel="stylesheet" href="{assets}/smui-dark.css" media="screen" />
1450

1551
<!-- Site Styles -->
16-
<link rel="stylesheet" href="{assets}/site.css" />
1752
<link rel="stylesheet" href="{assets}/site-dark.css" media="screen" />
18-
{:else}
53+
{:else if lightTheme !== true}
1954
<!-- SMUI Styles -->
20-
<link
21-
rel="stylesheet"
22-
href="{assets}/smui.css"
23-
media="(prefers-color-scheme: light)"
24-
/>
2555
<link
2656
rel="stylesheet"
2757
href="{assets}/smui-dark.css"
2858
media="screen and (prefers-color-scheme: dark)"
2959
/>
3060

3161
<!-- Site Styles -->
32-
<link
33-
rel="stylesheet"
34-
href="{assets}/site.css"
35-
media="(prefers-color-scheme: light)"
36-
/>
3762
<link
3863
rel="stylesheet"
3964
href="{assets}/site-dark.css"
@@ -66,25 +91,32 @@
6691
tag="a"
6792
href="/"
6893
on:click={() => (activeSection = undefined)}
69-
class="mdc-theme--primary"
94+
class="mdc-theme--on-surface"
7095
style={miniWindow ? 'padding-left: 0;' : ''}
7196
>
7297
{miniWindow ? 'SMUI' : 'Svelte Material UI'}
7398
</Title>
7499
</Section>
75100
<Section align="end" toolbar style="color: var(--mdc-on-surface, #000);">
76-
{#if activeSection}
77-
{#each activeSection.repos || [] as repo}
78-
<Wrapper>
79-
<IconButton href={repo} target="_blank">
80-
<Icon component={Svg} viewBox="0 0 24 24">
81-
<path fill="currentColor" d={mdiFileDocument} />
82-
</Icon>
83-
</IconButton>
84-
<Tooltip>View Docs: {repo.split('/').slice(-1)[0]}</Tooltip>
85-
</Wrapper>
86-
{/each}
87-
{/if}
101+
{#each (activeSection && activeSection.repos) || [] as repo}
102+
<Wrapper>
103+
<IconButton href={repo} target="_blank">
104+
<Icon component={Svg} viewBox="0 0 24 24">
105+
<path fill="currentColor" d={mdiFileDocument} />
106+
</Icon>
107+
</IconButton>
108+
<Tooltip>View Docs: {repo.split('/').slice(-1)[0]}</Tooltip>
109+
</Wrapper>
110+
{:else}
111+
<Wrapper>
112+
<IconButton href="https://github.com/hperrin/svelte-material-ui">
113+
<Icon component={Svg} viewBox="0 0 24 24">
114+
<path fill="currentColor" d={siGithub.path} />
115+
</Icon>
116+
</IconButton>
117+
<Tooltip>SMUI on GitHub</Tooltip>
118+
</Wrapper>
119+
{/each}
88120
<Wrapper>
89121
<IconButton href="https://discord.gg/aFzmkrmg9P">
90122
<Icon component={Svg} viewBox="0 0 24 24">
@@ -102,12 +134,24 @@
102134
<Tooltip>Hunter Perrin (SMUI Author) on Mastodon</Tooltip>
103135
</Wrapper>
104136
<Wrapper>
105-
<IconButton href="https://github.com/hperrin/svelte-material-ui">
137+
<IconButton
138+
toggle
139+
pressed={fixationTheme}
140+
on:SMUIIconButtonToggle:change={() =>
141+
(fixationTheme = !fixationTheme)}
142+
>
143+
<Icon component={Svg} viewBox="0 0 24 24" on>
144+
<path fill="currentColor" d={siSvelte.path} />
145+
</Icon>
106146
<Icon component={Svg} viewBox="0 0 24 24">
107-
<path fill="currentColor" d={siGithub.path} />
147+
<path fill="currentColor" d={mdiFormatPaint} />
108148
</Icon>
109149
</IconButton>
110-
<Tooltip>SMUI on GitHub</Tooltip>
150+
<Tooltip
151+
>{fixationTheme
152+
? 'Go back to the Svelte theme'
153+
: 'Check out a custom theme'}</Tooltip
154+
>
111155
</Wrapper>
112156
<Wrapper>
113157
<IconButton
@@ -177,8 +221,13 @@
177221

178222
<script lang="ts">
179223
import { onDestroy, onMount } from 'svelte';
180-
import { mdiFileDocument, mdiWeatherSunny, mdiWeatherNight } from '@mdi/js';
181-
import { siDiscord, siMastodon, siGithub } from 'simple-icons';
224+
import {
225+
mdiFileDocument,
226+
mdiFormatPaint,
227+
mdiWeatherSunny,
228+
mdiWeatherNight,
229+
} from '@mdi/js';
230+
import { siDiscord, siMastodon, siGithub, siSvelte } from 'simple-icons';
182231
import TinyGesture from 'tinygesture';
183232
import { assets } from '$app/paths';
184233
import { page } from '$app/stores';
@@ -200,6 +249,7 @@
200249
let mainContentGesture: TinyGesture;
201250
202251
let lightTheme: boolean;
252+
let fixationTheme = false;
203253
204254
type DemoSection = {
205255
component?: InstanceType<typeof Item>;

‎packages/site/src/routes/demo/badge/_CustomColor.scss‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
@use '@smui-extra/badge/index' as badge;
2-
@use '@material/theme/index' as theme;
1+
@use '@smui-extra/badge/mixins' as badge;
2+
@use '@material/theme/color-palette';
3+
@use '@material/theme/theme-color';
34

45
@include badge.badge-color(
56
custom-green,
6-
theme.$green-800,
7-
theme.accessible-ink-color(theme.$green-800)
7+
color-palette.$green-800,
8+
theme-color.accessible-ink-color(color-palette.$green-800)
89
);

‎packages/site/src/routes/demo/button/_Notched.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '@material/button/index' as mdc-button;
21
@use '@material/shape/variables' as mdc-shape;
32

43
.button-shaped-notch {

‎packages/site/src/routes/demo/button/_Round.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@use '@material/button/index' as mdc-button;
1+
@use '@material/button/mixins' as mdc-button;
22

33
.button-shaped-round {
4-
@include mdc-button.shape-radius(999px);
4+
@include mdc-button.shape-radius(100%);
55
}

‎packages/site/src/routes/demo/circular-progress/_Colored.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@use '@material/circular-progress/index' as circular-progress;
2-
@use '@material/theme/index' as theme;
1+
@use '@material/circular-progress/mixins' as circular-progress;
2+
@use '@material/theme/color-palette';
33

44
.my-colored-circle {
5-
@include circular-progress.color(theme.$green-500);
6-
@include circular-progress.track-color(theme.$green-900);
5+
@include circular-progress.color(color-palette.$green-500);
6+
@include circular-progress.track-color(color-palette.$green-900);
77
}

‎packages/site/src/routes/demo/circular-progress/_FourColor.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
@use '@material/circular-progress/index' as circular-progress;
2-
@use '@material/theme/index' as theme;
1+
@use '@material/circular-progress/mixins' as circular-progress;
2+
@use '@material/theme/color-palette';
33

44
.my-four-colors {
55
@include circular-progress.indeterminate-colors(
6-
theme.$green-500 theme.$yellow-500 theme.$red-500 theme.$blue-500
6+
color-palette.$green-500 color-palette.$yellow-500 color-palette.$red-500
7+
color-palette.$blue-500
78
);
89
}

‎packages/site/src/routes/demo/elevation/_TransitionsAndColor.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use 'smui-theme';
33

44
// Elevation and theme mixins.
5-
@use '@material/elevation/index' as elevation;
5+
@use '@material/elevation/mixins' as elevation;
66
@use '@material/theme/index' as theme;
77

88
.my-primary {

0 commit comments

Comments
 (0)