Skip to content

feat: upgrade to diamond 2 #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JoshTheWanderer merged 1 commit into from
Nov 11, 2025
Merged

feat: upgrade to diamond 2 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
},
"dependencies": {
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@etchteam/diamond-ui": "^1.27.4"
"@etchteam/diamond-ui": "^2.0.1"
},
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
Expand Down
46 changes: 23 additions & 23 deletions src/404.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,55 @@ title: 404
description: Page not found
---

<diamond-wrap size="lg" class="diamond-spacing-bottom-fluid">
<diamond-section padding="fluid">
<dmd-wrap size="lg" class="dmd-spacing-bottom-fluid">
<dmd-section padding="fluid">
<article>
<d-title-group class="diamond-text-align-center diamond-spacing-bottom-lg">
<d-title-group class="dmd-text-align-center dmd-spacing-bottom-lg">
<p>404</p>
<h1>Page not found</h1>
</d-title-group>

<diamond-wrap size="sm" gutter="none">
<dmd-wrap size="sm" gutter="none">
<p>
If you're looking for <strong>diamonds</strong>, try these tips:
</p>
<ul>
<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>
<li class="diamond-spacing-bottom-sm"><strong>Bring torches:</strong> Torches help you see in the dark and prevent mobs from respawning.</li>
<li class="diamond-spacing-bottom-sm"><strong>Wear iron armor and a shield:</strong> This will help protect you.</li>
<li class="diamond-spacing-bottom-sm"><strong>Use a night vision potion:</strong> This will make diamonds and other ores more obvious.</li>
<li class="diamond-spacing-bottom-sm"><strong>Check the ceiling:</strong> Diamonds are often found on the ceiling of caves</li>
<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>
<li class="dmd-spacing-bottom-sm"><strong>Bring torches:</strong> Torches help you see in the dark and prevent mobs from respawning.</li>
<li class="dmd-spacing-bottom-sm"><strong>Wear iron armor and a shield:</strong> This will help protect you.</li>
<li class="dmd-spacing-bottom-sm"><strong>Use a night vision potion:</strong> This will make diamonds and other ores more obvious.</li>
<li class="dmd-spacing-bottom-sm"><strong>Check the ceiling:</strong> Diamonds are often found on the ceiling of caves</li>
</ul>
<p>
If you're looking for <strong>Diamond UI</strong>, try <a href="/guide/">the docs</a>.
</p>
</diamond-wrap>
</dmd-wrap>
</article>
</diamond-section>
</dmd-section>

<d-separator></d-separator>

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

<diamond-wrap size="lg">
<diamond-grid wrap="wrap" gap="lg">
<diamond-grid-item small-mobile="12" small-tablet="6">
<dmd-wrap size="lg">
<dmd-grid wrap="wrap" gap="lg">
<dmd-grid-item small-mobile="12" small-tablet="6">
<d-nav-card icon="info" href="/">
<h3>Intro</h3>
<p>A quick run down of what Diamond UI is, and how it can help.</p>
</d-nav-card>
</diamond-grid-item>
<diamond-grid-item small-mobile="12" small-tablet="6">
</dmd-grid-item>
<dmd-grid-item small-mobile="12" small-tablet="6">
<d-nav-card icon="document" href="/guide/">
<h3>Guide</h3>
<p>How to get started and use Diamond UI on your next project.</p>
</d-nav-card>
</diamond-grid-item>
</diamond-grid>
</diamond-wrap>
</diamond-section>
</diamond-wrap>
</dmd-grid-item>
</dmd-grid>
</dmd-wrap>
</dmd-section>
</dmd-wrap>
40 changes: 20 additions & 20 deletions src/about.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,26 @@ title: About
description: The origin story of Diamond UI
---

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

<div class="diamond-text-size-lg">
<div class="dmd-text-size-lg">
<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>
<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>
<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>
<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>
<p>I spoke to <a href="https://etch.co/team/jim" target="_blank" rel="noopener noreferrer">Jim</a>, our designer:</p>
<d-alert class="diamond-spacing-bottom-md">
<d-alert class="dmd-spacing-bottom-md">
<d-icon icon="chat" slot="icon"></d-icon>
<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>
</d-alert>
<p>He responded:</p>
<d-alert class="diamond-spacing-bottom-md">
<d-alert class="dmd-spacing-bottom-md">
<d-icon icon="chat" slot="icon"></d-icon>
<p>
I am re-using it! Interface styles can be grouped into four categories:
Expand All @@ -37,31 +37,31 @@ description: The origin story of Diamond UI
</p>
</div>
</article>
</diamond-section>
</dmd-section>

<d-separator></d-separator>

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

<diamond-wrap size="lg">
<diamond-grid wrap="wrap" gap="lg">
<diamond-grid-item small-mobile="12" small-tablet="6">
<dmd-wrap size="lg">
<dmd-grid wrap="wrap" gap="lg">
<dmd-grid-item small-mobile="12" small-tablet="6">
<d-nav-card icon="info" href="/">
<h3>Intro</h3>
<p>A quick run down of what Diamond UI is, and how it can help.</p>
</d-nav-card>
</diamond-grid-item>
<diamond-grid-item small-mobile="12" small-tablet="6">
</dmd-grid-item>
<dmd-grid-item small-mobile="12" small-tablet="6">
<d-nav-card icon="document" href="/guide/">
<h3>Guide</h3>
<p>How to get started and use Diamond UI on your next project.</p>
</d-nav-card>
</diamond-grid-item>
</diamond-grid>
</diamond-wrap>
</diamond-section>
</diamond-wrap>
</dmd-grid-item>
</dmd-grid>
</dmd-wrap>
</dmd-section>
</dmd-wrap>
26 changes: 13 additions & 13 deletions src/components/canvas/d-alert.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,23 @@
}

h2, h3, h4 {
font-size: var(--diamond-font-size-base);
font-weight: var(--diamond-font-weight-bold);
margin-block-end: var(--diamond-spacing-xs);
font-size: var(--dmd-font-size-base);
font-weight: var(--dmd-font-weight-bold);
margin-block-end: var(--dmd-spacing-xs);
}

:host.fill diamond-card {
:host.fill dmd-card {
height: 100%;
}
</style>

<diamond-card class="card" muted radius>
<diamond-grid align-items="baseline" gap="sm">
<diamond-grid-item>
<span class="diamond-text-size-lg"><slot name="icon"></slot></span>
</diamond-grid-item>
<diamond-grid-item grow shrink>
<dmd-card class="card" muted radius>
<dmd-grid align-items="baseline" gap="sm">
<dmd-grid-item>
<span class="dmd-text-size-lg"><slot name="icon"></slot></span>
</dmd-grid-item>
<dmd-grid-item grow shrink>
<slot></slot>
</diamond-grid-item>
</diamond-grid>
</diamond-card>
</dmd-grid-item>
</dmd-grid>
</dmd-card>
8 changes: 4 additions & 4 deletions src/components/canvas/d-site-footer.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<footer class="theme-medium">
<diamond-section padding="lg">
<diamond-wrap size="xxl">
<dmd-section padding="lg">
<dmd-wrap size="xxl">
<slot></slot>
</diamond-wrap>
</diamond-section>
</dmd-wrap>
</dmd-section>
</footer>
10 changes: 5 additions & 5 deletions src/components/canvas/d-site-header.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<style webc:scoped>
:host {
display: block;
margin-block-start: var(--diamond-spacing-lg);
margin-block-start: var(--dmd-spacing-lg);
}

.inner {
border-block-end: var(--diamond-border);
padding-block-end: var(--diamond-spacing);
border-block-end: var(--dmd-border);
padding-block-end: var(--dmd-spacing);
}
</style>

<header>
<diamond-wrap size="xxl">
<dmd-wrap size="xxl">
<div class="inner">
<slot></slot>
</div>
</diamond-wrap>
</dmd-wrap>
</header>
4 changes: 2 additions & 2 deletions src/components/composition/d-sidebar-layout.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
:host {
display: grid;
grid-template-columns: 1fr;
gap: var(--diamond-spacing-fluid-sm);
gap: var(--dmd-spacing-fluid-sm);

@media (width >= 768px) {
gap: var(--diamond-spacing-fluid);
gap: var(--dmd-spacing-fluid);
grid-template-columns: 1fr 3fr;
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/components/composition/d-title-group.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@
}

p:first-child {
font-weight: var(--diamond-font-weight-bold);
font-size: var(--diamond-font-size-sm);
font-weight: var(--dmd-font-weight-bold);
font-size: var(--dmd-font-size-sm);
}

h2 {
margin-block: var(--diamond-spacing);
margin-block: var(--dmd-spacing);
}

p:last-child {
font-size: var(--diamond-font-size-lg);
font-size: var(--dmd-font-size-lg);
}
}
</style>
18 changes: 9 additions & 9 deletions src/components/content/d-hero-image.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
color: var(--color-blue);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--diamond-spacing-sm);
gap: var(--dmd-spacing-sm);
transform: rotate(45deg);
}

Expand All @@ -43,26 +43,26 @@

.icon-composition {
animation:
fade 0.75s var(--diamond-transition-timing),
enter-from-top-left 1s var(--diamond-transition-timing-boing);
fade 0.75s var(--dmd-transition-timing),
enter-from-top-left 1s var(--dmd-transition-timing-boing);
}

.icon-content {
animation:
fade 0.75s var(--diamond-transition-timing),
enter-from-top-right 1s var(--diamond-transition-timing-boing);
fade 0.75s var(--dmd-transition-timing),
enter-from-top-right 1s var(--dmd-transition-timing-boing);
}

.icon-controls {
animation:
fade 0.75s var(--diamond-transition-timing),
enter-from-bottom-left 1s var(--diamond-transition-timing-boing);
fade 0.75s var(--dmd-transition-timing),
enter-from-bottom-left 1s var(--dmd-transition-timing-boing);
}

.icon-canvas {
animation:
fade 0.75s var(--diamond-transition-timing),
enter-from-bottom-right 1s var(--diamond-transition-timing-boing);
fade 0.75s var(--dmd-transition-timing),
enter-from-bottom-right 1s var(--dmd-transition-timing-boing);
}
</style>

Expand Down
Loading