Update github-admonitions.css #1

smnandre · 2025-05-20T00:21:02Z

Use CSS var to ease the changes

smnandre · 2025-05-20T00:39:39Z

You could use these icons

<!-- Circle Alert -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z"/>
  <path d="M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z"/>
</svg>

<!-- Square Alert -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M4.5.1 5 0h6l.4.1 4.4 4.4.1.4V11l-.1.4-4.4 4.4-.4.1H5l-.4-.1-4.4-4.4L0 11V5l.1-.4L4.5.1Zm.6.9L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1Z"/>
  <path d="M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z"/>
</svg>

<!-- Box Alert -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12ZM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"/>
  <path d="M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z"/>
</svg>
      
<!-- Triangle Alert -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M8 2h.1L15 13.8v.2l-.1.1H1a.2.2 0 0 1 0-.3L7.8 2.1Zm1-.4a1.1 1.1 0 0 0-2 0L.2 13.2c-.5.8 0 1.8 1 1.8h13.7c.8 0 1.4-1 1-1.8l-7-11.6Z"/>
  <path d="M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 6Z"/>
</svg>

<!-- Lightbulb -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path d="M2 6a6 6 0 1 1 10.2 4.3 2 2 0 0 0-.5.6l-.7 1.8a.5.5 0 0 1-.5.3.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.2.4a1 1 0 0 1-1 .6H6.7a1 1 0 0 1-.9-.6l-.2-.4a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.5-.3l-.7-1.8a2 2 0 0 0-.5-.6A6 6 0 0 1 2 6Zm6-5a5 5 0 0 0-3.5 8.6c.3.2.5.6.7 1l.6 1.4h4.4l.6-1.5.7-1A5 5 0 0 0 8 1Z"/>
</svg>

This does render the following :

CSS values :

.md-admonition {
  padding: .5em;
  display: flex;
  flex-direction: column;
  gap: .5em;
  border-left: .25em solid;
  border-color: var(--adminition-color);
  margin-bottom: 2rem;
  background: white;

  > * {
    margin-block: 0;
  }

  a {
    color: var(--adminition-color);
  }
}

.md-admonition-label {
  padding-left: 1.5em;
  font-weight: 600;
  background-repeat: no-repeat;
  background-position-y: 50%;
  background-image: var(--adminition-icon, currentColor);
  color: var(--adminition-color, currentColor);
}

.md-admonition :last-child {
  margin-bottom: 0;
}

.md-admonition.md-admonition-note {
  --adminition-color: #0969da;
  --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230969da'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E");
}


.md-admonition.md-admonition-tip {
  --adminition-color: #1a7f37;
  --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a7f37'%3E%3Cpath d='M2 6a6 6 0 1 1 10.2 4.3 2 2 0 0 0-.5.6l-.7 1.8a.5.5 0 0 1-.5.3.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.2.4a1 1 0 0 1-1 .6H6.7a1 1 0 0 1-.9-.6l-.2-.4a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.5-.3l-.7-1.8a2 2 0 0 0-.5-.6A6 6 0 0 1 2 6Zm6-5a5 5 0 0 0-3.5 8.6c.3.2.5.6.7 1l.6 1.4h4.4l.6-1.5.7-1A5 5 0 0 0 8 1Z'/%3E%3C/svg%3E");
}

.md-admonition.md-admonition-important {
  --adminition-color: #8250df;
  --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238250df'%3E%3Cpath d='M4.5.1 5 0h6l.4.1 4.4 4.4.1.4V11l-.1.4-4.4 4.4-.4.1H5l-.4-.1-4.4-4.4L0 11V5l.1-.4L4.5.1Zm.6.9L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E");
}

.md-admonition.md-admonition-caution {
  --adminition-color: #d1242f;
  --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d1242f'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12ZM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E");
}

.md-admonition.md-admonition-warning {
  --adminition-color: #9a6700;
  --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239a6700'%3E%3Cpath d='M8 2h.1L15 13.8v.2l-.1.1H1a.2.2 0 0 1 0-.3L7.8 2.1Zm1-.4a1.1 1.1 0 0 0-2 0L.2 13.2c-.5.8 0 1.8 1 1.8h13.7c.8 0 1.4-1 1-1.8l-7-11.6Z'/%3E%3Cpath d='M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 6Z'/%3E%3C/svg%3E");
}

Demo page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Admonition Preview</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 2rem;
      background: #f4f4f4;
    }

    .md-admonition {
      padding: .5em;
      display: flex;
      flex-direction: column;
      gap: .5em;
      border-left: .25em solid;
      border-color: var(--adminition-color);
      margin-bottom: 2rem;
      background: white;

      > * {
        margin-block: 0;
      }

      a {
        color: var(--adminition-color);
      }
    }

    .md-admonition-label {
      padding-left: 1.5em;
      font-weight: 600;
      background-repeat: no-repeat;
      background-position-y: 50%;
      background-image: var(--adminition-icon, currentColor);
      color: var(--adminition-color, currentColor);
    }

    .md-admonition :last-child {
      margin-bottom: 0;
    }

    .md-admonition.md-admonition-note {
      --adminition-color: #0969da;
      --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230969da'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E");
    }


    .md-admonition.md-admonition-tip {
      --adminition-color: #1a7f37;
      --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a7f37'%3E%3Cpath d='M2 6a6 6 0 1 1 10.2 4.3 2 2 0 0 0-.5.6l-.7 1.8a.5.5 0 0 1-.5.3.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.2.4a1 1 0 0 1-1 .6H6.7a1 1 0 0 1-.9-.6l-.2-.4a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.5-.3l-.7-1.8a2 2 0 0 0-.5-.6A6 6 0 0 1 2 6Zm6-5a5 5 0 0 0-3.5 8.6c.3.2.5.6.7 1l.6 1.4h4.4l.6-1.5.7-1A5 5 0 0 0 8 1Z'/%3E%3C/svg%3E");
    }

    .md-admonition.md-admonition-important {
      --adminition-color: #8250df;
      --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238250df'%3E%3Cpath d='M4.5.1 5 0h6l.4.1 4.4 4.4.1.4V11l-.1.4-4.4 4.4-.4.1H5l-.4-.1-4.4-4.4L0 11V5l.1-.4L4.5.1Zm.6.9L1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1H5.1Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E");
    }

    .md-admonition.md-admonition-caution {
      --adminition-color: #d1242f;
      --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d1242f'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12ZM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z'/%3E%3Cpath d='M7 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 5Z'/%3E%3C/svg%3E");
    }

    .md-admonition.md-admonition-warning {
      --adminition-color: #9a6700;
      --adminition-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%239a6700'%3E%3Cpath d='M8 2h.1L15 13.8v.2l-.1.1H1a.2.2 0 0 1 0-.3L7.8 2.1Zm1-.4a1.1 1.1 0 0 0-2 0L.2 13.2c-.5.8 0 1.8 1 1.8h13.7c.8 0 1.4-1 1-1.8l-7-11.6Z'/%3E%3Cpath d='M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm.1-6a1 1 0 1 1 1.8 0l-.3 3.5a.6.6 0 0 1-1.1 0L7 6Z'/%3E%3C/svg%3E");
    }
  </style>
</head>
<body>

  <div class="md-admonition md-admonition-note">
    <div class="md-admonition-label">Note</div>
    <p>This is a note with a <a href="#">circular alert</a> icon.</p>
  </div>

    <div class="md-admonition md-admonition-tip">
    <div class="md-admonition-label">Tip</div>
    <p>This is a tip with a <a href="#">light bulb</a> icon.</p>
  </div>

  <div class="md-admonition md-admonition-important">
    <div class="md-admonition-label">Important</div>
    <p>This is important content with a <a href="#">square alert</a> icon.</p>
  </div>

  <div class="md-admonition md-admonition-caution">
    <div class="md-admonition-label">Caution</div>
    <p>This caution message uses the <a href="#">box-style alert</a> icon.</p>
  </div>

  <div class="md-admonition md-admonition-warning">
    <div class="md-admonition-label">Warning</div>
    <p>This warning is styled with the <a href="#">triangle alert</a> icon.</p>
  </div>

</body>
</html>

kbond · 2025-05-21T21:38:37Z

Thanks Simon, but I'm a bit confused - should we update the css file to the value you show in #1 (comment)?

smnandre · 2025-06-27T03:07:28Z

Wait, it was for the ux website ? 🥹

kbond · 2025-06-27T12:37:44Z

It was, but I like that you added here. I was just trying to understand why the code changed in the PR was different from your comment.

Update github-admonitions.css

f0ff318

Use CSS var to ease the changes

smnandre mentioned this pull request May 20, 2025

[Site] Add GitHub admonition Commonmark extension symfony/ux#2751

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Update github-admonitions.css #1

Update github-admonitions.css #1

Uh oh!

smnandre commented May 20, 2025

Uh oh!

smnandre commented May 20, 2025

Uh oh!

kbond commented May 21, 2025

Uh oh!

smnandre commented Jun 27, 2025

Uh oh!

kbond commented Jun 27, 2025

Uh oh!

Uh oh!

Uh oh!

Update github-admonitions.css #1

Are you sure you want to change the base?

Update github-admonitions.css #1

Uh oh!

Conversation

smnandre commented May 20, 2025

Uh oh!

smnandre commented May 20, 2025

Uh oh!

kbond commented May 21, 2025

Uh oh!

smnandre commented Jun 27, 2025

Uh oh!

kbond commented Jun 27, 2025

Uh oh!

Uh oh!