From 4b2c0af2a8aba9329e3953ac7e08016d08839487 Mon Sep 17 00:00:00 2001 From: Gavyn McKenzie Date: Tue, 11 Nov 2025 04:22:50 +0000 Subject: [PATCH] feat: upgrade to diamond 2 --- package-lock.json | 14 +- package.json | 2 +- src/404.webc | 46 ++--- src/about.webc | 40 ++-- src/components/canvas/d-alert.webc | 26 +-- src/components/canvas/d-site-footer.webc | 8 +- src/components/canvas/d-site-header.webc | 10 +- .../composition/d-sidebar-layout.webc | 4 +- src/components/composition/d-title-group.webc | 8 +- src/components/content/d-hero-image.webc | 18 +- src/components/content/d-home-hero.webc | 28 +-- .../content/d-made-with-love-and-coffee.webc | 8 +- src/components/content/d-separator.webc | 16 +- src/components/control/d-nav-card.webc | 16 +- src/components/control/d-sidebar-nav.webc | 54 ++--- src/components/control/d-site-nav.webc | 2 +- src/components/control/d-tabs.webc | 18 +- src/guide/comparison/index.webc | 8 +- src/index.webc | 188 +++++++++--------- src/layouts/default.webc | 44 ++-- src/layouts/docs.webc | 52 ++--- src/styles/base.css | 8 +- src/styles/button.css | 8 +- src/styles/font.css | 6 +- src/styles/input.css | 4 +- src/styles/prism-theme.css | 4 +- src/styles/spacing.css | 2 +- src/styles/theme.css | 18 +- src/styles/util.css | 6 +- 29 files changed, 333 insertions(+), 333 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7094084..261cdc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "ISC", "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", @@ -562,9 +562,9 @@ } }, "node_modules/@etchteam/diamond-ui": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/@etchteam/diamond-ui/-/diamond-ui-1.37.0.tgz", - "integrity": "sha512-+Wr/htyHXuTIhEb7S+I9ken2ygozfcEGQzIki2aS5cQUPbBh75g6HMNyo5anlpOG7gpgpG+OdxR2rcYRh11MHA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@etchteam/diamond-ui/-/diamond-ui-2.0.1.tgz", + "integrity": "sha512-sTwo4wIfM9OzLfB2YN2eYUi/qF0PAVtUgsT5ZV0YkZpwph1laRsQnoym68ekJ2We0eRhWCD9fg6xnaMtzIdwnA==", "dependencies": { "lit": "^3.1.0", "modern-normalize": "2.0.0" @@ -1623,9 +1623,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001666", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001666.tgz", - "integrity": "sha512-gD14ICmoV5ZZM1OdzPWmpx+q4GyefaK06zi8hmfHV5xe4/2nOQX3+Dw5o+fSqOws2xVwL9j+anOPFwHzdEdV4g==", + "version": "1.0.30001754", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz", + "integrity": "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==", "dev": true, "funding": [ { diff --git a/package.json b/package.json index 0ade2da..7cc102e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/404.webc b/src/404.webc index 35302a2..2d521cb 100644 --- a/src/404.webc +++ b/src/404.webc @@ -4,55 +4,55 @@ title: 404 description: Page not found --- - - + +
- +

404

Page not found

 - +

If you're looking for diamonds, try these tips:

    -
  • Find a big cave: Look for caves in biomes with open fields, plains, deserts, or savannas. You can look for cliffs, ravines, or holes in the surface.
    • -
  • Bring torches: Torches help you see in the dark and prevent mobs from respawning.
    • -
  • Wear iron armor and a shield: This will help protect you.
    • -
  • Use a night vision potion: This will make diamonds and other ores more obvious.
    • -
  • Check the ceiling: Diamonds are often found on the ceiling of caves
    • +
  • Find a big cave: Look for caves in biomes with open fields, plains, deserts, or savannas. You can look for cliffs, ravines, or holes in the surface.
    • +
  • Bring torches: Torches help you see in the dark and prevent mobs from respawning.
    • +
  • Wear iron armor and a shield: This will help protect you.
    • +
  • Use a night vision potion: This will make diamonds and other ores more obvious.
    • +
  • Check the ceiling: Diamonds are often found on the ceiling of caves

If you're looking for Diamond UI, try the docs.

- +
- + - - + +

The story continues

Do you want to know more?

 - - - + + +

Intro

A quick run down of what Diamond UI is, and how it can help.

 - - + +

Guide

How to get started and use Diamond UI on your next project.

 - - - - - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/about.webc b/src/about.webc index d7109ae..773a068 100644 --- a/src/about.webc +++ b/src/about.webc @@ -4,26 +4,26 @@ title: About description: The origin story of Diamond UI --- - - + +
-
+

The origin story

-

How the pursuit of a better methodology began

+

How the pursuit of a better methodology began

-
+

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.

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.

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!

As time went on, the components became more and more complicated, trying to support every scenario, becoming harder to test and harder to understand.

I spoke to Jim, our designer:

- +

Why are the designs always fighting the existing components, why can’t you re-use the bits of the interface that are already there?

He responded:

- +

I am re-using it! Interface styles can be grouped into four categories: @@ -37,31 +37,31 @@ description: The origin story of Diamond UI

- + - - + +

The story continues

Do you want to know more?

 - - - + + +

Intro

A quick run down of what Diamond UI is, and how it can help.

 - - + +

Guide

How to get started and use Diamond UI on your next project.

 - - - - - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/components/canvas/d-alert.webc b/src/components/canvas/d-alert.webc index f1f9214..2b53739 100644 --- a/src/components/canvas/d-alert.webc +++ b/src/components/canvas/d-alert.webc @@ -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%; } - - - - - - + + + + + + - - - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/components/canvas/d-site-footer.webc b/src/components/canvas/d-site-footer.webc index 520b3a1..dc19a1e 100644 --- a/src/components/canvas/d-site-footer.webc +++ b/src/components/canvas/d-site-footer.webc @@ -1,7 +1,7 @@ diff --git a/src/components/canvas/d-site-header.webc b/src/components/canvas/d-site-header.webc index 142823c..5ff7983 100644 --- a/src/components/canvas/d-site-header.webc +++ b/src/components/canvas/d-site-header.webc @@ -1,19 +1,19 @@
- +
- +
\ No newline at end of file diff --git a/src/components/composition/d-sidebar-layout.webc b/src/components/composition/d-sidebar-layout.webc index 5e2d1f4..5192d3c 100644 --- a/src/components/composition/d-sidebar-layout.webc +++ b/src/components/composition/d-sidebar-layout.webc @@ -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; } } diff --git a/src/components/composition/d-title-group.webc b/src/components/composition/d-title-group.webc index 079d1a2..2ada728 100644 --- a/src/components/composition/d-title-group.webc +++ b/src/components/composition/d-title-group.webc @@ -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); } } \ No newline at end of file diff --git a/src/components/content/d-hero-image.webc b/src/components/content/d-hero-image.webc index 3c03459..368531c 100644 --- a/src/components/content/d-hero-image.webc +++ b/src/components/content/d-hero-image.webc @@ -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); } @@ -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); } diff --git a/src/components/content/d-home-hero.webc b/src/components/content/d-home-hero.webc index 220eef5..f3bd315 100644 --- a/src/components/content/d-home-hero.webc +++ b/src/components/content/d-home-hero.webc @@ -31,7 +31,7 @@ :host { display: grid; - grid-gap: var(--diamond-spacing-xl); + grid-gap: var(--dmd-spacing-xl); grid-template-columns: 1fr; overflow: hidden; @@ -46,7 +46,7 @@ } p, .alert { - animation: fade 0.75s var(--diamond-transition-timing) forwards; + animation: fade 0.75s var(--dmd-transition-timing) forwards; opacity: 0; @media (width >= 768px) { @@ -55,12 +55,12 @@ } .image { - animation: rotateit 0.5s var(--diamond-transition-timing) 0.4s forwards; + animation: rotateit 0.5s var(--dmd-transition-timing) 0.4s forwards; align-content: center; color: var(--color-blue); display: none; grid-template-columns: 1fr 1fr; - gap: var(--diamond-spacing-sm); + gap: var(--dmd-spacing-sm); transform: rotate(0deg); margin-inline-start: auto; width: 15vw; @@ -87,39 +87,39 @@ .icon-composition { animation: - fade 0.75s var(--diamond-transition-timing) 0.25s forwards, - enter-from-top-left 0.4s var(--diamond-transition-timing) 0.25s forwards; + fade 0.75s var(--dmd-transition-timing) 0.25s forwards, + enter-from-top-left 0.4s var(--dmd-transition-timing) 0.25s forwards; transform: translate(-100%, -100%); } .icon-content { animation: - fade 0.75s var(--diamond-transition-timing) 0.25s forwards, - enter-from-top-right 0.4s var(--diamond-transition-timing) 0.25s forwards; + fade 0.75s var(--dmd-transition-timing) 0.25s forwards, + enter-from-top-right 0.4s var(--dmd-transition-timing) 0.25s forwards; transform: translate(100%, -100%); } .icon-controls { animation: - fade 0.75s var(--diamond-transition-timing) 0.25s forwards, - enter-from-bottom-left 0.4s var(--diamond-transition-timing) 0.25s forwards; + fade 0.75s var(--dmd-transition-timing) 0.25s forwards, + enter-from-bottom-left 0.4s var(--dmd-transition-timing) 0.25s forwards; transform: translate(-100%, 100%); } .icon-canvas { animation: - fade 0.75s var(--diamond-transition-timing) 0.25s forwards, - enter-from-bottom-right 0.4s var(--diamond-transition-timing) 0.25s forwards; + fade 0.75s var(--dmd-transition-timing) 0.25s forwards, + enter-from-bottom-right 0.4s var(--dmd-transition-timing) 0.25s forwards; transform: translate(100%, 100%); }
-

+

Bring clarity to
your components

-

+

Diamond UI is a methodology for teams who build interfaces.

diff --git a/src/components/content/d-made-with-love-and-coffee.webc b/src/components/content/d-made-with-love-and-coffee.webc index 7899dbb..ff7cc30 100644 --- a/src/components/content/d-made-with-love-and-coffee.webc +++ b/src/components/content/d-made-with-love-and-coffee.webc @@ -2,7 +2,7 @@ :host { display: grid; grid-template-columns: auto 1fr; - column-gap: var(--diamond-spacing-sm); + column-gap: var(--dmd-spacing-sm); color: var(--color-white); align-items: center; } @@ -15,12 +15,12 @@ } p { - line-height: var(--diamond-font-line-height-sm); + line-height: var(--dmd-font-line-height-sm); } .dui { - font-size: var(--diamond-font-size-lg); - font-weight: var(--diamond-font-weight-bold); + font-size: var(--dmd-font-size-lg); + font-weight: var(--dmd-font-weight-bold); } diff --git a/src/components/content/d-separator.webc b/src/components/content/d-separator.webc index 47f67bb..6699970 100644 --- a/src/components/content/d-separator.webc +++ b/src/components/content/d-separator.webc @@ -23,10 +23,10 @@ :host { align-items: center; - column-gap: var(--diamond-spacing); + column-gap: var(--dmd-spacing); display: flex; justify-content: center; - padding-block: var(--diamond-spacing-sm); + padding-block: var(--dmd-spacing-sm); } .line { @@ -34,7 +34,7 @@ flex: 1 1 auto; &::after { - border-block-start: var(--diamond-border); + border-block-start: var(--dmd-border); content: ''; display: block; animation: expandline linear 1s; @@ -50,9 +50,9 @@ animation: growdiamond linear 1s; animation-timeline: view(); aspect-ratio: 1; - background-color: var(--diamond-theme-border-color); - block-size: var(--diamond-font-size-xs); - border-radius: var(--diamond-radius-xs); + background-color: var(--dmd-theme-border-color); + block-size: var(--dmd-font-size-xs); + border-radius: var(--dmd-radius-xs); transform: rotate(45deg) scale(0.4); } @@ -61,12 +61,12 @@ } .diamond.animate-on-load { - animation: rotateandgrowdiamond 0.75s var(--diamond-transition-timing) 0.25s forwards; + animation: rotateandgrowdiamond 0.75s var(--dmd-transition-timing) 0.25s forwards; transform: rotate(0deg) scale(0); } .line.animate-on-load::after { - animation: fadeandexpandline 0.5s var(--diamond-transition-timing) 0.5s forwards; + animation: fadeandexpandline 0.5s var(--dmd-transition-timing) 0.5s forwards; opacity: 0; width: 0%; } diff --git a/src/components/control/d-nav-card.webc b/src/components/control/d-nav-card.webc index e13684a..11a76d2 100644 --- a/src/components/control/d-nav-card.webc +++ b/src/components/control/d-nav-card.webc @@ -1,28 +1,28 @@ diff --git a/src/components/control/d-sidebar-nav.webc b/src/components/control/d-sidebar-nav.webc index 04cfb3c..5829781 100644 --- a/src/components/control/d-sidebar-nav.webc +++ b/src/components/control/d-sidebar-nav.webc @@ -1,20 +1,20 @@ diff --git a/src/components/control/d-tabs.webc b/src/components/control/d-tabs.webc index 0beaf92..09bff4e 100644 --- a/src/components/control/d-tabs.webc +++ b/src/components/control/d-tabs.webc @@ -9,16 +9,16 @@ list-style: none; padding: 0; margin: 0; - gap: var(--diamond-spacing-sm); + gap: var(--dmd-spacing-sm); @media (width >= 600px) { - gap: var(--diamond-spacing-fluid-sm); + gap: var(--dmd-spacing-fluid-sm); justify-content: center; } } li { - width: calc(50% - var(--diamond-spacing-sm)); + width: calc(50% - var(--dmd-spacing-sm)); flex: 1 1 auto; @media (width >= 600px) { @@ -29,21 +29,21 @@ a { align-items: center; - border-radius: var(--diamond-radius); - column-gap: var(--diamond-spacing-sm); + border-radius: var(--dmd-radius); + column-gap: var(--dmd-spacing-sm); display: inline-flex; - padding: var(--diamond-spacing-sm) var(--diamond-spacing-md); + padding: var(--dmd-spacing-sm) var(--dmd-spacing-md); text-transform: capitalize; text-decoration: none; transition: - background-color var(--diamond-transition), - color var(--diamond-transition); + background-color var(--dmd-transition), + color var(--dmd-transition); width: 100%; &[aria-selected], &:hover { color: var(--color-white); - background-color: var(--diamond-theme-background-muted); + background-color: var(--dmd-theme-background-muted); } @media (width >= 600px) { diff --git a/src/guide/comparison/index.webc b/src/guide/comparison/index.webc index f45cf54..89fb7d0 100644 --- a/src/guide/comparison/index.webc +++ b/src/guide/comparison/index.webc @@ -20,23 +20,23 @@ Atomic design relies on dividing components into groups called: atoms, molecules The smallest components are atoms. These are things like HTML elements, or other bits of UI that can’t be broken down any further without ceasing to be functional. - + Some atomic components: title, text, input, button - + Moving up from atoms, molecules are small groups of UI elements that bond together to create a purpose. A label, input and button can group together to form an input group. - + A grouped input and button - + Following this trend, organisms are larger groups of atoms and molecules. Organisms are more complicated bits of UI that form a distinct section of a user interface. A typical organism might be the hero we used as a case study at the beginning of these docs. diff --git a/src/index.webc b/src/index.webc index 6ac96de..4d24d23 100644 --- a/src/index.webc +++ b/src/index.webc @@ -4,11 +4,11 @@ title: Diamond UI - Bring clarity to your components description: Diamond UI is a methodology for teams who build interfaces. --- - +
- + - +
@@ -16,8 +16,8 @@ description: Diamond UI is a methodology for teams who build interfaces.
- - + +

The methodology in a nutshell

Each component is created with a single concern from one of four areas of responsibility.

 @@ -25,29 +25,29 @@ description: Diamond UI is a methodology for teams who build interfaces. - - - -

+ + + +

Content components look after the general styles for text and images, but can extend to data-specific patterns such as user profiles or product information.

-

Examples

+

Examples

  • Heading – title elements, represented in HTML as h1-5
  • Text – a piece of typographic content
  • Icon – a glyph representing something in the app ecosystem
  • Data-specific – a user profile or product summary
- - + + Title

A paragraph of text.

 - - - + + + - - - -

+ + + +

Controls are interactive elements of the page. Anything that can be clicked, dragged, typed into or accessed in some way with the mouse, keyboard or touch is a control.

-

Examples

+

Examples

  • Button – a clickable component that triggers an action, such as submitting a form
  • Link – a hypertext link that takes the user to another page or section of the app
  • Input – a form input that allows users to enter information
- - + + A paragraph of text.

+ - - - + + + - - - -

+ + + +

A canvas represents a part of the page that content and controls sit within. Canvases provide padding and backgrounds for their content area, but do not dictate any other layout constraints.

-

Examples

+

Examples

  • Card – a flat box, often containing an image, title, text and a call to action
  • Header – a floating element at the top of the page, containing the logo and main navigation
  • Hero – the first element in the main content of the page, containing the title and intro
- - + + Action +
- - - + + + - - - -

+ + + +

Compositions are an invisible element of the page that provides layout. Compositions are solely concerned with creating structure and spacing.

-

Examples

+

Examples

  • Grid – a layout with grid cells arranged in columns and rows
  • Spacing – adds spacing between components or areas of the page
  • Container – sets a max width for a page, block of content or components
- - + + +
- - - - + + + +
- - + +

It’s pretty simple, but that’s the whole point!

The four Cs set clear boundaries between component responsibilities.

 - - -

+ + +

Are your components overcomplicated?

-

+

As a product scales, even the most carefully crafted components can get out of shape.

@@ -190,8 +190,8 @@ description: Diamond UI is a methodology for teams who build interfaces.

  • Not composable.

    • Diamond UI helps avoid this.

    - - +     + - - + +     - - -

    + + +

    Diamond UI keeps your components clean.

    -

    +

    By separating responsibilities, we create reusable components that can solve future problems before knowing they exist.

    @@ -234,8 +234,8 @@ description: Diamond UI is a methodology for teams who build interfaces.
  • With minimal onboarding, developers can quickly understand where to find each type of component.
  • The methodology does not dictate any technology or naming constraints.
    • - - +     + - - + +     - - -

    It pays you back.

    + + +

    It pays you back.

    When maintaining components that were built with Diamond UI:

    • There are fewer output variations, so components are easier to test.
      • @@ -270,8 +270,8 @@ description: Diamond UI is a methodology for teams who build interfaces. legibility whilst staying flexible.
    -     - + + - -     + + - - -

    + + +

    It's about clarity, not perfection.

    -

    +

    Software products are never finished. Features can always be improved.

    @@ -309,9 +309,9 @@ description: Diamond UI is a methodology for teams who build interfaces. Diamond UI makes it easy to see where your interface changes will take effect. Giving you more confidence when developing your product.

    - - - +     + +

    Diamond UI is

      @@ -329,38 +329,38 @@ description: Diamond UI is a methodology for teams who build interfaces.
    • The next big thing in “design systems”
     - - +     +     - +

    - - + +

    Interested in trying it out?

    New is exciting, but it comes with friction – we realise there’s more to explain.

     - - - + + +

    Guide

    How to get started and use Diamond UI on your next project.

     -     - + +

    About

    The short story of Diamond UI and how it came to be.

     -     -     -     -     + + + +
    - + diff --git a/src/layouts/default.webc b/src/layouts/default.webc index 764611a..fcc8190 100644 --- a/src/layouts/default.webc +++ b/src/layouts/default.webc @@ -70,26 +70,26 @@ > - + - - + + - - + + - - + +
    - - + + - - + +

    Have you tried Diamond UI?

    @@ -98,18 +98,18 @@ add your site to our sparkly wall of appreciation.

    -     -     - - -

    ©2024 – Etch Software Ltd

    -     - - - -     + + + + +

    ©2024 – Etch Software Ltd

    +     + + + +     -     + diff --git a/src/layouts/docs.webc b/src/layouts/docs.webc index 9a8708c..b43ba61 100644 --- a/src/layouts/docs.webc +++ b/src/layouts/docs.webc @@ -2,7 +2,7 @@ layout: default.webc --- - +
    @@ -10,7 +10,7 @@ layout: default.webc
    • - +
      • @@ -18,34 +18,34 @@ layout: default.webc
    - - - - + + + +

    -     - + - -     + + - + - - -
    + + +
    - - + + - -

    + +

    -     +     -     -     -     -     -     + + + + +     -     \ No newline at end of file + \ No newline at end of file diff --git a/src/styles/base.css b/src/styles/base.css index bafc61f..858c258 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -1,6 +1,6 @@ h1, h2 { - font-weight: var(--diamond-font-weight-base); + font-weight: var(--dmd-font-weight-base); } a { @@ -8,7 +8,7 @@ a { } a.active { - color: var(--diamond-theme-color); + color: var(--dmd-theme-color); text-decoration: none; } @@ -18,6 +18,6 @@ a.active { code:not(code[class*="language-"]) { background: var(--color-blue-darker); - border: var(--diamond-border); - font-size: var(--diamond-font-size-sm); + border: var(--dmd-border); + font-size: var(--dmd-font-size-sm); } diff --git a/src/styles/button.css b/src/styles/button.css index c574aaf..ae3029a 100644 --- a/src/styles/button.css +++ b/src/styles/button.css @@ -1,9 +1,9 @@ :root { - --diamond-button-primary-background: var(--color-blue); - --diamond-button-primary-background-hover: color-mix( + --dmd-button-primary-background: var(--color-blue); + --dmd-button-primary-background-hover: color-mix( in srgb, var(--color-blue), - var(--diamond-color-black) 10% + var(--dmd-color-black) 10% ); - --diamond-button-primary-color: var(--diamond-color-white); + --dmd-button-primary-color: var(--dmd-color-white); } diff --git a/src/styles/font.css b/src/styles/font.css index 2298a36..476b5df 100644 --- a/src/styles/font.css +++ b/src/styles/font.css @@ -21,8 +21,8 @@ } :root { - --diamond-font-family: "Nunito sans", -apple-system, system-ui, - BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; + --dmd-font-family: "Nunito sans", -apple-system, system-ui, BlinkMacSystemFont, + Roboto, Helvetica, Arial, sans-serif; - --diamond-font-size-h1: clamp(2rem, 10vw, 4rem); + --dmd-font-size-h1: clamp(2rem, 10vw, 4rem); } diff --git a/src/styles/input.css b/src/styles/input.css index 0181c93..98c39bf 100644 --- a/src/styles/input.css +++ b/src/styles/input.css @@ -1,4 +1,4 @@ :root { - --diamond-input-border-color: var(--color-gray); - --diamond-input-border-color-hover: var(--color-blue); + --dmd-input-border-color: var(--color-gray); + --dmd-input-border-color-hover: var(--color-blue); } diff --git a/src/styles/prism-theme.css b/src/styles/prism-theme.css index e076f66..f131315 100644 --- a/src/styles/prism-theme.css +++ b/src/styles/prism-theme.css @@ -35,7 +35,7 @@ pre[class*="language-"] { :not(pre) > code[class*="language-"], pre[class*="language-"] { background: var(--color-blue-darker); - border: var(--diamond-border); + border: var(--dmd-border); } /* Inline code */ @@ -124,7 +124,7 @@ pre[class*="language-"] { } .token.inserted { - animation: fadein 0.75s var(--diamond-transition-timing) forwards; + animation: fadein 0.75s var(--dmd-transition-timing) forwards; background-color: hsl(120deg 73% 75% / 10%); opacity: 0; } diff --git a/src/styles/spacing.css b/src/styles/spacing.css index 325bc94..e7f3116 100644 --- a/src/styles/spacing.css +++ b/src/styles/spacing.css @@ -1,3 +1,3 @@ :root { - --diamond-spacing-fluid-sm: clamp(1rem, 2.5vw, 3rem); + --dmd-spacing-fluid-sm: clamp(1rem, 2.5vw, 3rem); } diff --git a/src/styles/theme.css b/src/styles/theme.css index 2b4720e..668bd14 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -1,14 +1,14 @@ :root { - --diamond-theme-background: var(--color-blue-darkest); - --diamond-theme-color: var(--color-blue-lightest); - --diamond-theme-heading-color: var(--color-white); - --diamond-theme-link-color: var(--color-blue-light); - --diamond-theme-border-color: var(--color-blue-dark); - --diamond-theme-background-muted: var(--color-blue-darker); - --diamond-theme-border-color-hover: var(--color-blue-light); + --dmd-theme-background: var(--color-blue-darkest); + --dmd-theme-color: var(--color-blue-lightest); + --dmd-theme-heading-color: var(--color-white); + --dmd-theme-link-color: var(--color-blue-light); + --dmd-theme-border-color: var(--color-blue-dark); + --dmd-theme-background-muted: var(--color-blue-darker); + --dmd-theme-border-color-hover: var(--color-blue-light); } .theme-medium { - --diamond-theme-background: var(--color-blue-darker); - --diamond-theme-background-muted: var(--color-blue-dark); + --dmd-theme-background: var(--color-blue-darker); + --dmd-theme-background-muted: var(--color-blue-dark); } diff --git a/src/styles/util.css b/src/styles/util.css index eef346e..a8b3258 100644 --- a/src/styles/util.css +++ b/src/styles/util.css @@ -15,7 +15,7 @@ } .fade-in { - animation: fadein 0.75s var(--diamond-transition-timing) forwards; + animation: fadein 0.75s var(--dmd-transition-timing) forwards; opacity: 0; } @@ -35,13 +35,13 @@ .longform { h2, h3 { - margin-block-start: var(--diamond-spacing-lg); + margin-block-start: var(--dmd-spacing-lg); } img, pre[class*="language-"], iframe { - margin-block: var(--diamond-spacing-lg); + margin-block: var(--dmd-spacing); max-width: 100%; }