Skip to content

Commit 4b2c0af

Browse files
gavmckgavmck
committed
feat: upgrade to diamond 2
1 parent c97fe94 commit 4b2c0af

29 files changed

Lines changed: 333 additions & 333 deletions

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
},
1919
"dependencies": {
2020
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
21-
"@etchteam/diamond-ui": "^1.27.4"
21+
"@etchteam/diamond-ui": "^2.0.1"
2222
},
2323
"devDependencies": {
2424
"@11ty/eleventy": "^3.0.0",

‎src/404.webc‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,55 @@ title: 404
44
description: Page not found
55
---
66

7-
<diamond-wrap size="lg" class="diamond-spacing-bottom-fluid">
8-
<diamond-section padding="fluid">
7+
<dmd-wrap size="lg" class="dmd-spacing-bottom-fluid">
8+
<dmd-section padding="fluid">
99
<article>
10-
<d-title-group class="diamond-text-align-center diamond-spacing-bottom-lg">
10+
<d-title-group class="dmd-text-align-center dmd-spacing-bottom-lg">
1111
<p>404</p>
1212
<h1>Page not found</h1>
1313
</d-title-group>
1414

15-
<diamond-wrap size="sm" gutter="none">
15+
<dmd-wrap size="sm" gutter="none">
1616
<p>
1717
If you're looking for <strong>diamonds</strong>, try these tips:
1818
</p>
1919
<ul>
20-
<li class="diamond-spacing-bottom-sm"><strong>Find a big cave:</strong> Look for caves in biomes with open fields, plains, deserts, or savannas. You can look for cliffs, ravines, or holes in the surface.</li>
21-
<li class="diamond-spacing-bottom-sm"><strong>Bring torches:</strong> Torches help you see in the dark and prevent mobs from respawning.</li>
22-
<li class="diamond-spacing-bottom-sm"><strong>Wear iron armor and a shield:</strong> This will help protect you.</li>
23-
<li class="diamond-spacing-bottom-sm"><strong>Use a night vision potion:</strong> This will make diamonds and other ores more obvious.</li>
24-
<li class="diamond-spacing-bottom-sm"><strong>Check the ceiling:</strong> Diamonds are often found on the ceiling of caves</li>
20+
<li class="dmd-spacing-bottom-sm"><strong>Find a big cave:</strong> Look for caves in biomes with open fields, plains, deserts, or savannas. You can look for cliffs, ravines, or holes in the surface.</li>
21+
<li class="dmd-spacing-bottom-sm"><strong>Bring torches:</strong> Torches help you see in the dark and prevent mobs from respawning.</li>
22+
<li class="dmd-spacing-bottom-sm"><strong>Wear iron armor and a shield:</strong> This will help protect you.</li>
23+
<li class="dmd-spacing-bottom-sm"><strong>Use a night vision potion:</strong> This will make diamonds and other ores more obvious.</li>
24+
<li class="dmd-spacing-bottom-sm"><strong>Check the ceiling:</strong> Diamonds are often found on the ceiling of caves</li>
2525
</ul>
2626
<p>
2727
If you're looking for <strong>Diamond UI</strong>, try <a href="/guide/">the docs</a>.
2828
</p>
29-
</diamond-wrap>
29+
</dmd-wrap>
3030
</article>
31-
</diamond-section>
31+
</dmd-section>
3232

3333
<d-separator></d-separator>
3434

35-
<diamond-section padding="fluid">
36-
<d-title-group class="diamond-text-align-center diamond-spacing-bottom-lg">
35+
<dmd-section padding="fluid">
36+
<d-title-group class="dmd-text-align-center dmd-spacing-bottom-lg">
3737
<p>The story continues</p>
3838
<h2>Do you want to know more?</h2>
3939
</d-title-group>
4040

41-
<diamond-wrap size="lg">
42-
<diamond-grid wrap="wrap" gap="lg">
43-
<diamond-grid-item small-mobile="12" small-tablet="6">
41+
<dmd-wrap size="lg">
42+
<dmd-grid wrap="wrap" gap="lg">
43+
<dmd-grid-item small-mobile="12" small-tablet="6">
4444
<d-nav-card icon="info" href="/">
4545
<h3>Intro</h3>
4646
<p>A quick run down of what Diamond UI is, and how it can help.</p>
4747
</d-nav-card>
48-
</diamond-grid-item>
49-
<diamond-grid-item small-mobile="12" small-tablet="6">
48+
</dmd-grid-item>
49+
<dmd-grid-item small-mobile="12" small-tablet="6">
5050
<d-nav-card icon="document" href="/guide/">
5151
<h3>Guide</h3>
5252
<p>How to get started and use Diamond UI on your next project.</p>
5353
</d-nav-card>
54-
</diamond-grid-item>
55-
</diamond-grid>
56-
</diamond-wrap>
57-
</diamond-section>
58-
</diamond-wrap>
54+
</dmd-grid-item>
55+
</dmd-grid>
56+
</dmd-wrap>
57+
</dmd-section>
58+
</dmd-wrap>

‎src/about.webc‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,26 @@ title: About
44
description: The origin story of Diamond UI
55
---
66

7-
<diamond-wrap size="lg" class="diamond-spacing-bottom-fluid">
8-
<diamond-section padding="fluid">
7+
<dmd-wrap size="lg" class="dmd-spacing-bottom-fluid">
8+
<dmd-section padding="fluid">
99
<article>
10-
<div class="diamond-text-align-center diamond-spacing-bottom-fluid">
10+
<div class="dmd-text-align-center dmd-spacing-bottom-fluid">
1111
<h1>The origin story</h1>
12-
<p class="diamond-text-size-xxl">How the pursuit of a better methodology began</p>
12+
<p class="dmd-text-size-xxl">How the pursuit of a better methodology began</p>
1313
</div>
1414

15-
<div class="diamond-text-size-lg">
15+
<div class="dmd-text-size-lg">
1616
<p>We’ve been writing HTML and CSS for a long time. There’s something amazing about drawing with code. Seeing all the little words and numbers turn into pictures on the screen that you can put in front of anybody in the world, essentially for free.</p>
1717
<p>Slowly the web transitioned from fixed pages to flexible components, to systems. It felt like magic when we started writing and documenting components like we’d solved all the problems in the world with making websites. Now we had components, we could just re-use them all over our sites and fly away into the sunset as front-end development masters.</p>
1818
<p>Quickly, our egos came crashing down as new designs didn’t fit the components we’d built. They almost fit, so we shoehorned them in with new props. We were doing it! Our components could support anything!</p>
1919
<p>As time went on, the components became more and more complicated, trying to support every scenario, becoming harder to test and harder to understand.</p>
2020
<p>I spoke to <a href="https://etch.co/team/jim" target="_blank" rel="noopener noreferrer">Jim</a>, our designer:</p>
21-
<d-alert class="diamond-spacing-bottom-md">
21+
<d-alert class="dmd-spacing-bottom-md">
2222
<d-icon icon="chat" slot="icon"></d-icon>
2323
<p>Why are the designs always fighting the existing components, why can’t you re-use the bits of the interface that are already there?</p>
2424
</d-alert>
2525
<p>He responded:</p>
26-
<d-alert class="diamond-spacing-bottom-md">
26+
<d-alert class="dmd-spacing-bottom-md">
2727
<d-icon icon="chat" slot="icon"></d-icon>
2828
<p>
2929
I am re-using it! Interface styles can be grouped into four categories:
@@ -37,31 +37,31 @@ description: The origin story of Diamond UI
3737
</p>
3838
</div>
3939
</article>
40-
</diamond-section>
40+
</dmd-section>
4141

4242
<d-separator></d-separator>
4343

44-
<diamond-section padding="fluid">
45-
<d-title-group class="diamond-text-align-center diamond-spacing-bottom-lg">
44+
<dmd-section padding="fluid">
45+
<d-title-group class="dmd-text-align-center dmd-spacing-bottom-lg">
4646
<p>The story continues</p>
4747
<h2>Do you want to know more?</h2>
4848
</d-title-group>
4949

50-
<diamond-wrap size="lg">
51-
<diamond-grid wrap="wrap" gap="lg">
52-
<diamond-grid-item small-mobile="12" small-tablet="6">
50+
<dmd-wrap size="lg">
51+
<dmd-grid wrap="wrap" gap="lg">
52+
<dmd-grid-item small-mobile="12" small-tablet="6">
5353
<d-nav-card icon="info" href="/">
5454
<h3>Intro</h3>
5555
<p>A quick run down of what Diamond UI is, and how it can help.</p>
5656
</d-nav-card>
57-
</diamond-grid-item>
58-
<diamond-grid-item small-mobile="12" small-tablet="6">
57+
</dmd-grid-item>
58+
<dmd-grid-item small-mobile="12" small-tablet="6">
5959
<d-nav-card icon="document" href="/guide/">
6060
<h3>Guide</h3>
6161
<p>How to get started and use Diamond UI on your next project.</p>
6262
</d-nav-card>
63-
</diamond-grid-item>
64-
</diamond-grid>
65-
</diamond-wrap>
66-
</diamond-section>
67-
</diamond-wrap>
63+
</dmd-grid-item>
64+
</dmd-grid>
65+
</dmd-wrap>
66+
</dmd-section>
67+
</dmd-wrap>

‎src/components/canvas/d-alert.webc‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@
44
}
55

66
h2, h3, h4 {
7-
font-size: var(--diamond-font-size-base);
8-
font-weight: var(--diamond-font-weight-bold);
9-
margin-block-end: var(--diamond-spacing-xs);
7+
font-size: var(--dmd-font-size-base);
8+
font-weight: var(--dmd-font-weight-bold);
9+
margin-block-end: var(--dmd-spacing-xs);
1010
}
1111

12-
:host.fill diamond-card {
12+
:host.fill dmd-card {
1313
height: 100%;
1414
}
1515
</style>
1616

17-
<diamond-card class="card" muted radius>
18-
<diamond-grid align-items="baseline" gap="sm">
19-
<diamond-grid-item>
20-
<span class="diamond-text-size-lg"><slot name="icon"></slot></span>
21-
</diamond-grid-item>
22-
<diamond-grid-item grow shrink>
17+
<dmd-card class="card" muted radius>
18+
<dmd-grid align-items="baseline" gap="sm">
19+
<dmd-grid-item>
20+
<span class="dmd-text-size-lg"><slot name="icon"></slot></span>
21+
</dmd-grid-item>
22+
<dmd-grid-item grow shrink>
2323
<slot></slot>
24-
</diamond-grid-item>
25-
</diamond-grid>
26-
</diamond-card>
24+
</dmd-grid-item>
25+
</dmd-grid>
26+
</dmd-card>

‎src/components/canvas/d-site-footer.webc‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<footer class="theme-medium">
2-
<diamond-section padding="lg">
3-
<diamond-wrap size="xxl">
2+
<dmd-section padding="lg">
3+
<dmd-wrap size="xxl">
44
<slot></slot>
5-
</diamond-wrap>
6-
</diamond-section>
5+
</dmd-wrap>
6+
</dmd-section>
77
</footer>

‎src/components/canvas/d-site-header.webc‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<style webc:scoped>
22
:host {
33
display: block;
4-
margin-block-start: var(--diamond-spacing-lg);
4+
margin-block-start: var(--dmd-spacing-lg);
55
}
66

77
.inner {
8-
border-block-end: var(--diamond-border);
9-
padding-block-end: var(--diamond-spacing);
8+
border-block-end: var(--dmd-border);
9+
padding-block-end: var(--dmd-spacing);
1010
}
1111
</style>
1212

1313
<header>
14-
<diamond-wrap size="xxl">
14+
<dmd-wrap size="xxl">
1515
<div class="inner">
1616
<slot></slot>
1717
</div>
18-
</diamond-wrap>
18+
</dmd-wrap>
1919
</header>

‎src/components/composition/d-sidebar-layout.webc‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
:host {
33
display: grid;
44
grid-template-columns: 1fr;
5-
gap: var(--diamond-spacing-fluid-sm);
5+
gap: var(--dmd-spacing-fluid-sm);
66

77
@media (width >= 768px) {
8-
gap: var(--diamond-spacing-fluid);
8+
gap: var(--dmd-spacing-fluid);
99
grid-template-columns: 1fr 3fr;
1010
}
1111
}

‎src/components/composition/d-title-group.webc‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
}
88

99
p:first-child {
10-
font-weight: var(--diamond-font-weight-bold);
11-
font-size: var(--diamond-font-size-sm);
10+
font-weight: var(--dmd-font-weight-bold);
11+
font-size: var(--dmd-font-size-sm);
1212
}
1313

1414
h2 {
15-
margin-block: var(--diamond-spacing);
15+
margin-block: var(--dmd-spacing);
1616
}
1717

1818
p:last-child {
19-
font-size: var(--diamond-font-size-lg);
19+
font-size: var(--dmd-font-size-lg);
2020
}
2121
}
2222
</style>

‎src/components/content/d-hero-image.webc‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
color: var(--color-blue);
2929
display: grid;
3030
grid-template-columns: 1fr 1fr;
31-
gap: var(--diamond-spacing-sm);
31+
gap: var(--dmd-spacing-sm);
3232
transform: rotate(45deg);
3333
}
3434

@@ -43,26 +43,26 @@
4343

4444
.icon-composition {
4545
animation:
46-
fade 0.75s var(--diamond-transition-timing),
47-
enter-from-top-left 1s var(--diamond-transition-timing-boing);
46+
fade 0.75s var(--dmd-transition-timing),
47+
enter-from-top-left 1s var(--dmd-transition-timing-boing);
4848
}
4949

5050
.icon-content {
5151
animation:
52-
fade 0.75s var(--diamond-transition-timing),
53-
enter-from-top-right 1s var(--diamond-transition-timing-boing);
52+
fade 0.75s var(--dmd-transition-timing),
53+
enter-from-top-right 1s var(--dmd-transition-timing-boing);
5454
}
5555

5656
.icon-controls {
5757
animation:
58-
fade 0.75s var(--diamond-transition-timing),
59-
enter-from-bottom-left 1s var(--diamond-transition-timing-boing);
58+
fade 0.75s var(--dmd-transition-timing),
59+
enter-from-bottom-left 1s var(--dmd-transition-timing-boing);
6060
}
6161

6262
.icon-canvas {
6363
animation:
64-
fade 0.75s var(--diamond-transition-timing),
65-
enter-from-bottom-right 1s var(--diamond-transition-timing-boing);
64+
fade 0.75s var(--dmd-transition-timing),
65+
enter-from-bottom-right 1s var(--dmd-transition-timing-boing);
6666
}
6767
</style>
6868

0 commit comments

Comments
 (0)